Display Google Map With Multiple Location in ASP.NET

Introduction

In my last article I showed how to display a single location in 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.

<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>

Step 4: Now create the Gmap control on your ASP.Net page like below.

<cc1:GMap ID="GMap1" runat="server" Width="600px" Height="500px"
        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.

    //to run this application you need the key. You can get it here http://en.googlemaps.subgurim.net/
    string skey = "Your API key";
    GMap1.Key = skey;
    GMap1.addControl(new GControl(GControl.preBuilt.GOverviewMapControl));
    GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));

    //creating marker with latitude and logitude
    GMarker marker = new GMarker(new GLatLng(17.3753, 78.4744));

    //creating pushpin window with content
    GInfoWindow window = new GInfoWindow(marker, "<center><b>Hyderabad, India</b></center>", true);

   //creating new marker for second location
   GMarker marker1 = new GMarker(new GLatLng(16.3, 79.4));      

   //creating second pushpin window
   GInfoWindow windo1 = new GInfoWindow(marker1, "<center><b>Loyapalli, India </b></center>", true);

   //adding windows in GMap control
   GMap1.addInfoWindow(window);
   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 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 which 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.



Conclusion

In this way you can show Google map in your web page with multiple locations.