Click here to Skip to main content
15,881,172 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I want to embed google map somewhat like this site
Regrob.com[^]
When you submit search for any location, the map shows pointer on all the places relevant to this search from database. When you click on any of the marked locations, a pop up box appears with a hyperlink kind of box named 'view more' and if you click on this link, it redirects the use to related webpage.

I have searched google to find code for something like this. This search has helped me with code to show multiple locations but i did not get any code to post link on map whereby user can be redirected to site depending on the marked location.

What i am looking for is dynamic display of all the listed places in a database in sql server and redirect to webpage by click on a marked location from map.

It is not impossible, as an example already exists on the site i stated above.

I need help urgently for the code/ guidelines/ tutorial/ any kind of help

Shall be grateful for this help
Posted
Updated 9-Mar-23 1:20am

1 solution

Here's some code cribbed from a project of mine. Basically add some HTML to the info window text - this can redirect users or call any JS function you want.

/**
 *  Object to hold global vaiables
 *  Set objGlobal.map = the Google Map when first initialized
 *  infos needn't actually be an array, as I only ever assign a single object to it (with index 0)
 *  but I never got round to rewriting this
 */
   var objGlobal = {
      map: null,
      infos: []
   }
   
/**
 * Simple ajax call to get spot locations form database
 * returns a JSON array
 */
   function getSpots() {
      $.ajax({
         url: "ashx/getSpots.ashx",
         cache: false,
         type: "get",
         async: false,
         success: function (response) {
            drawSpots(response);
         }
      });
   }

/**
 * Parses the JSON returned from above and draws the spots on the map
 * see below for an example of the JSON
 */   
   function drawSpots(response) {
      var jsonData = JSON.parse(response);
      var i;
      var pos;
      var mark;
      var html;
      var info;
      for (i = 0; i < jsonData.spots.length; i++) {
         html = '../images/spot.gif';
         pos = { lat: jsonData.spots[i].dLat, lng: jsonData.spots[i].dLong }
         mark = new google.maps.Marker({
            position: pos,
            map: objGlobal.map,
            // label: jsonData.spots[i].sName,
            title: jsonData.spots[i].sName,
            icon: html
         })

         html = '<p>' + jsonData.spots[i].sName + '</p><p><a class=\"spot\" onclick=\"whatever-you-want\">Click for whatever</a></p>';
         info = new google.maps.InfoWindow;

         google.maps.event.addListener(mark, 'mouseover', (function (mark, html, info) {
            return function () {
               /* close the previous info-window */
               closeInfo();
               info.setContent(html);
               info.open(objGlobal.map, mark);
               /* keep the handle, in order to close it on mouseout */
               objGlobal.infos[0] = info;
            };
         })(mark, html, info));

      }
   }

 /**
 * Closes the current info window on mouseout
 */  
   function closeInfo() {
      if (objGlobal.infos.length > 0) {
         /* detach the info-window from the marker ... undocumented in the API docs */
         objGlobal.infos[0].set("marker", null);
         /* and close it */
         objGlobal.infos[0].close();
         /* blank the array */
         objGlobal.infos.length = 0;
      }
   }

And the JSON is an array of spots, of the form:
{
  "spots": [
    {
      "ID": 31634,
      "sName": "Dundee, U.K.",
      "dLat": 56.45,
      "dLong": -3.03
    },
    {
      "ID": 33463,
      "sName": "Leeds Bradford, U.K.",
      "dLat": 53.87,
      "dLong": -1.66,
    }
  ]
}
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900