As you may already know the latest version of the Google maps API no longer requires an API key so I thought I’d see how easy it is to add quick map to a website. The answer turns out to be, very very easy.

Add a reference to the API

So the first thing we need to do is reference the API. This is as easy as adding one javascript include:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB"></script>

There’s two querystring parameters I’m specifying:

  • sensor=false – This tells google that I don’t havea gps sensor that will be passing coordinates.
  • region=GB – This restricts the region that I want to display a map for and means that when I’m looking up an address it will be constrained to only this region (Great Britain).

Add some html elements

The body of this page is going to be very simple. We’re just going to show a textbox where you can enter a postcode, a button that you click to show the map for that postcode and the map itself.

<body style="margin:0px; padding:0px;" onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="L1171AP"> 
    <input type="button" value="Show map" onclick="showMap()"> 
  </div> 
  <div id="mapCanvas" style="width:300px; height:300px"></div>

Initialise the map

To show our map we will need a Map object and a Geocoder object. We’re going to use the geocoder to get the geolocation of our postcode by first creating a new Geocoder instance. Next we specify a few options, a zoom level that specifies how far our map will be zoomed and a mapTypedId which will make our map be shown as a roadmap. Then we create a new Map object passing in the element which will contain the map and the options we’ve specified. We call this function in the onload event of the page and we’ve got a google map, but it’s not showing anything just yet.

var geocoder; 
var map; 
function initialize() { 
  geocoder = new google.maps.Geocoder(); 
  var options = { 
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  map = new google.maps.Map(document.getElementById("mapCanvas"), options); 
}

Show the map

So now all we need to do is show the map for our postcode. We call the geocode function of out geocoder passing in the value of our address text box and a function that will center our map on our postcode and add a marker to it.

function showMap() { 
  var address = document.getElementById("address").value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); 
    } else { 
      alert("Geocode was not successful for the following reason: " + status); 
    } 
  }); 
}

That’s it

This was meant to be a seven step tutorial but Google have made working with their API so simple that there’s nothing else to do. The full code is below:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB"></script> 
<script type="text/javascript"> 
  var geocoder; 
  var map; 
  function initialize() {
    geocoder = new google.maps.Geocoder(); 
    var myOptions = { 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions); 
  } 
  function showMap() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
          map: map, 
          position: results[0].geometry.location 
        }); 
      } else { 
        alert("Geocode was not successful for the following reason: " + status); 
      } 
    }); 
  } 
</script>  
<body style="margin:0px; padding:0px;" onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="L171AP"> 
    <input type="button" value="Show map" onclick="showMap()"> 
  </div> <div id="mapCanvas" style="width:300px; height:300px"></div>

I based all of this on one of the great samples at the Google API geocoding docs.