How to add multiple custom markers on google map

In this article, you will learn to display multiple custom markers on google map. A marker identifies a location on the map. We can set custom icon as a marker instead of default marker. The multiple markers allow us to set multiple destination addresses, drives, walks, weather forecasting, we are using Google maps API to display multiple markers just like we used in displaying single marker on google map.

How to add multiple custom makers on google map

1. Get your api key

For showing google map in a web page, we need to generate Google API. For this, first login to your gmail account, go to 'Google API Console' and follow the instructions and get an API key.

2. Create an HTML page and load the Google Map Javascript API into your web page.

First, create a div element and give some ID to load the google map.

<div id="map_container"> </div>

Next, create Javascript function initialize_map() to initialize the map and give the central latitude and longitude of the map.

function initialize_map() {
        var mapDiv = document.getElementById('map_container');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 28.7041, lng: 77.1025},
            zoom: 10
        });
}

Next, take a Javascript variable markerlocations and assign all the markers latitude, longitude and marker icons.

 var markerlocations = [
 [26.846694, 80.946166, 'Cloudy Sunny', 'icons/cloudysunny.png'],
 [28.613939, 77.209021, 'Rainy', 'icons/rainy.png'],
 [32.7218, 74.8577, 'Snowy', 'icons/snowy-2.png'],
 [23.259933, 77.412615, 'Thunderstorm', 'icons/thunderstorm.png'],
 [23.610181, 85.279935, 'Sunny', 'icons/sunny.png'],
 [22.986757, 87.854976, 'Storm', 'icons/storm.png'],
];

To show all the markers on the map, loop over the above variable and specifies the initial properties of the marker using google.maps.Marker constructor.

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(markerlocations[i][0], markerlocations[i][1]),
      map: map,
      icon:  markerlocations[i][3]
});

To display the marker address in info window uses the InfoWindow constructor.

 var infowindow = new google.maps.InfoWindow({
 content: address
});



Complete Code: Show multiple markers on google map


<!DOCTYPE html>
<html>
  <head>
    Google map api with marker
  </head>
  <body>
    <div id="map_container" style="width: 50%; height: 350px;"> </div>
    <script>
    function initialize_map() {
        var mapDiv = document.getElementById('map_container');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 28.7041, lng: 77.1025},
            zoom: 10
        });
        var markerlocations = [
            [26.846694, 80.946166, 'Cloudy Sunny', 'icons/cloudysunny.png'],
            [28.613939, 77.209021, 'Rainy', 'icons/rainy.png'],
            [32.7218, 74.8577, 'Snowy', 'icons/snowy-2.png'],
            [23.259933, 77.412615, 'Thunderstorm', 'icons/thunderstorm.png'],
            [23.610181, 85.279935, 'Sunny', 'icons/sunny.png'],
            [22.986757, 87.854976, 'Storm', 'icons/storm.png'],
        ];
        for(i  = 0;  i < markerlocations.length; i++) {
            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markerlocations[i][0], markerlocations[i][1]),
                    map: map,
                    icon:  markerlocations[i][3]
            });
            var address = '<div><p><b>markerlocations[i][2]</b></p></div>';
            var infowindow = new google.maps.InfoWindow({
              content: address
            });
            marker.addListener('click', function() {
              infowindow.open(map, marker);
            });
        }
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize_map">
    </script>
  </body>
</html>

In the above example, replace the API_KEY with your api key. When you will open this in the browser, it shows the map like this -


Output





Related Articles

Get Visitor's location and TimeZone
How to use google map street view api on webpage
Get current visitor's location using HTML5 Geolocation API and PHP
How to add google map on your website with marker
Create pie chart using google api
Driving route directions from source to destination using HTML5 and Javascript
Calculate the distance between two locations using PHP
Simple star rating system using PHP, jQuery and Ajax




Read more articles


General Knowledge



Learn Popular Language