Google Maps API

Tonight I’ve been doing some work on a website that needed an embedded map. Naturally, I turned to Google Maps, only to discover there’s really two ways of using them.
Firstly, the iframe method. That really sucks, because I’ve no control over how the map looks, or what information is presented.
Secondly, the API. I’ve used this once before, but only as a copy and paste job. Now I discover there’s a new version of the API, much cleaner and better written. Plus, there’s no need for the API key anymore. Perfect. Only, as I read through the documentation, I discover this is a very powerful API, with similarly obtuse documentation. There’s one example map, plus a number of contributed pages purporting to be tutorials. Some just didn’t exist any more, and others were even more confusing than the API documentation.

Fortunately, Google’s search division came to the rescue. I came across a blog that described how to use the API in multiple stages. First up, just the map. Then some settings, a marker, and an information window. Perfect. Exactly what I wanted to do, nicely explained and broken down, so someone unfamiliar with the API, and only vaguely familiar with javascript, could understand. Thanks Gabriel Svennerberg!

Lastly, I needed to work out how to put the map into a drupal node. Every example seemed to make use of the onLoad property of the body tag, which obviously wouldn’t do.

My final result was this:

<div id=”map_canvas” style=”width:400px; height:400px”></div>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript”>
//map generating code went in here
</script>