Welcome folks today in this blog post we will be using the distance matrix api to calculate distance between two markers inside the google maps. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
Here first of all you need to copy paste the api key from the google cloud console account and also you need to enable the google maps and distance matrix api as shown below
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Google Maps Example</title> <script src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##"></script> </head> <body onload="initMap()"> <div id="map" style="height: 1000px; width: 100%;"></div> </body> </html> |
Here in the above code we are including the cdn of the google maps javascript api and also you need to include the api key from google cloud console. And also we are showing the google map and also we have attached the width to be 100% and height is 1000px. And we are calling the initMap() method whenever the body onload event occurs.
Showing Google Map in Browser
|
1 2 3 4 5 6 7 8 9 10 11 |
var map; var marker1; var marker2; var distance; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 8, center: { lat: 37.7749, lng: -122.4194 }, }); } |
As you can see inside the initMap() method we are using the Map() method to pass the reference of the div tag and then we are passing the options as the second argument and inside it we are passing the zoom level of the map and then we are passing the latitude and longitude which will place the marker at the center position.
Placing Markers on Map on Mouse Click
Now we need to add the javascript code to place the red markers to the google map on mouse click.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
map.addListener("click", function (event) { if (!marker1) { marker1 = new google.maps.Marker({ position: event.latLng, map: map, title: "Marker 1", }); } else if (!marker2) { marker2 = new google.maps.Marker({ position: event.latLng, map: map, title: "Marker 2", }); calculateDistance(); } else { marker1.setPosition(event.latLng); marker2.setMap(null); marker2 = null; } }); |
As you can see we are using the Markers() method to place the markers on the google map and here we are passing the position which includes the latitude and longitude and then we are passing the map reference and also we are passing the title of the Marker. And then we are calling the calculateDistance() method to calculate the distance between two markers and show it inside the info window.
Using Distance Matrix API to Calculate Distance
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function calculateDistance() { var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix( { origins: [marker1.getPosition()], destinations: [marker2.getPosition()], travelMode: "DRIVING", unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false, }, function (response, status) { if (status !== "OK") { alert("Error was: " + status); } else { distance = response.rows[0].elements[0].distance.text; var infowindow = new google.maps.InfoWindow({ content: "Distance: " + distance, }); infowindow.open(map, marker1); } } ); } |
As you can see we are using the google distance matrix api service to calculate the distance between two markers and locations. And then we are showing it inside the infoWindow as shown below
FULL SOURCE CODE
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <title>Google Maps Example</title> <script src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##"></script> <script> var map; var marker1; var marker2; var distance; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 37.7749, lng: -122.4194} }); map.addListener('click', function(event) { if (!marker1) { marker1 = new google.maps.Marker({ position: event.latLng, map: map, title: 'Marker 1' }); } else if (!marker2) { marker2 = new google.maps.Marker({ position: event.latLng, map: map, title: 'Marker 2' }); calculateDistance(); } else { marker1.setPosition(event.latLng); marker2.setMap(null); marker2 = null; } }); } function calculateDistance() { var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({ origins: [marker1.getPosition()], destinations: [marker2.getPosition()], travelMode: 'DRIVING', unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, function(response, status) { if (status !== 'OK') { alert('Error was: ' + status); } else { distance = response.rows[0].elements[0].distance.text; var infowindow = new google.maps.InfoWindow({ content: 'Distance: ' + distance }); infowindow.open(map, marker1); } }); } </script> </head> <body onload="initMap()"> <div id="map" style="height: 1000px; width: 100%;"></div> </body> </html> |
