http://www.developer.com/

Back to article

Introducing the Google Maps JavaScript API V3


October 1, 2010

My, how time flies. More than five years ago I penned the first of what has since turned out to be a pretty lengthy -- not to mention popular -- series covering various facets of the Google Maps API. (If you'd like to check out the previous 12 installments, I've assembled a compendium on my blog.) Over the course of these five years, the API developers have continued to expand and improve the product, elevating the project to a level at which what you can do with the API is limited only by your imagination.

On May 19, 2010, the API took another evolutionary step forward with the release of version 3, better known as Google Maps JavaScript API V3. In addition to significantly streamlining the JavaScript-based syntax used to create maps, add markers, and perform other tasks, the API has been optimized for use within both mobile applications and the traditional desktop environment. A number of new features are also available, including the popular Street View feature, draggable directions, and the intriguing Customizable Panorama.

I've been using the new API for a few months now, and believe that V2 users would be well served to consider upgrading at their earliest convenience. In this lucky thirteenth installment, I'll talk about the key changes that you'll need to keep in mind when writing new location-based scripts or upgrading existing applications.

Creating Your First Google Maps API V3 Map

Perhaps the most immediately noticeable change made to V3 is the removal of the previously required domain-based API key. However, you'll find that the JavaScript syntax is much more concise than that in V2, thanks to using an object literal to define map properties. You'll pass this literal to the google.maps.Map() constructor as demonstrated here:

<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<style type="text/css">
#map { border: 1px solid black; width: 400px; height: 300px; }
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.984577, -83.018692);
var options = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>

In the above example, options is the literal, defining the map's zoom level, center point, and map type. With these attributes defined, you'll create a new map object using the google.maps.Map() constructor, passing it the element ID where the map should be rendered along with the object literal. Executing this example in your browser produces the map displayed in Figure 1.

 


Figure 1. Your First Google Maps API V3 Map

 

As with V2, V3 continues to support your ability to control how the map type and zoom/pan controls are rendered, including determining whether you want to render them at all. For instance, to remove the zoom/pan control, just add the following line to the options literal:

navigationControl: false,

 

Plotting Markers in Google Maps API V3

The convenient object literal-based approach isn't limited to rendering the map; you'll see it employed throughout the API for other tasks such as plotting markers. The old approach was fairly tedious, requiring you to first define a new point using the GPoint class, pass that point to an object of type GMarker, and finally add the marker to the map using the map object's addOverlay() method. In comparison, the new approach is quite convenient, accomplished using a single method call:

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"43201"
});

Add this snippet to the previous example directly following the call to the google.maps.Map() constructor, and reload the script within the browser. You'll see the map presented in Figure 2.

 


Figure 2. Adding a Marker in Google Maps API V3 Map

 

Adding Event Handling in Google Maps API V3

Chances are you'll want to associate some event with a marker, notably either displaying an informational window or updating the page in some other way with additional details about the location. To execute an event when the user clicks on a marker, you need only associate the marker object with an event using the event object's addListener() method, as demonstrated here:

google.maps.event.addListener(marker, 'click', function() {
alert("Welcome to the 43201 zip code")
});

Add this snippet to the conclusion of the script, reload the script in your browser, and click on the marker icon. You'll be presented with the map and accompanying alert box as depicted in Figure 3.

 


Figure 3. Adding Event Handling in Google Maps API V3 Map

 

Adding Informational Windows

Associating informational windows with a marker via an event handler is similarly easy. Using standard HTML markup you can format the window content however you please, and then pass that markup to an InfoWindow object. You'll then use the InfoWindow object's open() method to open the window when the marker's event handler fires, as demonstrated here:

var content = "<b>43201 Zip Code</b><br />The 43201 zip code is 
home to Columbus' Victorian Village and Harrison
West neighborhoods.";

var infowindow = new google.maps.InfoWindow({
content: content
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Replacing the previous event handler with this snippet produces the map presented in Figure 4.

 


Figure 4. Adding Informational Windows in Google Maps API V3 Map

 

Learning Resources for Google Maps API V3

This tutorial should provide you with a solid understanding of V3's basic features. However, one could spend literally weeks investigating the countless interesting features in this fantastic API. Consider checking out the following links to learn more about what's possible!

  • The Official V3 Developer's Guide: Check out the official documentation for a detailed introduction to the API, in addition to interesting demos and pointers to other articles.
  • Developing Native iPhone Applications with V3: This excellent tutorial shows you just how easy it is to develop a simple location-based application using the iPhone SDK and Google Maps API V3.
  • The Google Maps API Family: The JavaScript API is only one of several APIs at your disposal. Check out this list to learn more about the Flash API, Earth API and Static Maps API, among others.

Conclusion

The Google Maps API version 3 release represents another evolutionary step forward for the world's most popular and compelling Web mapping solution. Are you currently using the new version in a project? Tell us about your experiences in the comments!

About the Author

Jason Gilmore is founder of the publishing and consulting firm WJGilmore.com. He is the authorof several popular books "Easy PHP Websites with the Zend Framework","Easy PayPal with PHP", and"Beginning PHP and MySQL, Fourth Edition". Follow him on Twitter at @wjgilmore.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date