Hi nauna,
You need to specify the points as array. Then use the Array to add the marker and poly lines between the markers.
Refer this article to bind the marker from database.
Refer below code.
HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_Key"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Khira Nagar, SV Rd',
"latitude": '19.0871349',
"longitude": '72.8355382',
"description": 'Khira Nagar, SV Rd'
},
{
"title": 'Anand Centre, SV Rd',
"latitude": '19.0843365',
"longitude": '72.8356723',
"description": 'Anand Centre, SV Rd'
},
{
"title": 'Saint Teresa Convent School',
"latitude": '19.0794291',
"longitude": '72.8353129',
"description": 'Saint Teresa Convent School'
}
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].latitude, markers[0].longitude),
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.latitude, data.longitude);
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.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
var service = new google.maps.DirectionsService();
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];
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7'
});
poly.setPath(path);
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>
Screenshot