Stiern.com

November 9th 2009 by Peter · 15 comments

How to Use Directions with Google Maps API V3

Google Maps are more fun when you can get directions. And now you can! The recent release of the Google Maps API adds two new classes in order to enable directions. In this article I will show you how to add an input field in an infobox and use that to render a route.

But before that, here’s how it looks when it is done:

Because of the size at the page here the infobox gets a scroll bar, but just ensure to make your map large enough, then it will not happen.

Overview

• What’s New?
• Corrections
• The Directions
• Calculating the Route
• Conclusion

What's New?

Since my last article a couple of new features have been added to the API, as you can also read about in the changelog. The most important, in my opinion, is of course the support of directions, and that's the only function I will discuss here. Worthy to note, though — you do not have to use an API code anymore.

The support for directions is possible via two new classes, DirectionsRenderer and DirectionsService. DirectionsRenderer… Well… Renders the directions, and DirectionsService computes the actual directions. But the big question is — how do we use them?

Corrections

Before we rush into the new code, we should make some corrections in our excisting code. If you haven't read my article Adding Custom Google Maps to Your Website, do yourself a favor and do so before continuing on this one.

Next, look in your code where you define your markers and ensure that your values follow these rules:

1
2
3
4
5
6
7
8

var companyImage = new google.maps.MarkerImage(’images/logo.png’,
new google.maps.Size(100,50), // (width, height)

new google.maps.Point(0,0),

new google.maps.Point(50,50) // (width/2, height)
);
var companyShadow = new google.maps.MarkerImage(’images/logo_shadow.png’,

new google.maps.Size(130,50), // (width, height)

new google.maps.Point(0,0),

new google.maps.Point(65,50) // (width/2, height)
);

Dividing the image's width by 2 ensures that it's the bottom center point of the image that'll be used for the marker. Thanks to JM for this solution.

The Directions

So, first we have to call the DirectionsService constructor. Before your initialize(), create a new variable:

1

var directionsService = new google.maps.DirectionsService();

Next, we have to create the renderer. Right before the variable you just created, define a new variable directionDisplay. This variable is going to contain the renderer.

1

var directionDisplay;

In your initialize() function, right after the latLng variable, set the directionDisplay variable to this:

1

directionsDisplay = new google.maps.DirectionsRenderer();

Further down in your code, find the map variable (right after the settings variable. Write this:

1

directionsDisplay.setMap(map);

This renders the marker on the specified map, which in this case is map. Next, let's define what we want to write in our infobox by expanding the contentString variable:

1
2
3
4
5
6
7
8
9
10
11
12

	var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
'<p>Find your way here from:</p>'+
'<form action="index.html" onsubmit="calcRoute();return false;">'+
'<input type="text" id="start" value="prinsensgade 5, 9000">'+
'<input type="submit" value="Find directions"></form>'+
'</div>'+
'</div>';

Let's look a bit into the form used to ask the user for an address:

1
2
3

	'<form action="index.html" onsubmit="calcRoute();return false;">'+
'<input type="text" id="start" value="prinsensgade 5, 9000">'+
'<input type="submit" value="Find directions"></form>'+

First, we write "index.html" in our action attribute. This path should be to the file where your map is placed. In onsubmit we call the function calcRoute() (which we will define later), and next we write return false to prevent the site from reloading when the user submits the form. The next two lines should be pretty self-explainable. If you want the user to be able to enter both addresses, you can just add an extra input field called end. The value of the start field can be empty or you can write a pre-defined address.

Calculating the Route

At the very end of the initialize() function, write the following:

In the form we called the function calcRoute(). That's the one we are defining here. The first thing to do is define the two variables start and end. If you inserted an extra input field before write document.getElementById("end").value; in end instead of the coordinates.
Next, define the variable request. The attributes of this one are fairly logical, but let's explain them just in case. We define the origin of the route to our variable start, and the destination to end. Also, we define a travelmode —. This can be either DRIVING or WALKING.
Lastly, insert this code:
1
2
3
4
5
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
This issues the actual search request, and completes the initialize() function.
Conclusion
With very little effort you can show your visitor how to get to your address directly from your website, instead of sending them to Google Maps or some other place. I hope you enjoyed the tutorial — please let me know if you have questions or suggestions. You are of course free to download the source files.
While you are here, why don't you follow me on Twitter or subscribe to the RSS feed?


Share, share, share!
Did you like this article? Please share it with your friends:











Related posts:
Adding Custom Google Maps to Your Website
Enhancing Your Site with WebKit
No More Invalid RSS