Overlays or Markers are quite important in Google Maps. Many times we come across situations when we need to show multiple overlays (markers) in our Map. In this tutorial I will be explaining how we can plot markers at desired locations using Lat Long coordinates.
In my script I have taken source and destination and have shown route with Overlays (Markers) using Lat Lng.
<html>
<head>
<title>Overlays in Google Maps using HTML & JS</title>
<style>
#map
{
width: 90%;
height: 600px;
border: 1px solid #a0a0a0;
}
</style>
</head>
<body>
<div id=”map”>
</div>
<script src=’https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true’></script>
<script src=’https://hpneo.github.io/gmaps/gmaps.js’></script>
<script>
var mapObj = new GMaps({
zoom:15,
el: ‘#map’,
lat: 19.027069,
lng: 72.838101
});
//Path is a 2D array storing source to destination coordinates
var path =[
[19.027446, 72.836856],
[19.026452, 72.836491],
[19.025295, 72.835826],
[19.024403, 72.835311],
[19.023023, 72.834731],
[19.021664, 72.833787],
[19.020812, 72.833122],
[19.019737, 72.832242],
[19.020122, 72.831620],
[19.020772, 72.830912],
[19.021056, 72.830676]
];
var pl = mapObj.drawPolyline({ //to show route
path: path,
strokeColor: ‘#76ff03’,
strokeOpacity: 1,
strokeWeight: 10
});
mapObj.drawOverlay({ // to show source marker (overlay)
lat: 19.027446,
lng: 72.836856,
content: ‘<div class=”overlay”><img src=”http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png” style=”height:30px;width:30px;” /></div>’
});
mapObj.drawOverlay({ // to show destination marker (overlay)
lat: 19.021056,
lng: 72.830676,
content: ‘<div class=”overlay”><img src=”http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png” style=”height:30px;width:30px;” /></div>’
});
</script>
</body>
</html>
We have created Map object and added it’s properties. We are using two functions drawPolyline to show the route and drawOverlay to plot marker. If you wish you can change the Source and Destination marker image by changing the image URL in drawOverlay function.
You can run this script by copying the code and saving it with a meaningful name with .html extension. After running it on your browser it will look like this.
Since my source and destination were near so I didn’t use Database to store coordinates. I have used simple static array, if you have multiple coordinates then you need to fetch them from database and store them in array.
I hope the code is self explanatory 🙂 If you still find it difficult to understand please drop a comment I will be more than happy to answer it.
