How to show multiple locations on Google Maps using JavaScript

In this blog post, I will demonstrate to you how to show multiple locations on google maps using javascript or how to add multiple markers on google maps javascript in asp.net website. In the previous article, I have explained How to get the current location in Google Maps using JavaScript.

What is a Google Map Maker?

Overlays are objects on the map that are bound to latitude/longitude coordinates. Google Maps has several types of overlays: such as marker, polyline, polygon, etc. A marker is a single location on the map. By default, a marker uses a standard image. Markers can display custom images/icons.

How to add multiple markers on Google Maps Javascript

To add multiple locations on google maps you need to create a marker using marker constructor. Remember that the position property must be set for the marker to display. You can add the marker to the map by using the setMap() method:-

var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map);

By default a marker received ‘click’ events, so you can add an event listener to bring up an info window displaying custom information. The following example will show you how to use google map marker and show multiple locations on google maps.

<!DOCTYPE html>
<html>
<head>
    <title>How to add multiple markers on google maps javascript</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey"></script>
    <script type="text/javascript">
        var locations = [
            ['Raj Ghat', 28.648608, 77.250925, 1],
            ['Purana Qila', 28.618174, 77.242686, 2],
            ['Red Fort', 28.663973, 77.241656, 3],
            ['India Gate', 28.620585, 77.228609, 4],
            ['Jantar Mantar', 28.636219, 77.213846, 5],
            ['Akshardham', 28.622658, 77.277704, 6]
        ];

        function InitMap() {

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(28.614884, 77.208917),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }
    </script>
</head>
<body onload="InitMap();">
    <h1>Show multiple locations on Google Maps using JavaScript</h1>
    <div id="map" style="height: 500px; width: auto;">
    </div>
</body>
</html>

Demo

Remove marker from Google Map

To remove a marker from the map, call the setMap() method passing null as the argument.

marker.setMap(null);

Note: The above method does not delete the marker. It simply removes the marker from the map. If instead, you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.

If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers.

You can delete the markers by removing them from the map and then setting the array’s length to 0, which removes all references to the markers. For more go through the Developers Google Maps Documentation

Conclusion

I hope you liked this article on how to show multiple locations on google maps javascript. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.