Google maps is the most popular web mapping service used throughout  the world,  it is highly accurate and detail It offers street maps and a route planner for traveling by foot, car, bike or with public transportation. and most importantly they offer a wonderful API to take advantage of their platform. this post will be describing about how to mark several locations in a google map,

First of all you need to get an API key from google, follow the below tutorial from google if you have not yet obtained an key. it has few examples too so its better if you can do them as well

https://developers.google.com/maps/documentation/javascript/tutorial

You need two  js libraries for this example, one gives you the basics of the google maps and and second gives you the ability to draw things on the map

Now we need a canvas for drawing the map, i’ll be using a div for that check the complete html code for the example below

Here is the javascript, and i have added comments with it so that its easy to understand

here is the complete code

This is the End Result