How to add multiple custom markers on google map

In this article, you will learn how 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.

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. For more details, click on the following link -

https://developers.google.com/maps/documentation/embed/get-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

Here is the complete code to add multiple custom markers on the 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

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