August 28, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing the Google Maps JavaScript API V3

  • October 1, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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.

 

 

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.

 

 

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.

 

 


Tags: JavaScript, Google Maps, APIs



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel