Scribd
Upload
65 views3 pages

Distance Matrix Service

This document describes a Distance Matrix service that calculates driving distances and durations between origins and destinations using the Google Maps Distance Matrix API. It defines origins and destinations as latitude/longitude coordinates or place names, then calls the Distance Matrix service to return the distance and duration for each origin-destination pair in meters and text format. The results are output on a map with markers and in a div, and the map is centered and zoomed to fit all markers.

Uploaded by

IklanUkm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views3 pages

Distance Matrix Service

This document describes a Distance Matrix service that calculates driving distances and durations between origins and destinations using the Google Maps Distance Matrix API. It defines origins and destinations as latitude/longitude coordinates or place names, then calls the Distance Matrix service to return the distance and duration for each origin-destination pair in meters and text format. The results are output on a map with markers and in a div, and the map is centered and zoomed to fit all markers.

Uploaded by

IklanUkm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Distance Matrix service

<!DOCTYPE html>
<html>
<head>
<title>Distance Matrix service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

var
var
var
var

#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:right;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 11px;
}
</style>
<script>
map;
geocoder;
bounds = new google.maps.LatLngBounds();
markersArray = [];

var
var
var
var

origin1 = new google.maps.LatLng(55.930, -3.118);


origin2 = 'Greenwich, England';
destinationA = 'Stockholm, Sweden';
destinationB = new google.maps.LatLng(50.087, 14.421);

var destinationIcon =
'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000
000';
var originIcon =
'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000
000';
function initialize() {
var opts = {
center: new google.maps.LatLng(55.53, 9.4),
zoom: 10
};
map = new google.maps.Map(document.getElementById('map-canvas'), opts);
geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
{
origins: [origin1, origin2],
destinations: [destinationA, destinationB],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
+ ': ' + results[j].distance.text + ' in '
+ results[j].duration.text + '<br>';
}
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert('Geocode was not successful for the following reason: '
+ status);
}
});
}
function deleteOverlays() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);

}
markersArray = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="content-pane">
<div id="inputs">
<pre>
var origin1 = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = new google.maps.LatLng(50.087, 14.421);
</pre>
<p><button type="button" onclick="calculateDistances();">Calculate
distances</button></p>
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas"></div>
</body>
</html>

You might also like