How to add multiple custom markers on google map

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

1. Get your API key

For showing Google map on 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 website.

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 the info window, use 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 open this in the browser, it shows the map like this -

Output

jquery sticky header on scroll
Bootstrap modal popup on page load
PHP Web Scraping
Ajax live data search using jQuery PHP MySQL
Fetch data from database in PHP and display
How to insert image in PHP
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