HeatMapAPI and the Google Maps API Step 2: Create the Google map
Demo and tutorial of how to use the HeatMapAPI with the Google Maps API and the Prototype JavaScript library.
In step two of our tutorial, we'll create and render the Google map. Starting with this step, we'll only be working with JavaScript.
Loading map…
Before we work with the Google Maps API, you'll need to get a free API key from http://code.google.com/apis/maps/signup.html. Once you have your key, add the following line to the bottom of your document prior to the script element that defines jbWebmap (replace "your-key-here" with your key first!):
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=your-key-here"></script>
This loads the Google Maps API.
Now that the API is loaded, we'll want to add another event listener to our page. Below the existing event listener that calls the init method of jbWebmap, add:
Event.observe(window, 'unload', GUnload, false);
This calls the GUnload function when your page is navigated away from. This is important because the Google Maps API "attaches events to DOM nodes in such a way that almost inevitably causes some browsers to leak memory, particularly Internet Explorer." Using GUnload removes the references that cause the leaks.
Now to create our map! Replace the existing init method of jbWebmap with the following code:
init: function() {
if (GBrowserIsCompatible()) {
var map = $('map');
map.style.width = this.width + 'px';
map.style.height = this.height + 'px';
map = new GMap2(map);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(this.initLat, this.initLon), this.initZoom);
this.map = map;
this.getData();
} else {
$('map').innerHTML = '<p>We're sorry, but your browser doesn't support the Google Maps API.</p>';
}
},
Remember, once the page is fully loaded, this method is called via our first event listener. When it's called, init first checks to see if the browser supports Google Maps via the GBrowserIsCompatible function. If the browser does not support the API, we replace the loading bar with the message "We're sorry, but your browser doesn't support the Google Maps API." to let the user know not to wait.
If the browser does support the API, we grab the map div using Prototype's $ function and load it into memory. We then set the map div's width and height using jbWebmap's width and height properties.
Next, we create a new GMap2 object, passing it the map div. At this point, our Google map has been created, though if we stopped here, it wouldn't render on the page. Having created our map, we add two controls to it using the addControl method of GMap2: the small map type control (the pan and zoom buttons in the upper left corner of our map) and the map type control (the map, satellite and hybrid buttons in the upper right corner).
We now render our map via the setCenter method of GMap2. This method takes three parameters: a required GLatLng object and an optional zoom level and map type object. We'll talk about the first parameter in the next paragraph. The second parameter is set via the initZoom property of jbWebmap. To start at a different zoom level, simply change initZoom to any integer between 1 and 17.
Returning to the first parameter of the setCenter method, we create the GLatLng object by instantiating the GLatLng class. The GLatLng constructor takes two required parameters: a latitude and a longitude. They're supplied by the initLat and initLon properties of the jbWebmap object.
The next line stores our GMap2 object in the map property of jbWebmap. We do this so the GMap2 object will be available to the other jbWebmap methods. Since we instantiated the GMap2 via a local variable, it will pass out of scope once the init method is done executing.
Finally, we call the getData method of jbWebmap, which doesn't do anything yet.
At this point, you should have a rendered and fully functional Google map on your page. In our next step, we'll add the liquor license data to our jbWebmap object using Prototype's Ajax object and by writing the getData method.
Back to Step 1: Getting everything ready | Step 3: Add the data
Last update—12 July 2008
