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.
- <%@ 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.
-
- string skey = "Your API key";
- GMap1.Key = skey;
- GMap1.addControl(new GControl(GControl.preBuilt.GOverviewMapControl));
- GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));
-
-
- GMarker marker = new GMarker(new GLatLng(17.3753, 78.4744));
-
-
- GInfoWindow window = new GInfoWindow(marker, "<center><b>Hyderabad, India</b></center>", true);
-
-
- GMarker marker1 = new GMarker(new GLatLng(16.3, 79.4));
-
-
- GInfoWindow windo1 = new GInfoWindow(marker1, "<center><b>Loyapalli, India </b></center>", true);
-
-
- 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 like below.
Conclusion
In this way, you can show a Google map on your web page with multiple locations.