<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol=[];
var icons=[];
var time=["Flair Towers - South Towers<br/>10:30 AM","Flair1 Towers - South Towers <br/>11:00 AM","IBM Plaza<br/>11:35 AM","Cebu Pecific<br/>12:15 PM"];
var path = [{lat: 37.772,lng: -122.214},
{lat: 21.291,lng: -157.821},
{lat: -18.142,lng: 178.431},
{lat: -27.467,lng: 153.027}
];
var infowindow = new google.maps.InfoWindow();
if(path.length>0){
for(var j=0;j<path.length;j++){
lineSymbol.push(new google.maps.Marker({icon:{anchor:new google.maps.Point(16,16), origin: new google.maps.Point(0, 0),scaledSize: new google.maps.Size(32, 32),size: new google.maps.Size(64, 64),url: "D:\\truck.png"},position: path[j],map:map}));
icons.push({icon: lineSymbol[j],offset:"100%"});
google.maps.event.addListener(lineSymbol[j], 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}
})(lineSymbol[j], time[j], infowindow));
google.maps.event.trigger(lineSymbol[j], 'click');
}
}
var Line = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: "#35495e",
strokeOpacity: 0.8,
strokeWeight: 4,
icons:icons,
});
debugger;
Line.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < Line.getPath().getLength(); i++) {
bounds.extend(Line.getPath().getAt(i));
}
map.fitBounds(bounds);
}
</script>
</body>
</html>
