Google Maps with Multiple Markers and Info Windows using JavaScript API V3


Google Map is an easy and best way to display a location on the web page. A marker is used to identify a location on Google Map and an Info Window displays some content over the map. Together with marker and info window, you can mark a location more efficient way. Also, it helps the user to find and know about a location more accurately.

In the earlier tutorial, we had shown you how to add a marker and info window on Google Map. That script allows adding only one marker and one info window on Google Map. This article will show how you can add multiple markers with info windows on Google Maps using JavaScript API V3.

Multiple marker features are very useful to show the multiple locations on a single map. Using the Google Maps JavaScript API you can easily add a location map to the web page with multiple markers and info windows. In this example script, we’re going to display multiple markers on the map and make each marker clickable for displaying the info window.

All requests to Google Maps JavaScript API must include as the value of the key parameter. So, before you begin, create a free API key on Google Developer Console. If you want to get a step-by-step guide on how to get API key from Google API Console, visit the below link.

Include the Google Map JavaScript API and provide your API Key in key parameter.

<script src=""></script>

JavaScript Code

Place the following JavaScript code in the web page, specify multiple locations in markers variable and info window content in infoWindowContent variable.

function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    // Multiple markers location, latitude, and longitude
    var markers = [
        ['Brooklyn Museum, NY', 40.671531, -73.963588],
        ['Brooklyn Public Library, NY', 40.672587, -73.968146],
        ['Prospect Park Zoo, NY', 40.665588, -73.965336]
    // Info window content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Brooklyn Museum</h3>' +
        '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Brooklyn Public Library</h3>' +
        '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
        ['<div class="info_content">' +
        '<h3>Prospect Park Zoo</h3>' +
        '<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +
    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    // Place each marker on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
      , marker);
        })(marker, i));

        // Center the map to fit all markers on the screen

    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);


Define an area in the web page to display the Google map. Also, specify an id of the div element and it should be mentioned in Map Object.

<div id="mapCanvas"></div>

CSS Code

Add the following CSS to set the width and height of your map.

#mapCanvas {
    width: 100%;
    height: 100%;

Related Articles

Comments 0