Recently I had the chance to work with a bunch of zip code and area code data. Each code had an associated latitude and longitude - from a list of area codes, I had to find those that were N miles from a specific zip code. Ultimately the solution didn’t call for a map-style UI, but I had he opportunity to explore the Google Maps API a bit. Here’s a brief overview of the service.

What is it?

The Google Maps API is a service with which you can configure interactive maps and embed them in your web page. As you can see to the right, you can mouse around the map, zoom, and even drop into street view.

Get an API key

Before you start using the Google Maps API, you’ll need to get an API key. Head over to the Google API console and click on the “Create new Browser key” button. A dialog will open where you can enter restrictions that control which hosts can use the key.

For development purposes, just leave that blank and click “Create” to generate your key. Take note of this key - you’ll need it later when you construct your API calls. Look at the Google Maps API documentation for more information about Google API keys.

One more note on keys: there are restrictions to the frequency of requests you can make to the API - there are also daily limits for some features. Request limit details can be found on the Google Business FAQ.

Basic example

The most basic example of a Google Map requires three components:

  • HTML markup - you’ll need a div tag to house the map
  • Javascript - a small bit of code to call the Google Maps API with parameters to configure the map
  • Optional - CSS to style your page
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="gmaps.css" />
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=user_your_key_here&sensor=false"></script>
      <script type="text/javascript" src="gmaps.js"></script>
    </head>
    <body>
      <div id="map-canvas"/>
    </body>
  </html>

The HTML file is pretty standard markup. Line five is the most important - this is required to load the Google Maps API. You’ll also need a div block to house the map - use whatever identification scheme you like - you’ll use Javascript to get a reference to this element for the API call.

  google.maps.event.addDomListener(window, 'load', function() {
    var canvas = document.getElementById("map-canvas");
    var mapOptions = {
      center: new google.maps.LatLng(40.714352, -74.005973),
      zoom:   7
    };

    var map = new google.maps.Map(canvas, mapOptions);
  });

This is where the magic happens. First we wait until the page is loaded before calling the API:

  google.maps.event.addDomListener(window, 'load', function() { ...

Then we get a reference to the HTML element that will contain the map and set up some minimal map options:

  var canvas = document.getElementById("map-canvas");
  var mapOptions = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    zoom:   7
  };

At the minimum, you need to set a center for the map and a zoom-level. In this example, I’m using explicit latitude and longitude coordinates. The Google Maps API includes a geolocation package - you may find that a more intuitive interface to use here.

Finally, we bring the HTML element and the options together - when the page is done loading, you should have a map!

  var map = new google.maps.Map(canvas, mapOptions);

Here is the complete code for this example: Code for this example is up on github.

CSS Styling

The map container element is subject to the usual CSS styling rules. You can use styles to format the map’s borders, dimensions, and placement. You can see a demo of this towards the top of this article or click below to demo in a new page.

See the demo >>
View the code >>

Map Types

Aside from street view and birds-eye view (which are also available to the API) Google Maps has four view modes: Satellite, Road Map, Hybrid, and Terrain. This can be set during map initialization as an option:

  var mapOptions = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    zoom:   7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

Or it can be set with a separate Javascript call:

  map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

This is particularly helpful if you want to set the map type based on an event handler. In this example, we change the map type on a click event:

  $("input[type=radio]").click(function(e) {
    map.setMapTypeId(e.target.value);
  });

Note - this example users jQuery to manage the radio button click events.

See the demo >>
View the code >>

If you want to manage the map controls yourself, you can disable all map widgets:

  var mapOptions = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    zoom:   7,
    disableDefaultUI: true
  };

See the demo >>
View the code >>

Although the navigation widgets are removed from the map UI, you can still use the mouse to move around the map and zoom in and out.

Markers

With a little bit of Javascript, you can add your own custom markers to a map.

  google.maps.event.addListener(map, 'click', function(event) {
    new google.maps.Marker( { position: event.latLng,
                              map:      map } );
  });

In this example, a marker is added each time you click on the map.

See the demo >>
View the code >>

This barely scratches the surface

In this article, we discussed the basics behind the Google Maps API: Getting a key, creating a basic map, setting a few properties, and reacting to events. There is much, much more to explore here. The google maps developer’s guide is comprehensive and covers topics such as: events, layers, overlays, and geolocation. If you’re interested in learning more, check out their guide - it is very detailed.

That’s all for now. If you want to explore this API with me further, let me know and I’ll dive in further in a follow-up post.