HeatMapAPI and the Google Maps API Step 1: Getting everything ready

Demo and tutorial of how to use the HeatMapAPI with the Google Maps API and the Prototype JavaScript library.

Step one involves getting everything ready: HTML, CSS, importing Prototype and creating our JavaScript oject.

Loading map…

HTML

The HTML for our map is quite simple:

<div id="map"><p id="loading">Loading map...</p></div>

Add this to the page where you want your map to display. Since the various APIs can take awhile to load, the p element informs users that something will happen here.

CSS

The CSS is also quite simple:

<style type="text/css">
#map {
border: 1px solid #ccc;
}
#map p#loading {
background: url(path/to/ajax-loader.gif) center center no-repeat;
padding-top: 150px;
text-align: center;
}
</style>

This should be added the head of our page. It gives our map div a light-grey border and adds a loading bar to our p element. The loading bar was generated by the free ajaxload.info.

JavaScript

Download the latest version of Prototype from http://prototypejs.org/download. In the head of your document, add the following line of code to load it:

<script type="text/javascript" src="path/to/prototype.js"></script>

Now, we'll lay out our custom JavaScript object. At the bottom of your page add the following code:

<script type="text/javascript">
jbWebmap = {
initLat: 43.0549758046,
initLon: -87.9378700650,
initZoom: 11,
width: 400,
height: 300,
init: function() {
},
getData: function() {
},
addHeatMap: function() {
},
data: new Array(),
map: false
}
Event.observe(window, 'load', jbWebmap.init.bindAsEventListener(jbWebmap), false);
</script>

This creates our global map object, named jbWebmap. jbWebmap has several properties:

  • initLat is our starting latitude.
  • initLon is our starting longitude.
  • initZoom is our starting zoom level.
  • initType is our map type.
  • width is the width of our map in pixels.
  • height is the height of our map in pixels.
  • data will store our liquor license point data.
  • map will store our Google map object.

Note that all of the properties can be modified except for data and map, which should be left alone. initZoom and initType should be set to valid Google Maps API values (discussed in step two).

jbWebmap also has three methods:

  • init will create our map using the Google Maps API and will be developed in step two of this tutorial.
  • getData will load our data using Prototype's Ajax object and will be developed in step three.
  • addHeatMap will add our density map using the HeatMapAPI and will be developed in step four.

The final piece of code adds an event observer to our document—after the document is fully loaded, the init method of jbWebmap will be called.

Back to intro | Step 2: Create the Google map

Last update—12 July 2008

Want to work with us yet? We’re ready when you are.