The Google Maps API is the great granddaddy of mapping API. Originally, the GMap API was an internal private Google API until reverse engineered by Adrian Holovaty to create the first great mapping mashup, Chicago Crime (now folded into Every Block). The API is well documented, well understood and easy-to-use but suffers from the look getting a little long in the tooth and the API key design imposing a higher administrative burden than the competing packages.
The way we set up the events in Google Maps is a little different than we did in MapQuest, Yahoo Maps and Visual Earth. GMaps uses a two phase creation scheme, using one call to create the map object and a second call to actually display it somewhere. I like this and it would have got around the “jumping map” issue we saw in Virtual Earth. Because we want to capture the load event – to get the initial state of the map – we have to put it between these two calls otherwise we’ll miss the load event (it would be nice if Google just called your “onload” callback if the map was already loaded).
My least favorite part of the GMap API is that you need a per-domain API key. This is the most restrictive licensing of any of the mapping packages. Amongst the problems this will cause you:
- if you’re working in development, staging, deployment environments you’ll have to drive your map from dynamic HTML, as you’ll need to switch in the correct key
http://user.example.com, it will mean that all your users will have to individually sign up for API keys — e.g. uptake will be slow. update: see the comments
The documentation for the GMap API is by far the best of any of the mapping package. Everything is cleanly laid out and there’s no question how you get from concepts, to examples, to the API spec.
Here’s our example map application and the source below. You’ll have to get your own API key and substitute it in if you want to start using this example. Geocoding is almost as easy as in the Yahoo API, with the caveat that you really want to set the baseCountryCode, as it won’t make a guess for the country on your behalf. Unlike all the other applications, the GMap API will not take strings where it expects numbers, hence all the parseFloats in the example below.
<html>
<head><script
type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY"></script>
<style type="text/css">
#id_map {
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="id_map"></div>
<p>
Lat: <input type="text" id="id_lat" onchange="map_js.onupdate_ll()" />
Lon: <input type="text" id="id_lon" onchange="map_js.onupdate_ll()" />
Zoom: <input type="text" id="id_zoom" onchange="map_js.onupdate_zoom()" />
</p>
<script type="text/javascript">
map_js = {
e_lat : null,
e_lon : null,
e_map : null,
g_map : null,
g_geocoder : null,
create : function() {
map_js.e_map = document.getElementById("id_map");
map_js.e_lat = document.getElementById("id_lat");
map_js.e_lon = document.getElementById("id_lon");
map_js.e_zoom = document.getElementById("id_zoom");
map_js.g_map = new GMap2(map_js.e_map);
map_js.g_geocoder = new GClientGeocoder();
map_js.g_geocoder.setBaseCountryCode("ca")
GEvent.addListener(map_js.g_map, "load", map_js.onposition);
GEvent.addListener(map_js.g_map, "moveend", map_js.onposition);
GEvent.addListener(map_js.g_map, "zoomend", map_js.onposition);
map_js.g_map.addControl(new GSmallMapControl());
map_js.g_map.addControl(new GMapTypeControl());
map_js.g_geocoder.getLatLng("Toronto, ON", map_js.ongeocoded);
// map_js.g_map.setCenter(new GLatLng(43.648565, -79.385329), 13);
},
ongeocoded : function(point) {
if (!point) {
alert("not found");
} else {
map_js.g_map.setCenter(point, 13);
}
},
onposition : function() {
var c = map_js.g_map.getCenter();
map_js.e_lat.value = c.lat();
map_js.e_lon.value = c.lng();
var z = map_js.g_map.getZoom();
map_js.e_zoom.value = z;
},
onupdate_ll : function() {
map_js.g_map.panTo(
new GLatLng(parseFloat(map_js.e_lat.value), parseFloat(map_js.e_lon.value)));
},
onupdate_zoom : function() {
map_js.g_map.setZoom(parseInt(map_js.e_zoom.value));
},
end : 0
};
map_js.create();
</script>
Next up in our tour of Javascript mapping APIs is 
This post should be subtitled “
Yahoo is a nice alternative service to Google Maps for displaying maps on your website or service. Amongst its benefits:
“. Clicking on any of these links will bring you a highlighted section of the document, such as