Post
Ask Question

Display Google Map With Multiple Location in ASP.NET

Introduction

 
In my last article, I showed how to display a single location on a Google map. When you need to show multiple branches of the company on the map you can use this Google map control on your ASP.Net page and populate the multiple locations on a single map.
 
Background: In this article, we are using the Google map control provided by googlemaps.sugurium.net. To display the Google map you need to use the following steps.
 
Step 1: First you need to create your own API key which you can get here.
 
Step 2: After getting your API key for the Google map control you need to download the GMaps.dll from the attached source code with this article and add the reference of Gmaps.dll to your project.
 
Step 3: After adding a reference to Gmaps.dll you are ready to create the control on your ASP.Net page. So first register the tagprefix for Gmaps. Like below.
  1. <%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %> 
Step 4: Now create the Gmap control on your ASP.Net page like below.
  1. <cc1:GMap ID="GMap1" runat="server" Width="600px" Height="500px"  
  2.         enableHookMouseWheelToZoom="True" /> 
Step 5: Still now we have our gmap control; now we need to create the locations pushpins by specifying the latitude and longitude. So in your code-behind write down the following given code in the page_load event.
  1.  //to run this application you need the key. You can get it here http://en.googlemaps.subgurim.net/  
  2.  string skey = "Your API key";  
  3.  GMap1.Key = skey;  
  4.  GMap1.addControl(new GControl(GControl.preBuilt.GOverviewMapControl));  
  5.  GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));  
  6.   
  7.  //creating marker with latitude and longitude 
     
  8.  GMarker marker = new GMarker(new GLatLng(17.3753, 78.4744));  
  9.   
  10.  //creating pushpin window with content  
  11.  GInfoWindow window = new GInfoWindow(marker, "<center><b>Hyderabad, India</b></center>", true);  
  12.   
  13. //creating a new marker for the second location  
  14. GMarker marker1 = new GMarker(new GLatLng(16.3, 79.4));        
  15.   
  16. //creating second pushpin window  
  17. GInfoWindow windo1 = new GInfoWindow(marker1, "<center><b>Loyapalli, India </b></center>", true);  
  18.   
  19. //adding windows in GMap control  
  20. GMap1.addInfoWindow(window);  
  21. GMap1.addInfoWindow(windo1); 
In the above code, the first line contains your API key so paste the API key you obtained from step1. Next in the code, we are creating a GMarker which takes the latitude and longitude of the location which you want to show on your Google map. You can create multiple such markers. After that, we create an information window that is nothing but HTML markup with our custom content in it. You can design it as you need. Finally, we are adding the created window in GMap control.
 
Step 6: Now run your application and see the output like below.
 
googlemap.gif
 

Conclusion

 
In this way, you can show a Google map on your web page with multiple locations.


Similar Articles