Build a Distance Finder with Google Maps API

Google maps is a free web mapping service application provided by Google. It offers lots of cool features (showing various map types, plotting points, showing routes, geocoding addresses). You can also add all these features to your website using the Google Maps APIs provided by Google. In this tutorial I will show you how to add some of these features to your site. I will be using the Google Maps Javascript API v3 (the newest version).

Table of Contents:

1. Creating the web form for getting the two addresses
2. Showing the map
3. What are we going to add?
4. Adding custom markers
5. Making the markers draggable
6. Choosing the travel mode
7. Saving the selected map setting

We Are Going to Build a Distance Finder With Google API

We’ll make a distance finder. We’ll add a Google map to our site, plot two points on it (the user will be able to choose the addresses for these points), compute the distance between them and show the quickest route between them.

Also, you can download the source code using this link.

Prerequisites

The first thing you need to do in order to use the API from Google is requesting an API key. You can do this here. It’s easy and free!

Creating the web form for getting the two addresses

We’ll create a simple html form for the user to write the two addresses. We’ll add two input boxes and a button to the form. When the user presses the “Show” button, the map with the two locations will be shown.

Here’s the code for this:

 <table align="center" valign="center"> <tr> <td colspan="7" align="center"><b>Find the distance between two locations</b></td> </tr> <tr> &nbsp;
</tr> <tr> <td>First address:</td> &nbsp; <input name="<span class=" type="text" />address1" id="address1" size="50"/> &nbsp; <td>Second address:</td> &nbsp; <input name="<span class=" type="text" />address2" id="address2" size="50"/>
</tr> <tr> &nbsp;
</tr> <tr> <td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"/></td> </tr> </table>

The ‘initialize’ JavaScript function will be called when pressing the button. The function will show the map. In the next section I’ll show you how.

We also need to add a div tag to our page, where the map will be shown:

<div id="map_canvas" style="width:70%; height:54%"></div>

We will also need two div tags for showing the distances we will compute:

<div style="width:100%; height:10%" id="distance_direct"></div> <div style="width:100%; height:10%" id="distance_road"></div>

Showing the map

The first thing we need to do is to find the coordinates (latitude and longitude) for the two addresses. Luckily, Google Maps will help us! Here’s what we have to do:

We’ll use the geocoder object for this. First, we’ll have to create a new geocoder object.

geocoder = new google.maps.Geocoder();

After this, we’ll get the two address values from the form. Like this:

address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;

Then, we’ll use the following code to call the geocode method on the geocoder object. We’ll pass it the addresses one by one and save the results in the variables called location1 and location2 (these will hold the coordinates of the two addresses).

if (geocoder)
{ geocoder.geocode( { 'address': address1}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { //location of first address (latitude + longitude) location1 = results[0].geometry.location; } else { alert("Geocode was not successful for the following reason: " + status); } }); geocoder.geocode( { 'address': address2}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { //location of second address (latitude + longitude) location2 = results[0].geometry.location; // calling the showMap() function to create and show the map showMap(); } else { alert("Geocode was not successful for the following reason: " + status); } });
}

You will notice that we’ve called the showMap() function when the coordinates for the second address are retrieved. This function will set the options for the map and show it.

We’ll now compute the coordinates for the center of the map. The center point will be between our two points.

latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

Next, we’ll show the map. We have to create a new map object and pass it some parameters (set using the mapOptions variable): the zoom level, the center and the type of the map.

var mapOptions =
{ zoom: 1, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID
}; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

The next thing we’ll do is to show the quickest route between our locations. We’ll use a DirectionsService object from google maps for this. Here’s how the code looks:

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{ suppressMarkers: true, suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = { origin:location1, destination:location2, travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{ if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text; distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text; document.getElementById("distance_road").innerHTML = distance; }
});

We’ve first created the objects we need. We then set some options for displaying the route, we’ve chosen not to show markers and info boxes (we’ll create our own ones);

suppressMarkers: true,
suppressInfoWindows: true

We’ve created a request object and set the origin and destination for the route and also the travel mode:

var request = { origin:location1, destination:location2, travelMode: google.maps.DirectionsTravelMode.DRIVING
};

We’ve then called the route function and obtained a response from the server. Using this response we’ve plotted the route on the map and written some info (the total distance and aproximative driving time) in one of the divs we’ve created:

directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;

We’ll also show a line between our points and compute the distance between them (the distance on a straight line, in kilometers). To show a line we’ll use a Polyline object from google maps and set some options for it (the map it belongs to, the path, the width, the opacity and the color):

var line = new google.maps.Polyline({ map: map, path: [location1, location2], strokeWeight: 7, strokeOpacity: 0.8, strokeColor: "#FFAA00"
});

We’ll now compute the distance between two points using their coordinates and show the result inside the other div tag we’ve created.

var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(dLat1) * Math.cos(dLat1) * Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; document.getElementById("distance_direct").innerHTML = "The distance between the two points (in a straight line) is: "+d;

The last thing we’ll do is show a marker and an info window for each location. We’ll create two marker objects (the options we’ll set are: the map it belongs to, the coordinates and a title):

var marker1 = new google.maps.Marker({ map: map, position: location1, title: "First location"
}); var marker2 = new google.maps.Marker({ map: map, position: location2, title: "Second location"
});

Next, we’ll create variables to hold the texts to print in the info windows, create two info window objects (we’ll add the texts to them using the content option) and we’ll add two event listeners which will show the appropriate info window when the user clicks on the markers:

// create the text to be shown in the infowindows var text1 = ' <div id="content">'+</div> ' <h1 id="firstHeading">First location'+ ' <div id="bodyContent">'+ ' Coordinates: '+location1+' '+ ' Address: '+address1+' '+ '</div> '+ '</div> '; var text2 = ' <div id="content">'+</div> ' <h1 id="firstHeading">Second location'+ ' <div id="bodyContent">'+ ' Coordinates: '+location2+' '+ ' Address: '+address2+' '+ '</div> '+ '</div> '; // create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({ content: text1
});
var infowindow2 = new google.maps.InfoWindow({ content: text2
}); // add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() { infowindow1.open(map,marker1);
}); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2);
});

And we’re done! We now have a distance calculator! Let me know if you have any questions! For more advanced users, we are going to add some more stuff. Read on!

What are we going to add?

We’re going to add custom markers to our map and a new feature: draggable markers. The user will be able to drag the markers around the map and the route will be computed again. We will also let the user choose what type of route to show on the map (the available options are driving, walking and bicycling). Another thing we’ll add is saving the map type selected by the user. This way, the selection will be saved when the user presses the “show” button next time and the user won’t have to select the desired map type each time he refreshes the map.

Prerequisites

Apart from adding the new features, I’ve made a small change to the programs structure: I’ve made a separate function for showing the route between the two points (called drawRoutes()). I’ve done this because we’ll have to call this function each time one of the markers is dragged by the user.

Adding custom markers

The first thing we’ll add are custom markers. For this, we need a small image, I’ve used a silly one as an example. The code to set the image as the marker looks like this:

var rabbit = new google.maps.MarkerImage('distance-finder-custom-marker-image.png');
// create the markers for the two locations
var marker1 = new google.maps.Marker({ map: map, position: location1, title: "First location", icon: rabbit, draggable: true
});
var marker2 = new google.maps.Marker({ map: map, position: location2, title: "Second location", icon: rabbit, draggable: true
});

We’ve defined a new MarkerImage object and given it the location of the image for the marker. Also, we’ve changed the options a bit when creating the markers: we’ve added the icon parameter.

Making the markers draggable

As you can see from the previous piece of code, we’ve also set the “draggable” parameter to true, making our markers draggable. The user can now drag the markers anywhere on the map. But nothing happens when the markers are dragged! We’ll have to add the code to find the address of the new locations and show the new route. But first, we’ll have to add another action listener to the markers, to define the function to be called when the user stops dragging the marker.

Here’s what we have to add to our code:

// add action events for dragging the markers
google.maps.event.addListener(marker1, 'dragend', function() { location1 = marker1.getPosition(); drawRoutes(location1, location2);
});
google.maps.event.addListener(marker2, 'dragend', function() { location2 = marker2.getPosition(); drawRoutes(location1, location2);
});

We’ve added one listener for each marker. Both of them save the new location of the marker (we can get that using the getPosition() function from the google maps api – the function returns the marker’s coordinates) and call the drawRoutes() function giving it the new locations as parameters.

In the drawRoutes() function we’ll have to find the addresses of the new locations and show the new line between the points and compute a new route.

To find the addresses of the points we’ll use the reverse geocoding feature provided by google maps. Geocoding means finding the coordinates of a given address, and reverse geocoding means finding the address of the points when you know the coordinates.

Here’s  the code for this:

geocoder = new google.maps.Geocoder(); // creating a new geocode object
if (geocoder)
{ geocoder.geocode({'latLng': location1}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { address1 = results[0].formatted_address; document.getElementById("address1").value = address1; } } else { alert("Geocoder failed due to: " + status); } });
} if (geocoder)
{ geocoder.geocode({'latLng': location2}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { address2 = results[0].formatted_address; document.getElementById("address2").value = address2; continueShowRoute(location1, location2); } } else { alert("Geocoder failed due to: " + status); } });
}

The code is very similar to the code we’ve used to geocode the addresses. We’ve created a new geocoder object and called the geocode function as before. This time, the parameter we sent to the function is the location of the points. We’ve saved the result from the google server and the address1 and address2 variables. The address has the following format: “275-291 Bedford Ave, Brooklyn, NY 11211, USA”. We’ve written this address in the text fields from the form, so the user will know the exact address of the plotted points. We’ve used the document.getElementById() to set the values of the text fields. When both addresses are found, we call the continueShowRoute() function which shows the routes.

We’ll first show the line that connects the points. The difference from the first tutorial is that we now have to delete the last drawn line. Like this:

// hide last line
if (line)
{ line.setMap(null);
}

Then we’ll draw the new one, just like before.

We’ll then compute the distance on a straight line between the points and show it on the screen, as I’ve shown in the first tutorial. The code to compute the quickest route and show the results on the screen also remains unchanged. The only thing we need to do is update the text on the infowindows with the new address values.

// update text in infowindows
var text1 = ' <div>'+</div> '
<h1 id="firstHeading">First location'+ '
<div id="bodyContent">'+ 'Coordinates: '+location1+' '+ 'Address: '+address1+' '+ '</div> '+ '</div> ';
var text2 = ' <div>'+</div> '
<h1 id="firstHeading">Second location</h1> '+ '
<div id="bodyContent">'+ 'Coordinates: '+location2+' '+ 'Address: '+address2+' '+ '</div> '+ '</div> ';
infowindow1.setContent(text1);
infowindow2.setContent(text2);

We’ve created new variables for holding the new texts to be shown in the infoboxes and used the setContent() function to change the texts on them.

Choosing the travel mode

We’ll also add the option to change the driving mode for the route shown on the map. The available travel modes are: driving, walking and bicycling (this option is only available for routes in the US).

We’ll first have to add a drop down box for the user to select the desired travel mode. We’ll add a new row to our previously created table:

<tr> <td>Route type: <select id="<span class="></select>
<option value="driving">driving</option>
<option value="walking">walking</option>
<option value="bicycling">bicycling (only in US)</option> </select> </td> </tr>

Now, let’s see what we have to do to show the selected travel mode correctly. We’ll have to change the options for the request we send to the directions service from google.

var travelmode = document.getElementById("travelMode").value;
// get the selected travel mode
if (travelmode == "driving") travel = google.maps.DirectionsTravelMode.DRIVING;
else if (travelmode == "walking") travel = google.maps.DirectionsTravelMode.WALKING;
else if (travelmode == "bicycling") travel = google.maps.DirectionsTravelMode.BICYCLING;
// find and show route between the points
var request = { origin:location1, destination:location2, travelMode: travel
};

We’ve first saved the selected option from the drop down box in the travelmode variable. We’ve checked the value of this variable and set the travel variable that holds the google.map.travelmode. When setting the options for the request, we’ve used this variable to set the travel mode.

Saving the selected map setting

The map types the user can choose from are: roadmap, hybrid, satellite and terrain.

We’re going to use a hidden field in the form for holding the selected map

<input id="<span class=" />maptype" type="hidden" value="roadmap"/>

When creating the new map object, we’ll first check the value of this field and set the map type accordingly.

// get the map type value from the hidden field
var maptype = document.getElementById("maptype").value;
var typeId;
if (maptype == "roadmap") typeId = google.maps.MapTypeId.ROADMAP;
else if (maptype == "hybrid") typeId = google.maps.MapTypeId.HYBRID;
else if (maptype == "satellite") typeId = google.maps.MapTypeId.SATELLITE;
else if (maptype == "terrain") typeId = google.maps.MapTypeId.TERRAIN; // set map options
var mapOptions =
{ zoom: 1, center: latlng, mapTypeId: typeId
};

The last thing we need to do is update the hidden field value when the user changes the map type. For this, we need to add a listener that will be triggered when the user changes the map type. The listener will update the value of the hidden field.

// event listener to update the map type
google.maps.event.addListener(map, 'maptypeid_changed', function() { maptype = map.getMapTypeId(); document.getElementById('maptype').value = maptype;
});

We’ve used the getMapTypeId() function to get the new map type and the document.getElementById() function to set the value for the hidden field.

And that’s it! We’ve finished improving our distance finder!