Download the code:
GOOGLEMAPS.ZIP
To use Google Maps, you need to first sign up for a Maps API key at: http://www.google.com/apis/maps/signup.html. However, the key that you apply for is only valid for a particular directory on your Web server. For example, if you want to display a map on http://www.mysite.com/mydir/mypage.html, then you need to apply for a Maps API key for http://www.mysite.com/mydir/, and this key will only work for the pages in this directory. Hence, if you are thinking of displaying the Google Maps on a WebBrowser control in a Windows application, you will have a problem.
Using Google Maps
For this article, I will build an ASP.NET 2.0 Web application using Visual Studio 2005. Name the project as C:\GoogleMaps. Once the project is created, press F5 to run it. The main purpose is to get the URL for the Web application so that you can apply for a valid Maps API key for this application. As I am using the built-in Web server that shipped with Visual Studio 2005, my URL looks something like this: http://localhost:2139/GoogleMaps/. You will most likely have a different port number (2138, in my case), but use your own URL to apply for a Maps API key.
Once you have a valid Maps API key, you can use Google Maps easily. In the Source View of the Default.aspx page, insert the <script> element containing the Javascript that will load the Google Maps, as shown in bold below:
<head runat="server">
<title>Untitled Page</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA26ROxQdKhHJQA3ZbT3HkSBTWrCUD1_1cGNyM6E4
_IspVr1prIxQPz04xVq0xNfzxTGPpQ_lcCEcotQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
Note that you need to replace the following:
key=ABQIAAAA26ROxQdKhHJQA3ZbT3HkSBTWrCUD1_1cGNyM6E4_IspVr1prIxQPz04xVq0xNfzxTGPpQ_lcCEcotQ
with your own key:
key=your_own_valid_Maps_API_key
Also, insert the following (shown in bold) in the <body> element:
<body onload="load()" onunload="GUnload()">
<form id="form1" runat="server">
<div id="map" style="width: 500px; height: 300px"></div>
</form>
</body>
That’s it! Press F5 to test the application. You should now be able to see the Google Maps (see Figure 1).
Figure 1. Viewing Google Maps on the Default.aspx page
Interacting with the Map
Now that we have gotten the Google Maps working, let’s modify the application so that we can get more out of Google Maps.
Note that as you dive deeper into the Google Map API, you would find the online documentation of the API very useful: http://www.google.com/apis/maps/documentation/reference.html#GMap2
First, let’s add a couple of TextBox and button controls onto the Default.aspx page:
<body onload="load()" onunload="GUnload()">
<form id="form1" runat="server">
<div id="map" style="width: 500px; height: 300px">
</div>
<table>
<tr>
<td colspan="2" style="height: 21px">
<strong>Current Location</strong>
</td>
<td colspan="2" style="height: 21px">
<strong>Marker</strong>
</td>
</tr>
<tr>
<td style="width: 100px; height: 21px;
text-align: right">
Latitude
</td>
<td style="width: 100px; height: 21px">
<asp:TextBox ID="txtLatitude"
runat="server"></asp:TextBox>
</td>
<td style="width: 100px; height: 21px;
text-align: right">
Name
</td>
<td style="width: 100px; height: 21px">
<asp:TextBox ID="txtName"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 100px; text-align: right">
Longtitude
</td>
<td style="width: 100px">
<asp:TextBox ID="txtLongitude"
runat="server"></asp:TextBox>
</td>
<td style="width: 100px; text-align: right;">
Description
</td>
<td style="width: 100px; text-align: right">
<asp:TextBox ID="txtDescription"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px; text-align: right">
<input id="btnGotoLocation" type="button"
value="Go to Location"
onclick="goto_map_position()" />
</td>
<td style="width: 100px">
</td>
<td style="width: 100px; text-align: right;">
<input id="btnAddMarker" type="button"
value="Add Marker" onclick="AddMarker()" />
</td>
</tr>
</table>
<br />
</form>
</body>
Figure 2 shows what the Default.aspx page looks like now:
Figure 2. The Design View of Default.aspx
Here are the new features to be added to our application:
- As the map is dragged, the latitude and longitude will be updated on the two TextBox controls
- You can also go to a specific location by entering the latitude and longitude of the new location and then click on the “Go to Location” button.
- You can add a marker (balloon) to a location by giving it a name and description (more on this later).
Back in the Source View of Default.aspx, move the declaration of the map variable to the top, making it a global variable:
<script type="text/javascript">
//<![CDATA[
var map = null;
Rewrite the load() function as follows:
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//---display navigational controls---
map.addControl(new GSmallMapControl());
//---display Map/Satellite/Hybrid---
map.addControl(new GMapTypeControl());
//---fired when the map is dragged---
GEvent.addListener(map, "moveend",
function()
{
var center = map.getCenter();
//---update the lat and lng in the TextBox controls---
document.forms[0].txtLatitude.value = center.lat();
document.forms[0].txtLongitude.value = center.lng();
}
);
//---display the location of Jupitermedia on the map---
map.setCenter(new GLatLng(37.710304, -122.393936), 13);
}
}
Figure 3 shows that the changes in the code will cause the map to display the navigational controls as well as the different types of map you can choose from (Map/Satellite, or Hybrid).
Figure 3. Displaying the additional controls on the map
Next, define the goto_map_position() function, which is invoked when the user clicks on the “Go to Location” button:
//---navigate to a particular location---
function goto_map_position()
{
//---extract the lat and lng from the TextBox controls---
var lat = document.forms[0].txtLatitude.value;
var lng = document.forms[0].txtLongitude.value;
map.panTo(new GLatLng(lat,lng));
}
Also define the AddMarker() function, which is invoked when the user clicks on the “Add Marker” button:
function AddMarker()
{
//--create the info tabs---
var infoTabs = [
new GInfoWindowTab("Name", document.forms[0].txtName.value),
new GInfoWindowTab("Description",
document.forms[0].txtDescription.value)
];
//---add the click event for the marker---
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click",
function() {
//---open the marker info tab---
marker.openInfoWindowTabsHtml(infoTabs);
});
//---add the marker---
map.addOverlay(marker);
//---open the marker info tab---
marker.openInfoWindowTabsHtml(infoTabs);
//---clear the TextBox controls---
document.forms[0].txtName.value="";
document.forms[0].txtDescription.value="";
}
To test the application, press F5. You can add a marker to the map by first looking for a location you want, double-click to centralize it on the map, and then typing the information you want to add to the marker, and finally clicking on the Add Marker button to add it to the map (see Figure 4).
Figure 4. Testing the modified application
Figure 5 shows that there are two tabs in the marker that you have just added.
Figure 5. Adding a marker to a location
Summary
In this article, you had a quick look on how to get started with the Google Maps API. The Google Maps API offers much more than what I can possibly describe in this short article. But once you become comfortable with it, check out the documentation and explore the rest of what the API offers.
Download the code:
GOOGLEMAPS.ZIP
