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.