An overview of Google maps implementation in Asp.Net
by Pierre Boisvenue. November 14, 2007
In order to start implementing Google Maps inside an Asp.net application one must
obtain a valid key from google. The key is on a per web site basis.
Once the key is obtain it may then be inserted in place of ABCDEFG.
To be noted that the following code snippets demonstrate the usage of the Google maps API on its
own and does not rely on the Google Ajax API loader, the common google AJAX wrapper.
The intent here is to concentrate on the Google Map API itself.
|
<script
type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
|
This javascript snippet is inserted in the HTML header section of your web page and provides the link to the javascript code responsible for the Google maps implementation.
Also inserted in the HTML header section of your web page is the following javascript code snippet function called initialize.
<script type="text/javascript">
google.load("maps", "2.x");
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
google.setOnLoadCallback(initialize);
</script>
|
This code will be called during the loading process of the web page. It is at this
instance that a Google map will be created.
|
<body onload="initialize()" onunload="GUnload()">
|
The GUnload() function is a utility function designed to prevent memory leaks and is automatically handled by Google.
Finally inside the HTML body tag you will have the following DIV, the container for the Google map.
<div id="map_canvas" style="width: 500px; height: 300px"></div>
|
In this case the width has been set to 500px and height to 300px
Latitudes and Longitudes
The Latitudes and Longitudes are earth coordinates to identify a specific location accurately. For example
new GLatLng (37.4419, -122.1419), 13);
javascript function call is use to set the coordinate and the number 13 is the zoom level.
In order to determine earth coordinates one may use geocode services. The geocode service provides a
mechanism in translating street addresses to Longitude and Latitude. The Google geocode service
provides two ways of obtaining earth coordinates. The first is via an HTTP request using the following syntax.
To access the Maps API geocoder directly using server-side scripting,
send a request to
http://maps.google.com/maps/geo? with the following parameters in the URI:
q -- The address that you want to geocode.
key -- Your API key.
output -- The format in which the output should be generated. The options are xml, kml, csv, or json.
The second method for retrieving coordinates is programmatically via javascript.
Just add the following in the header section.
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point)
{
alert(address + " not found");
}
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
|
A very brief Hello world
sample
-
Basic Google map documentation
-
Google map API
Google, maps, GIS, Asp.Net, API
Comments view
Add Comments
: Name
: Email Address