Step 1: Google Maps API Key

Note: this didn’t come out as expected during the Wordpress migration :(

In order to get a map on your site you must first sign up for a Google Maps API Key. There is no charge for this. Just make sure you follow the Google Maps Terms and Conditions.

The official Google Maps Documentation contains specifc API commands for more advanced users.

The “Hello World” of Google Maps
For the most part, basic Google Maps are fairly trivial. It’s when you’re handling 2 million data points is when it gets a bit tricky.

See Example
*note: I like to stick with the latest web standards, hence the strict DOCTYPE*

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/javascript;
charset=iso-8859-1″ />
<meta name=”description” content=”Google Maps Basic Example” />
<meta name=”keywords” content=”" />
<title>My First Google Map</title>
<script
src=”http://maps.google.com/maps?file=api&v=2.44&key=your_map_key”
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[

// this is the javascript that is responsible for generating the map
function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById("map"));

// latitude and longitude of center of map, on load
// the 18 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 18);
}
}

//]]>

</script>
</head>

<body onload=”load_map()” onunload=”GUnload()”>

<div id=”map” style=”width: 500px; height: 300px”></div>
<br/>
</body>
</html>

Google Map Controls

In order to zoom or pan or view different versions of the map (Satellite or Hybrid) you need to add some more JavaScript.

This adds basic zoom and pan controls to your map (See Example)

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 18 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);
}
}

Add a Marker and Info Window

Generally speaking, data points can be sent in XML format and loaded onto the map. This is just the basic way to include a data point (marker) and it’s corresponding Info Window.

// Adds a marker at the given point with an info window
function createMarker(point, data) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(data);
});
return marker;
}

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);

// Add a marker with an Info Window
var point = new GLatLng(41.91862,-87.86590);

// you can also style the info window
var html = ‘<div style=”color:#005;width:200px;”>’;
html += ‘Check out our other maps at ‘;
html += ‘<a href=”http://www.fishing-locations.com”‘;
html += ‘title=”Fishing Locations and Google Maps”>’;
html += ‘fishing-locations.com</a></div>’;
var marker = createMarker(point,html);

// add the marker to the map
map.addOverlay(marker);
}
}

This adds a marker and corresponding info window. (See Example)

AJAX Your Google Map

One of the cool features of Google Maps API is that it allows you to grab the data using Asynchronous Javascript and XML, better known as AJAX.

This allows you to update the map without refreshing the page. This example gives a basic outline of the request and response activity when the user loads the page.

This adds a marker and corresponding info window. (See Example)

function load_map() {
var map = new GMap2(document.getElementById(”map”));
// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 4);

// Read the data from example.xml
var request = GXmlHttp.create();
request.open(”GET”, “data.xml”, true);

// this is how the ajax is performed
// this part of the script sends a request to the server
// and receives the data.xml file
request.onreadystatechange = function() {
if (request.readyState == 4) { // when all is clear
var xmlDoc = request.responseXML;

// get the marker array and parse the data
var markers = xmlDoc.documentElement.getElementsByTagName(”marker”);

// for each marker, get the attributes and the infowindow data
for (var i = 0; i < markers.length; i++) {
// parse the marker attributes
var lat = parseFloat(markers[i].getAttribute(”lat”)); // lat
var lng = parseFloat(markers[i].getAttribute(”lng”)); // long
var point = new GLatLng(lat,lng); // create the point
// get the infowindow data
var html = GXml.value(markers[i].getElementsByTagName(”infowindow”)[0]);
// create the marker
var marker = createMarker(point,html);
// add the marker to the map
map.addOverlay(marker);
}
}
}
// this sends the ajax request
request.send(null);

} // end load_map()

Here are some of my favorite resources for building Google Maps.

Check out a few of the Google Maps Extended APIs