var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
var locations;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
$userLat1 = 51.509904342252;
$userLong1 = -0.13413459062576;
$userLat2 = 51.517618;
$userLong2 = -0.096778;
$userLat3 = 51.5017863;
$userLong4 = -0.0536478;
// $userLat = 51.509904342252;
// $userLong = -0.13413459062576;
$lat2 = 51.495042;
$long2 = -0.131382;
$userExtralat2 = 21.118692,
$userExtralong2 = 73.117554
locations = [new google.maps.LatLng($userLat1, $userLong1),
new google.maps.LatLng($userLat2, $userLong2),
new google.maps.LatLng($userLat3, $userLong4),
// new google.maps.LatLng($userLat, $userLong),
new google.maps.LatLng($lat2, $long2),
new google.maps.LatLng($userExtralat2, $userExtralong2)
];
}
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: locations,
destinations: locations,
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();
outputDiv.innerHTML += "origin[0]:" + locations[0].toUrlValue(6) + '<br>';
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 += "origin[" + i + "]:" + origins[i] + ' to destination[' + j + ']:' + locations[j].toUrlValue(6) /* 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);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
#content-pane {
width: 100%;
padding-left: 2%;
}
#outputDiv {
font-size: 11px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="content-pane">
<div id="inputs">
<p>
<button type="button" onclick="calculateDistances();">Calculate distances
</button>
</p>
</div>
<div id="outputDiv"></div>
</div>