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 tag prefix 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 API key. 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 longitude
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 a new marker for the 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 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 below.

Conclusion

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