google

Display multiple markers on Google World Map in asp.net website with locations from database

| Wednesday, November 12, 2014
In Google Maps in asp.net website with dynamic addresses from database. , I explained how to display the address of a location on the google world map from the database. This article displayed only one address on the map. But in this article, I will explain and provide the sample code to display markers for multiple locations on google map from the database. This feature can be used to display multiple clients or hotels etc in an area on the google world map.

First of all, Add following javascript in the head section of the page to access the google maps API.

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  

Add following javascript code in the head section of the page to access the google api functions to display the map on the page.

  var geocoder;  
     var map;  
     var infoWindow = new google.maps.InfoWindow;  
     function initialize() {  
       geocoder = new google.maps.Geocoder();  
       var latlng = new google.maps.LatLng(-34.397, 150.644);  
       var mapOptions = {  
         zoom: 2,  
         center: latlng,  
         mapTypeId: google.maps.MapTypeId.ROADMAP  
       }  
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
     }  

geocoder - initializes the Geocoder class of google map API
map - displays the map in the div added on the page for displaying map along with various map options like zoom, maptype etc.
infoWindow - displays the small tooltip like window on google map when a marker is clicked.

To display multiple markers, either an xml file generated from the database can be used or an xml string can be generated from the database. Here I am using an xml string from the database which contains the name of the person, its address and link to check his/her profile.

Following html is added on the page to display the map on the webpage.
  <div id="main_table">  
     <div id="main_wrap">  
       <asp:HiddenField ID="hdnAddress" runat="server" />  
       <div id="map_canvas" style="width: 900px; height: 600px;"></div>  
     </div>  
   </div>  

The code behind file will contain code to call the javascript methods and generate xml string. Write the following code in Page_Load event
  if (!IsPostBack)  
       {  
         ClientScript.RegisterStartupScript(GetType(), "show", "initialize();", true);  
         string xmlAddresses = @"<?xml version='1.0' encoding='utf-8' ?>";  
         xmlAddresses = xmlAddresses + @"<markers>";  
         DataTable dt = person.GetFellowsForLocations();  
         if (dt.Rows.Count > 0)  
         {  
           foreach (DataRow row in dt.Rows)  
           {  
             encrypt = new EncryptDecrypt.MyEncryptor(string.Empty);  
             string queryStr = encrypt.Encrypt(Convert.ToString(row["Id"]));  
             xmlAddresses = xmlAddresses + @"<marker address='" + Convert.ToString(row["FellowshipCountry"]).Trim() + "' name='" + Convert.ToString(row["FirstName"]) + " " + Convert.ToString(row["LastName"]) + "' url='fellowdetail.aspx?id=" + queryStr + "'></marker>";  
           }  
         }  
         xmlAddresses = xmlAddresses + @"</markers>";  
         hdnAddress.Value = xmlAddresses;  
         ClientScript.RegisterStartupScript(GetType(), "show1", "codeAddress();", true);  
       }  

Following script is used to display the markers on the google world map
 function codeAddress() {  
       var locations = document.getElementById('<%= hdnAddress.ClientID %>').value;  
       locations = StringToXML(locations);  
       var addresses = locations.documentElement.getElementsByTagName("marker");  
       for (var i = 0; i < addresses.length; i++) {  
         var address = "";  
         var name = addresses[i].getAttribute("name");  
         var url = addresses[i].getAttribute("url");  
         address = addresses[i].getAttribute("address");  
         var html = name + "<br/><a href='" + url + "'>View Profile</a>";  
         (function (html) {  
           geocoder.geocode({ 'address': address },  
             function (results, status) {  
               if (status == google.maps.GeocoderStatus.OK) {  
                 map.setCenter(results[0].geometry.location);  
                 var marker = new google.maps.Marker({  
                   map: map,  
                   position: results[0].geometry.location  
                 });  
                 bindInfoWindow(marker, map, infoWindow, html);  
               } else {  
                 alert("Geocode was not successful for the following reason: " + status);  
               }  
             });  
         })(html);  
       }  
     }  

Add following javascript method to convert xml string into xml type data.

 function StringToXML(oString) {  
       //code for IE  
       if (window.ActiveXObject) {  
         var oXML = new ActiveXObject("Microsoft.XMLDOM"); oXML.loadXML(oString);  
         return oXML;  
       }  
         // code for Chrome, Safari, Firefox, Opera, etc.  
       else {  
         return (new DOMParser()).parseFromString(oString, "text/xml");  
       }  
     }  

Add following javascript function to display the tooltip like window when a marker is clicked.

  function bindInfoWindow(marker, map, infoWindow, html) {  
         google.maps.event.addListener(marker, 'click', function () {  
         infoWindow.setContent(html);  
         infoWindow.open(map, marker);  
       });  
     }  

The output in the browser will be

Size of the map and canvas can be changed as per the requirement. Also the zoom levels of the map can be altered in map options while initializing.

3 comments:

  1. There are many articles that pretend to address this topic, but this is the first complete explanation that I have seen. Thank you.

    ReplyDelete
  2. can we display the tooltip on pageload? if yes can u please post it here.

    ReplyDelete
  3. hi how can get last update to map in this page http://en.googlemaps.subgurim.net/ChangeLog.aspx

    ReplyDelete

Next Prev
▲Top▲