Implementation Google Maps Polyline and marker together - google-maps-markers

Question

Hello I have a code where I can see on a map latitude and longitude markers, that code I did following this tutorial I would like to know how to make each marker is linked with a Polyline
This is what I have
This is what I want
Next I leave my code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-16.342024,-71.540503),
zoom: 4.0
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('../controlador/test1.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marcadores');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('movil');
var hora = markerElem.getAttribute('hora');
var bateria = markerElem.getAttribute('bateria');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
animation: google.maps.Animation.DROP
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "MOVIL: "+type
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "HORA: "+hora
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "BATERIA: "+bateria+"%"
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
(At top of the code below is the XML file from which the markers are created. Copy the XML data into file and name test1.xml)
Any idea how? Thanks.

Answer 1

You can start off by following the examples in this Polyline doc, you can draw a line on your map connecting different locations.
Here's a sample in JSFiddle that you can check, which shows 3 locations connected by a polyline.
var flightPlanCoordinates = markerPoints; //the coordinates of your markers
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, //set the path of the polyline to the marker positions
geodesic: true, //for the polyline to follow the curvature of the earth
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
icons: [
{icon: lineSymbol, offset: '25%'},
{icon: lineSymbol, offset: '50%'},
{icon: lineSymbol, offset: '75%'},
{icon: lineSymbol, offset: '100%'},
]
});
Please see full code in the sample fiddle. Hope it helps!