Updated! Make a Google Map That Directs People To Headquarters

by

For this tutorial we are going to make a map that allows users to type in a location into an input field and the map will show Google’s recommended driving route to our headquarters.

This would be particularly useful for helping customers find a store, event, or other brick and mortar location.

Embedding a Google Map onto your website can accomplish the same thing, but with this example, we can have the following customizations:

  • Custom Headquarters Marker
  • Custom Info Window
  • Custom Map Style

We’re going to start off with a basic HTML5 template.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
  	<title>Updated! How To Make A Google Map That Gives Directions</title>
</head>
<body>

</body>
</html>

The next thing we’re going to add is our Google Maps API key. This can be retrieved from the Google Maps API Signup page. Keep in mind we’re using v.3, which has been enhanced for mobile and tablet devices. I’ve had experience working with v.2 and trying to make it work properly on mobile devices is an uphill battle, so don’t use it.

Add this somewhere before the </head> tag.


&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3D%5Binsert-your-API-key-here%5D%26amp%3Bsensor%3Dfalse%22%3E%3C%2Fscript%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

In the <body> section add our map canvas.


&amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;map_canvas&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

Now we need to add some javascript to get this map in there. This can be added somewhere above the closing </body> tag.

&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cscript%3E%0A%20%20%09%09var%20directionDisplay%3B%0A%09%09var%20directionsService%20%3D%20new%20google.maps.DirectionsService()%3B%0A%09%09var%20map%3B%0A%0A%09%09function%20initialize()%20%7B%0A%09%09%09directionsDisplay%20%3D%20new%20google.maps.DirectionsRenderer()%3B%0A%09%09%09var%20headquarters%20%3D%20new%20google.maps.LatLng(51.0426981%2C-114.0737685)%3B%09%0A%09%09%09var%20myOptions%20%3D%20%7B%0A%09%09%09%09zoom%3A13%2C%0A%09%09%09%09mapTypeId%3A%20google.maps.MapTypeId.ROADMAP%2C%0A%09%09%09%09center%3A%20headquarters%0A%09%09%09%7D%0A%09%09%09map%20%3D%20new%20google.maps.Map(document.getElementById(%22map_canvas%22)%2C%20myOptions)%3B%0A%09%09%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Add%20A%20Marker%20For%20Our%20Location%0A%09%09%09var%20headquartersMarker%20%3D%20new%20google.maps.Marker(%7B%0A%09%09%09%09position%3A%20headquarters%2C%0A%09%09%09%09map%3A%20map%2C%0A%09%09%09%09animation%3A%20google.maps.Animation.DROP%2C%20%2F%2F%20not%20necessary%2C%20but%20looks%20nice%20%0A%09%09%09%09zIndex%3A99999%0A%09%09%09%7D)%3B%0A%0A%09%09%09directionsDisplay.setMap(map)%3B%0A%09%09%7D%0A%3C%2Fscript%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

To make this load, we need to add the following to our <body> tag so it looks like this:


&amp;amp;amp;amp;lt;body onload=&amp;amp;amp;amp;quot;initialize()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;

With what we’ve created so far, you should see a Google Map. Now we need to add the form and the javascript that allows a user to type in a their address, postal code, or city.

Below the initialize() function inside the <head> tags, add the following:

// Calculate the route
		function calcRoute() {
			var start = document.getElementById(&amp;amp;amp;amp;quot;start&amp;amp;amp;amp;quot;).value;
			var end = new google.maps.LatLng(51.0426981,-114.0737685);
			var request = {
				origin:start,
				destination:end,
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};

			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				}
			});

			var endMarker = new google.maps.Marker({
				position: end,
				map: map,
			});
		}

For the form and to add some style to our demo, we will add this below the <body> tag, but above our map-canvas.


&amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;content&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;gt;Get Me Driving Directions&amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;text&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;start&amp;amp;amp;amp;quot; id=&amp;amp;amp;amp;quot;start&amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;quot;Enter Address, Postal Code, City, etc.&amp;amp;amp;amp;quot; onclick=&amp;amp;amp;amp;quot;document.getElementById(this.id).value= &amp;#039;&amp;#039;;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;button onclick=&amp;amp;amp;amp;quot;calcRoute()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Submit&amp;amp;amp;amp;lt;/button&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;button onclick=&amp;amp;amp;amp;quot;initialize()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Reset&amp;amp;amp;amp;lt;/button&amp;amp;amp;amp;gt;
		&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;!-- #content --&amp;amp;amp;amp;gt;

We now have an input box and 2 buttons. Submit will calculate the route to our headquarters and reset will set the map to it original status. In the input box, I have left a small script to reset the value upon clicking it. It makes things much easier for the user and looks professional.

For presentation’s sake, here is some simple CSS  to add above the javascript.

&amp;amp;amp;amp;lt;link href=&amp;#039;http://fonts.googleapis.com/css?family=Redressed&amp;#039; rel=&amp;#039;stylesheet&amp;#039; type=&amp;#039;text/css&amp;#039;&amp;amp;amp;amp;gt;

  	&amp;amp;amp;amp;lt;!-- CSS --&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cstyle%3E%0A%09%09*%20%7B%20%0A%09%09%09margin%3A%200%3B%20%0A%09%09%09padding%3A%200%3B%20%0A%09%09%7D%0A%09%09body%20%7B%0A%09%09%09padding%3A20px%3B%0A%09%09%09font-family%3A%20helvetica%2C%20arial%2C%20sans-serif%3B%0A%09%09%7D%0A%09%09h1%20%7B%0A%09%09%09color%3A%23fff%3B%0A%09%09%09font-family%3A%20&amp;#039;Redressed&amp;#039;%2C%20cursive%3B%0A%09%09%09line-height%3A%20130%25%3B%0A%09%09%7D%0A%09%09%23content%20%7B%0A%09%09%09padding%3A20px%200%2020px%2020px%3B%0A%09%09%09background%3A%20%23000%3B%0A%09%09%7D%0A%09%09%23map_canvas%20%7B%0A%09%09%09width%3A%20100%25%3B%0A%09%09%09height%3A%20500px%3B%0A%09%09%7D%0A%09%09%23start%20%7B%0A%09%09%09padding%3A%206px%3B%0A%09%09%09width%3A%20260px%3B%0A%09%09%09color%3A%20%23000%3B%0A%09%09%7D%0A%09%09button%20%7B%0A%09%09%09width%3A%2080px%3B%0A%09%09%09height%3A%2029px%3B%0A%09%09%09border%3A%20none%3B%0A%09%09%09color%3A%20%23fff%3B%0A%09%09%09cursor%3A%20pointer%3B%0A%09%09%09background%3A%20%23ccc%3B%0A%09%09%7D%0A%09%09button%3Ahover%20%7B%0A%09%09%09color%3A%20%23000%3B%0A%09%09%09background%3A%20%23eee%3B%0A%09%09%7D%0A%20%20%09%3C%2Fstyle%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

Here is what the complete code should look like:

&amp;amp;amp;amp;lt;!doctype html&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;
	&amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;amp;quot;utf-8&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
  	&amp;amp;amp;amp;lt;title&amp;amp;amp;amp;gt;How To Make A Google Map That Gives Directions&amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;gt;
  	&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3D%5Binsert-your-API-key-here%5D%26amp%3Bsensor%3Dfalse%22%3E%3C%2Fscript%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

  	&amp;amp;amp;amp;lt;link href=&amp;#039;http://fonts.googleapis.com/css?family=Redressed&amp;#039; rel=&amp;#039;stylesheet&amp;#039; type=&amp;#039;text/css&amp;#039;&amp;amp;amp;amp;gt;

  	&amp;amp;amp;amp;lt;!-- CSS --&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cstyle%3E%0A%09%09*%20%7B%20%0A%09%09%09margin%3A%200%3B%20%0A%09%09%09padding%3A%200%3B%20%0A%09%09%7D%0A%09%09body%20%7B%0A%09%09%09padding%3A20px%3B%0A%09%09%09font-family%3A%20helvetica%2C%20arial%2C%20sans-serif%3B%0A%09%09%7D%0A%09%09h1%20%7B%0A%09%09%09color%3A%23fff%3B%0A%09%09%09font-family%3A%20&amp;#039;Redressed&amp;#039;%2C%20cursive%3B%0A%09%09%09line-height%3A%20130%25%3B%0A%09%09%7D%0A%09%09%23content%20%7B%0A%09%09%09padding%3A20px%200%2020px%2020px%3B%0A%09%09%09background%3A%20%23000%3B%0A%09%09%7D%0A%09%09%23map_canvas%20%7B%0A%09%09%09width%3A%20100%25%3B%0A%09%09%09height%3A%20500px%3B%0A%09%09%7D%0A%09%09%23start%20%7B%0A%09%09%09padding%3A%206px%3B%0A%09%09%09width%3A%20260px%3B%0A%09%09%09color%3A%20%23000%3B%0A%09%09%7D%0A%09%09button%20%7B%0A%09%09%09width%3A%2080px%3B%0A%09%09%09height%3A%2029px%3B%0A%09%09%09border%3A%20none%3B%0A%09%09%09color%3A%20%23fff%3B%0A%09%09%09cursor%3A%20pointer%3B%0A%09%09%09background%3A%20%23ccc%3B%0A%09%09%7D%0A%09%09button%3Ahover%20%7B%0A%09%09%09color%3A%20%23000%3B%0A%09%09%09background%3A%20%23eee%3B%0A%09%09%7D%0A%20%20%09%3C%2Fstyle%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

  	&amp;amp;amp;amp;lt;!-- Javascript --&amp;amp;amp;amp;gt;
  	&amp;amp;amp;amp;lt;img src=&amp;amp;amp;amp;quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&amp;amp;amp;amp;quot; data-wp-preserve=&amp;amp;amp;amp;quot;%3Cscript%3E%0A%20%20%09%09var%20directionDisplay%3B%0A%09%09var%20directionsService%20%3D%20new%20google.maps.DirectionsService()%3B%0A%09%09var%20map%3B%0A%0A%09%09function%20initialize()%20%7B%0A%09%09%09directionsDisplay%20%3D%20new%20google.maps.DirectionsRenderer()%3B%0A%09%09%09var%20headquarters%20%3D%20new%20google.maps.LatLng(51.0426981%2C-114.0737685)%3B%09%0A%09%09%09var%20myOptions%20%3D%20%7B%0A%09%09%09%09zoom%3A13%2C%0A%09%09%09%09mapTypeId%3A%20google.maps.MapTypeId.ROADMAP%2C%0A%09%09%09%09center%3A%20headquarters%0A%09%09%09%7D%0A%09%09%09map%20%3D%20new%20google.maps.Map(document.getElementById(%22map_canvas%22)%2C%20myOptions)%3B%0A%09%09%20%0A%09%09%09%2F%2F%20Add%20A%20Marker%20For%20Our%20Headquarters%20%0A%09%09%09var%20headquartersMarker%20%3D%20new%20google.maps.Marker(%7B%0A%09%09%09%09position%3A%20headquarters%2C%0A%09%09%09%09map%3A%20map%2C%0A%09%09%09%09animation%3A%20google.maps.Animation.DROP%2C%0A%09%09%09%09zIndex%3A99999%0A%09%09%09%7D)%3B%0A%09%09%20%0A%09%09%09directionsDisplay.setMap(map)%3B%0A%09%09%7D%0A%0A%09%09%2F%2F%20Calculate%20the%20route%20%20%0A%09%09function%20calcRoute()%20%7B%0A%09%09%09var%20start%20%3D%20document.getElementById(%22start%22).value%3B%0A%09%09%09var%20end%20%3D%20new%20google.maps.LatLng(51.0426981%2C-114.0737685)%3B%0A%09%09%09var%20request%20%3D%20%7B%0A%09%09%09%09origin%3Astart%2C%20%0A%09%09%09%09destination%3Aend%2C%0A%09%09%09%09travelMode%3A%20google.maps.DirectionsTravelMode.DRIVING%0A%09%09%09%7D%3B%0A%09%09%20%0A%09%09%09directionsService.route(request%2C%20function(response%2C%20status)%20%7B%0A%09%09%09%09if%20(status%20%3D%3D%20google.maps.DirectionsStatus.OK)%20%7B%0A%09%09%09%09%09directionsDisplay.setDirections(response)%3B%0A%09%09%09%09%7D%0A%09%09%09%7D)%3B%0A%09%09%20%0A%09%09%09var%20endMarker%20%3D%20new%20google.maps.Marker(%7B%0A%09%09%09%09position%3A%20end%2C%0A%09%09%09%09map%3A%20map%2C%0A%09%09%09%7D)%3B%0A%09%09%7D%20%0A%09%3C%2Fscript%3E&amp;amp;amp;amp;quot; data-mce-resize=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; data-mce-placeholder=&amp;amp;amp;amp;quot;1&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;mce-object&amp;amp;amp;amp;quot; width=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;20&amp;amp;amp;amp;quot; alt=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; title=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;body onload=&amp;amp;amp;amp;quot;initialize()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;content&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;gt;Get Me Driving Directions&amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;text&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;start&amp;amp;amp;amp;quot; id=&amp;amp;amp;amp;quot;start&amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;quot;Enter Address, Postal Code, City, etc.&amp;amp;amp;amp;quot; onclick=&amp;amp;amp;amp;quot;document.getElementById(this.id).value= &amp;#039;&amp;#039;;&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;button onclick=&amp;amp;amp;amp;quot;calcRoute()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Submit&amp;amp;amp;amp;lt;/button&amp;amp;amp;amp;gt;
			&amp;amp;amp;amp;lt;button onclick=&amp;amp;amp;amp;quot;initialize()&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Reset&amp;amp;amp;amp;lt;/button&amp;amp;amp;amp;gt;
		&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

	&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;!-- #content --&amp;amp;amp;amp;gt;	

&amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;quot;map_canvas&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;gt;

The headquarters used in this demo is Universal Supplements, but you will want to direct people to your own location. To use a location of your choosing, I use Get Lat Lon to retrieve latitude and longitude coordinates.

Summary

We’ve made a map that will visually deliver driving instructions to a specific location by using a few features available in Google Maps v.3. We’ve used the following functions of the API to make this possible:

There are many things that can be built by using this example. The Directions Service can supply directions for cyclists, GeoLocation could be used to make it location aware and create instructions based on where you’re standing, and you can even have it display directions in text format for someone to read to the driver.

Hope you enjoyed this article and happy coding!