Customizing Google Maps - Part III - Customizing the Google Maps API

Now for the fun stuff. You can download the full tutorial HTML page and KML data here.

Google Maps has a free API you can use to add Google Maps functionality directly to your site. You don’t get every single feature of Google Maps - notably absent is any routing capabilities - but you get quite a lot.

The Google Maps API is entirely JavaScript, so if JavaScript gives you a headache, go ahead and grab an aspirin. You can wrap the JavaScript in server-side code to make certain things more convenient, but you’re still tossing out JavaScript on the back end. As such, we’re going to do this demo entirely in JavaScript to make it backend-neutral.

We’re going to accomplish a couple of things with this tutorial:

Add a Google Map to our web page.
Add the standard Google Map controls - panning, zooming, map type, etc.
Add some custom data from a KML file.
Add a point to the map on the fly.

The first step is to get your Google Maps API Key. This is a key you’ll need in order to use the Google Maps API, and it is good for one web site (folder) on your server. If you are doing this from the root folder of your workstation, give it a URL of http://localhost.

Once you have that hiddeously long key, you’re ready to roll.

Make your standard HTML web page however you want. In the HEAD section, put in a reference to the Google Maps JavaScript library, inserting your API Key for your_api_key:

<script src=”http://maps.google.com/maps?file=api&v=2&key=your_api_key" type=”text/javascript”></script>

Next, let’s make the DIV tag with an ID of “map” in the BODY section of our page:

<div id=”map“ style=”width: 800px; height: 600px”></div>

Note you can also use percentages for the width and height. Now, let’s add this JavaScript to the HEAD tag under our reference to the Google Maps JavaScript library:

<script type=”text/javascript”>

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(35.2203619, -80.8372560), 13);
}
}

window.onload = load;
window.onunload = GUnload;

</script>

Here I’m giving it a starting location around downtown Charlotte. Note the “map” argument - that’s the id of the DIV tag we made before. The window.onload argument calls the load function with the web page is loaded. The window.onunload cleans things up when the page is unloaded.

Viola - open your page in a browser and you’re in business.

Next, let’s add some standard map controls - pan/zoom (GLargeMapControl), scale indicator (GScaleControl), and map type (GMapTypeControl). We’ll add those calls to our load function:

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(35.2203619, -80.8372560), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
}
}

Refresh your page and you’ll see your fully functioning controls.

Now, let’s add some of our own data. I’ve created a points layer that has Mecklenburg County’s government buildings in it and put it on our web server. To add it, we just need to insert two lines of code:

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(35.2203619, -80.8372560), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
var gx = new GGeoXml(“http://maps.co.mecklenburg.nc.us/govt_buildings.kml");
map.addOverlay(gx);
}
}

There we have it - our map with some custom data. Note I’ve used a different marker symbol than the standard for most of the points so you can see a little variety.

Now one final nugget - adding a point through JavaScript. This is handy for things like adding a point for a geocoded address. Let’s make this function and put it below our other code:

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

This creates a marker for our point and adds a “click” event that will launch an information window. Finally, we’ll call that function from our main code block:

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(35.2203619, -80.8372560), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
var gx = new GGeoXml(“http://maps.co.mecklenburg.nc.us/govt_buildings.kml");
map.addOverlay(gx);
var point = new GLatLng(35.220, -80.837);
var marker = createMarker(point,’Display Some Stuff<br />
…in this window.’);
map.addOverlay(marker);
}
}

We’ve added a map, added map controls to the map, added a custom KML dataset, and then created a new marker through code. All in about a 40 line HTML page. Not bad for a day’s work.