Implement click on JavaScript Google Map to add draggable markers with polyline

Image by Tumisu via Pixabay

This tutorial will show how to add draggable markers on Google Map at position clicked, and draw Polyline that join the markers. So, let’s get started.

1. Load Google Map

Create a HTML page which load the google map following Google Map API official docs: Hello World.

Your code should look something like below now. Do remember to change YOUR_API_KEY to your actual google map API key.

Credit: Google Map API official docs: Hello World

After everything is done, hit save and open the HTML page in the browser. Google Map should appear on it.

2. Define add marker function

Now, we have to define addMarker function below initMap to add marker at any given position on the map (14 – 23). The property draggable is set to true for draggable marker.

For more info on adding marker, you can refer to Google Map API Official docs: Simple Markers.

Note that we need to define a global array, markersArray to store all the makers added, so we can obtain their positions later (4). This is why we we push all newly added markers object into markersArrayat the end of addMarker function (22).

3. Add onclick listener

Then, we need to add an onclick listener to the google map so addMarker function will be executed when the map is clicked.

In initMap function, add onclick listener code (7–10). In the callback function, e.latLng is the position on Google Map clicked by user. Hence, it is passed as an argument into addMarker so that a new marker is added at the position clicked (9).

If you are unsure what onclick listener means, you can read more about JavaScript Event Listener. Also, you can get more info about JavaScript events provided by Google Map API at their Official docs: Events.

After everything is done, refresh the webpage in the browser. You should be able to add markers to any position of the Google Map by clicking on it.

4. Define function to draw polyline that join the markers

Define a global variable polyline (4). Then, add a function to draw polyline which join the markers below addMarker function (20 – 39).

In drawPolyline function, we loop through the markersArray to get positions of the markers added and then store them in markersPositionArray(21– 25). Then, we draw a new polyline on the map with markers’ positions in markersPositionArray(33 – 38).

Note that we need to check if there are polyline previously drawn on the map before adding new one. If there are, remove the existing polyline from map by using polyline.setMap(null)(29 – 31). This allow us to avoid adding multiple overlapping polyline to the map.

Also, we need to add drawPolyline() in the onclick listener callback function (12). Thus, a new polyline is drawn everytime the map is clicked and new markers are added.

For more info on Polyline, you can refer to Google Map API Official docs: Simple Polylines .

Now, try refresh the webpage in your browser. You will notice polyline is drawn automatically when we click on map to add new markers.

5. Add on position changed listener to marker

How about dragging the marker around? Unfortunately, the polyline did not follow the markers’ position when they change.

Hence, we need to apply on position change listener to every marker added. In addMarker function, add on position change listener code (8 — 11). In listener callback function, drawPolyline() have to be added (10). This make sure the polyline in the map will get updated when the position of the markers change.

Now, refresh the webpage in the browser and try dragging the markers around. The polyline will be updated following the markers whenever their positions change.

Here is the comlplete final version of the code:

Thank you for reading. If you enjoyed this tutorial, feel free to hit that clap button 👏 to help others find it.