Draw route between two Markers

Draw route between two Markers

نشر فى : 30 / 6 / 2020

عدد المشاهدات : 135

 how to draw route line between Markers using Google Maps V3.
The route line is drawn on the shortest route between the locations. This article also explains how to change the stroke color of the route line drawn between the Markers on Google Maps V3.
In this short article I will explain how to draw route line between Markers using Google Maps V3.
The route line is drawn on the shortest route between the locations. This article also explains how to change the stroke color of the route line drawn between the Markers on Google Maps V3.
 
 
 
Draw route line between two Markers on Google Maps
Below is a Google Map Implementation where I have marker array which consists of location information of three cities in India.
After that I have the usual Google Map initialization, where I have initialized the Google Map and also attached markers onto the Google Maps.
Finally I have the Google Maps Routing implementation, where I have first defined the Google Map Array to store the paths, the Google Maps Direction Service and a Poly line where I have defined the stroke color. Then a loop is executed over the Latitude and Longitude array and the route line is calculated and drawn between each combination of two geographic locations.


<script type=““text/javascript”“ src=““http://maps.googleapis.com/maps/api/js?sensor=false”“></script>


<script type=““text/javascript”“>

var markers = [

{

”“title”“’‘Alibaug’‘,

”“lat”“’‘18.641400’‘,

”“lng”“’‘72.872200’‘,

”“description”“’‘Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.’‘

}

,

{

”“title”“’‘Mumbai’‘,

”“lat”“’‘18.964700’‘,

”“lng”“’‘72.825800’‘,

”“description”“’‘Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.’‘

}

,

{

”“title”“’‘Pune’‘,

”“lat”“’‘18.523600’‘,

”“lng”“’‘73.847800’‘,

”“description”“’‘Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.’‘

}

];

window.onload = function () {

var mapOptions = {

center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

zoom: 10,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById(““dvMap”“), mapOptions);

var infoWindow = new google.maps.InfoWindow();

var lat_lng = new Array();

var latlngbounds = new google.maps.LatLngBounds();

for (i = 0; i < markers.length; i++) {

var data = markers[i]

var myLatlng = new google.maps.LatLng(data.lat, data.lng);

lat_lng.push(myLatlng);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: data.title

});

latlngbounds.extend(marker.position);

(function (marker, data) {

google.maps.event.addListener(marker, ”“click”“function (e) {

infoWindow.setContent(data.description);

infoWindow.open(map, marker);

});

})(marker, data);

}

map.setCenter(latlngbounds.getCenter());

map.fitBounds(latlngbounds);

 

//***********ROUTING****************//

 

//Initialize the Path Array

var path = new google.maps.MVCArray();

 

//Initialize the Direction Service

var service = new google.maps.DirectionsService();

 

//Set the Path Stroke Color

var poly = new google.maps.Polyline({ map: map, strokeColor: ’‘#4986E7’‘ });

 

//Loop and Draw Path Route between the Points on MAP

for (var i = 0; i < lat_lng.length; i++) {

if ((i + 1) < lat_lng.length) {

var src = lat_lng[i];

var des = lat_lng[i + 1];

path.push(src);

poly.setPath(path);

service.route({

origin: src,

destination: des,

travelMode: google.maps.DirectionsTravelMode.DRIVING

}, function (result, status) {

if (status == google.maps.DirectionsStatus.OK) {

for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {

path.push(result.routes[0].overview_path[i]);

}

}

});

}

}

}

</script>

<div id=““dvMap”“ style=““width: 500px; height: 500px”“>

</div>

 





موقع أعرف