Use the new Google Maps API! Part 2

A few days ago, our experiments with the Google Maps API resulted in static images of various locations. Today, these same experiments will continue in a new medium: JavaScript. As we expand our knowledge of the API, we’ll cover the creation of a dynamic map, fully equipped with both movement and zooming.

To begin our mad science, we’ll first need to include the API itself (note the HTML 5 that omits the type attribute of the script tag):

<!-- sensor=false tells google images we aren't trying to sense the user's location -->
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

Moving forward, we’ll create a function which, when given an address, will display a dynamic map centered on it. Dutifully called setMapAddress, the function will have the following container:

function setMapAddress( address )
{
	// code goes here
}

To specify a location, Google Maps requires a latitude and longitude. As a result, our first task will be to convert the given address into the necessary format. Of course, this process has it’s own scientific term: geocoding. Being both scientifically and technologically-savvy, Google does the work for us in their Geocoder object. All we need to do is instantiate one and subsequently call its geocode method:

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { address : address }, function( results, status ) {

} );

The geocode method requires, as arguments, an object as well as a callback function. Looking at the first parameter, { address : address }, may strike initial confusion. The first use of the word address refers to a property of the object. On the contrary, the second use refers to the variable passed into the setMapAddress function, which we are trying to geocode.

Once the geocoding finishes, the callback function is invoked with a results array and status that is used to determine success. If the status notes a successful geocode, we’ll have to get the location (latitude/longitude) from the results array, setup options (similar to the options for the static images in the previous article), and finally construct the map. In its completed form, the callback function is:

if( status == google.maps.GeocoderStatus.OK ) {
	var latlng = results[0].geometry.location;
	var options = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	new google.maps.Map( document.getElementById( 'map' ), options );
}

The options object specifies the zoom, center, and type of the resultant map. In this case, these have been set to 8, the given address converted to a latitude/longitude, and road map respectively.

In addition, note that the constructor requires a DOM element and the aforementioned options. This means we’ll have to create the element, which has an id of map.

<div id="map"></div>

#map also needs a defined width and height:

#map {
	width: 512px;
	height: 512px;
}

Last, but certainly not least, we have to call the setMapAddress function we recently finished:

setMapAddress( "Chicago, IL" );

Voila! That’s all we need for a functioning dynamic map. You can view the demo or download the files.

Leave a Reply

Use the new Google Maps API! Part 2