Google Maps API V3 Integration Part 1

map

Google’s API’s are great tools for adding interface and front end features. Their much lauded maps API is no exception, it’s power, ease of use and extreme flexibility make it a must have for any developers toolkit.

You may want to review the Terms of Use.

The API

First we call the API, version three doesn’t require a key so we can just link directly to the source, as is customary you can use https if needed.

The sensor parameter is required, unless you are using a sensor such as a GPS locator set this to false.

1
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

The HTML

Next, create a div to display the map. All we need is a div with a suitable ID assigned to it, google uses map_canvas in their examples so I’ll use that here.

1
  <div id="map_canvas"></div>

The CSS

Just a tiny bit of CSS is needed, our javascript will do most of the work when it comes to styling.

1
2
3
4
5
#map_canvas {
width: 960px;
height: 400px;
border: 1px solid #999999;
}

The Javascript

Now for the good stuff. The map javascript itself in this basic example involves 3 elements. FCreate an event to initalize the map once the page loaded, define our map function and configure out options. In this case im just setting 3 options:

  • Zoom: Setis the initial resolution of the map display, 0 is fully zoomed out, increase in increments of 1 to zoom in.
  • Center: The center point of the map in latitude,longitute. You can get these coordinates from google maps by right clicking on a point, selecting What’s Here from the menu, and then hovering over the resulting green arrow icon.
  • MapType: You can set this to TERRAIN, ROADMAP, SATELLITE or HYBRID.
1
2
3
4
5
6
7
8
9
10
11
12
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(40, -100),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

The Demo

This entry was posted in Snippets and Demos.