Introduction
A basic map
We'll begin by using the lesser-known Google Static Maps API to place an image of our desired starting map on a page, wrapped in a simple container div. In the absence of JavaScript, this provides users with a basic fallback:
<div id="map_canvas">
<img src="http://maps.google.com/staticmap?center=53.480998,-2.236748
&zoom=15&size=450x350&key=[YOUR API KEY]"
width="450" height="350"
alt="Map of Manchester, UK" />
</div>View demo 1 to see this in action.
Next, we'll use the "regular" Google Maps API to replace the static contents of the container div with a dynamic map. As the zoom slider of the GLargeMapControl is difficult to recreate/modify later on, this time we'll use its small equivalent, GSmallMapControl.
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR API KEY]"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(53.480998, -2.236748), 15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
map.enableContinuousZoom();
}
}
</script>View demo 2 to see this in action.
Markup breakdown
Using a tool like Opera Dragonfly (access it in the latest version of the Opera browser by going to Tools > Advanced > Developer tools) you can get a rough idea of what's going on.
Figure 1: Opera Dragonfly, showing an extract of the DOM generated by the Google Maps API.
Creating custom controls
Google Maps API gives you enough hooks and methods to create custom controls
Making a drop-in replacement for standard controls
Recreating GSmallMapControl
Recreating GMapTypeControl
View demo 7 to see this in action.
Externalising the styling for increased flexibility
The previous works as a drop-in replacement...without any dependencies, additional css or images. only thing required is to add the redefined AccessibleSmallMapControl and AccessibleMapTypeControl objects, and replace calls to the standard GSmallMapControl and GMapTypeControl.
What if we want to change the look and feel of the controls? We could hack away at the new object definitions and change the hardcoded styles, but that could get messy quickly. Instead, we'll externalise the styling completely...yes, you'll need a separate bunch of css rules and images, so requires a bit more work. But, this gives you extra flexibility...the code becomes a common framework that you don't touch, and then you can change look and feel very easily as needed.
Custom controls with custom look and feel
Now that the code only creates the buttons and adds explicit classes to all those buttons, we can get to work writing the css
And here's a few examples.