Ndtyjky

Question

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex.

Let's use the data array from google's site for an example:

var locations = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];

I simply want to plot all of these points and have an infoWindow pop up when clicked to display the name.

Halvor Holsten Strand 15.2k145874 · Accepted Answer · 2014-07-06 21:57:47Z

This is the simplest I could reduce it to:

<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <title>Google Maps Multiple Markers</title> 

  <script src="http://maps.google.com/maps/api/js?sensor=false" 

          type="text/javascript"></script>

</head> 

<body>

  <div id="map" style="width: 500px; height: 400px;"></div>



  <script type="text/javascript">

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(-33.92, 151.25),

      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>

</body>

</html>

Screenshot:

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Mozilla Dev Center: Working with Closures

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908 — Jul 11 '12 at 22:07
Good answer, but it could be simplified further. Since since all markers will have individual InfoWindows and since JavaScript doesn't care if you add extra properties to an object, all you need to do is add an InfoWindow to the Marker's properties and then call the .open() on the InfoWindow from itself. I would have posted the change here, but it the modifications were large enough that I posted my own answer. — Jun 30 '16 at 3:08

Community♦ 11 · Accepted Answer · 2017-09-25 21:03:11Z

Here is another example of multiple markers loading with a unique title and infoWindow text. Tested with the latest google maps API V3.11.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Multiple Markers Google Maps</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>

        <script type="text/javascript">

        // check DOM Ready

        $(document).ready(function() {

            // execute

            (function() {

                // map options

                var options = {

                    zoom: 5,

                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US

                    mapTypeId: google.maps.MapTypeId.TERRAIN,

                    mapTypeControl: false

                };



                // init map

                var map = new google.maps.Map(document.getElementById('map_canvas'), options);



                // NY and CA sample Lat / Lng

                var southWest = new google.maps.LatLng(40.744656, -74.005966);

                var northEast = new google.maps.LatLng(34.052234, -118.243685);

                var lngSpan = northEast.lng() - southWest.lng();

                var latSpan = northEast.lat() - southWest.lat();



                // set multiple marker

                for (var i = 0; i < 250; i++) {

                    // init markers

                    var marker = new google.maps.Marker({

                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),

                        map: map,

                        title: 'Click Me ' + i

                    });



                    // process multiple info windows

                    (function(marker, i) {

                        // add click event

                        google.maps.event.addListener(marker, 'click', function() {

                            infowindow = new google.maps.InfoWindow({

                                content: 'Hello, World!!'

                            });

                            infowindow.open(map, marker);

                        });

                    })(marker, i);

                }

            })();

        });

        </script>

    </head>

    <body>

        <div id="map_canvas" style="width: 800px; height:500px;"></div>

    </body>

</html>

Screenshot of 250 Markers:

Google Maps API V3.11 with Multiple Markers

It will automatically randomize the Lat/Lng to make it unique. This example will be very helpful if you want to test 500, 1000, xxx markers and performance.

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead. — Mar 9 '13 at 23:43
This will get many pop up infoWindow for each marker and won't hide the other infoWindow if it's currently shown. it's really helpful :) — Mar 27 '14 at 3:30
@Anup, if you just read the question and comment it would be better. the question is asking "example for multiple marker" whether it is random or your own bla bla. — Jun 29 '15 at 13:39

score 33 · Accepted Answer · 2014-02-04 15:52:28Z

I thought I would put this here as it appears to be a popular landing point for those starting to use Google Maps API's. Multiple markers rendered on the client side is probably the downfall of many mapping applications performance wise. It is difficult to benchmark, fix and in some cases even establish there is an issue (due to browser implementation differences, hardware available to the client, mobile devices, the list goes on).

The simplest way to begin to address this issue is to use a marker clustering solution. The basic idea is to group geographically similar locations into a group with the number of points displayed. As the user zooms into the map these groups expand to reveal individual markers beneath.

Perhaps the simplest to implement is the markerclusterer library. A basic implementation would be as follows (after library imports):

<script type="text/javascript">

  function initialize() {

    var center = new google.maps.LatLng(37.4419, -122.1419);



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 3,

      center: center,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });



    var markers = ;

    for (var i = 0; i < 100; i++) {

      var location = yourData.location[i];

      var latLng = new google.maps.LatLng(location.latitude,

          location.longitude);

      var marker = new google.maps.Marker({

        position: latLng

      });

      markers.push(marker);

    }

    var markerCluster = new MarkerClusterer(map, markers);

  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

The markers instead of being added directly to the map are added to an array. This array is then passed to the library which handles complex calculation for you and attached to the map.

Not only do these implementations massively increase client side performance but they also in many cases lead to a simpler and less cluttered UI and easier digestion of data on larger scales.

Other implementations are available from Google.

Hope this aids some of those newer to the nuances of mapping.

Thanks, a big big help! There is an order or magnitude difference in performance, by making the google.map data points first and then passing it to the mapping library, in this case MarketCluster to plot. with about 150,000 data points the first post by 'Daniel Vassallo' took about 2 mins to load, this 5 seconds. Thanks a bunch 'Swires'! — Apr 15 '14 at 15:11
I thought this would be a good place for this, I would imagine most peoples first landing on stack when related to Google maps is this page, and there second is 'why does my map take so long to load'. — Jun 25 '14 at 10:51
@Monic it's whatever your data set is, it's just a placeholder variable. — Mar 31 '15 at 8:39

sHaDeoNeRsHaDeoNeR 2371512 · Accepted Answer · 2014-06-06 12:58:16Z

Asynchronous version :

<script type="text/javascript">

  function initialize() {

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(-33.92, 151.25),

      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));

    }

}



function loadScript() {

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +

      'callback=initialize';

  document.body.appendChild(script);

}



window.onload = loadScript;

  </script>

Community♦ 11 · Accepted Answer · 2017-09-25 20:57:28Z

This is the working example map image

var arr = new Array();

    function initialize() { 

        var i;  

        var Locations = [

                {

                  lat:48.856614, 

                  lon:2.3522219000000177, 

                  address:'Paris',

                  gval:'25.5',

                  aType:'Non-Commodity',

                  title:'Paris',

                  descr:'Paris'           

                },        

                    {

                  lat: 55.7512419, 

                  lon: 37.6184217,

                  address:'Moscow',

                  gval:'11.5',

                  aType:'Non-Commodity',

                  title:'Moscow',

                  descr:'Moscow Airport'              

                },     



                {

              lat:-9.481553000000002, 

              lon:147.190242, 

              address:'Port Moresby',

              gval:'1',

              aType:'Oil',

              title:'Papua New Guinea',

              descr:'Papua New Guinea 123123123'              

            },

            {

           lat:20.5200,

           lon:77.7500,

           address:'Indore',

            gval:'1',

            aType:'Oil',

            title:'Indore, India',

            descr:'Airport India'

        }

    ];



    var myOptions = {

        zoom: 2,

        center: new google.maps.LatLng(51.9000,8.4731),

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };



    var map = new google.maps.Map(document.getElementById("map"), myOptions);



    var infowindow =  new google.maps.InfoWindow({

        content: ''

    });



    for (i = 0; i < Locations.length; i++) {

            size=15;        

            var img=new google.maps.MarkerImage('marker.png',           

                new google.maps.Size(size, size),

                new google.maps.Point(0,0),

                new google.maps.Point(size/2, size/2)

           );



        var marker = new google.maps.Marker({

            map: map,

            title: Locations[i].title,

            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           

                icon: img

        });



        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  



    }



}



function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 

    google.maps.event.addListener(marker, 'mouseover', function() {

            infowindow.setContent(html); 

            infowindow.open(map, marker); 



    });

    google.maps.event.addListener(marker, 'mouseout', function() {

        infowindow.close();



    }); 

}

Full working example. You can just copy, paste and use.

user180100 · Accepted Answer · 2010-06-17 05:36:57Z

From Google Map API samples:

function initialize() {

  var myOptions = {

    zoom: 10,

    center: new google.maps.LatLng(-33.9, 151.2),

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  setMarkers(map, beaches);

}



/**

 * Data for the markers consisting of a name, a LatLng and a zIndex for

 * the order in which these markers should display on top of each

 * other.

 */

var beaches = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



function setMarkers(map, locations) {

  // Add markers to the map



  // Marker sizes are expressed as a Size of X,Y

  // where the origin of the image (0,0) is located

  // in the top left of the image.



  // Origins, anchor positions and coordinates of the marker

  // increase in the X direction to the right and in

  // the Y direction down.

  var image = new google.maps.MarkerImage('images/beachflag.png',

      // This marker is 20 pixels wide by 32 pixels tall.

      new google.maps.Size(20, 32),

      // The origin for this image is 0,0.

      new google.maps.Point(0,0),

      // The anchor for this image is the base of the flagpole at 0,32.

      new google.maps.Point(0, 32));

  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      // The shadow image is larger in the horizontal dimension

      // while the position and offset are the same as for the main image.

      new google.maps.Size(37, 32),

      new google.maps.Point(0,0),

      new google.maps.Point(0, 32));

      // Shapes define the clickable region of the icon.

      // The type defines an HTML &lt;area&gt; element 'poly' which

      // traces out a polygon as a series of X,Y points. The final

      // coordinate closes the poly by connecting to the first

      // coordinate.

  var shape = {

      coord: [1, 1, 1, 20, 18, 20, 18 , 1],

      type: 'poly'

  };

  for (var i = 0; i < locations.length; i++) {

    var beach = locations[i];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({

        position: myLatLng,

        map: map,

        shadow: shadow,

        icon: image,

        shape: shape,

        title: beach[0],

        zIndex: beach[3]

    });

  }

}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :( — Mar 29 '12 at 12:27

score 11 · Accepted Answer · 2015-02-26 03:49:38Z

Here is another version I wrote to save map real estate, that places the infowindow pointer on the actual lat and long of the marker, while temporarily hiding the marker while the infowindow is being displayed.

It also does away with the standard 'marker' assignment and speeds up
processing by directly assigning the new marker to the markers array on the markers creation. Note however, that additional properties have been added to both the marker and the infowindow, so this approach is a tad unconventional... but that's me!

It is never mentioned in these infowindow questions, that the standard infowindow IS NOT placed at the lat and lng of the marker point, but rather at the top of the marker image. The marker visibility must be hidden for this to work, otherwise the Maps API will shove the infowindow anchor back to the top of the marker image again.

Reference to the markers in the 'markers' array are created immediately upon marker declaration for any additional processing tasks that may be desired later(hiding/showing, grabbing the coords,etc...). This saves the additional step of assigning the marker object to 'marker', and then pushing the 'marker' to the markers array... a lot of unnecessary processing in my book.

Anyway, a different take on infowindows, and hope it helps to inform and inspire you.

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];

    var map;

    var markers = ;



    function init(){

      map = new google.maps.Map(document.getElementById('map_canvas'), {

        zoom: 10,

        center: new google.maps.LatLng(-33.92, 151.25),

        mapTypeId: google.maps.MapTypeId.ROADMAP

      });



      var num_markers = locations.length;

      for (var i = 0; i < num_markers; i++) {  

        markers[i] = new google.maps.Marker({

          position: {lat:locations[i][1], lng:locations[i][2]},

          map: map,

          html: locations[i][0],

          id: i,

        });



        google.maps.event.addListener(markers[i], 'click', function(){

          var infowindow = new google.maps.InfoWindow({

            id: this.id,

            content:this.html,

            position:this.getPosition()

          });

          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){

            markers[this.id].setVisible(true);

          });

          this.setVisible(false);

          infowindow.open(map);

        });

      }

    }



google.maps.event.addDomListener(window, 'load', init);

Here is a working JSFiddle

Additional Note

You will notice in this given Google example data a fourth place in the 'locations' array with a number. Given this in the example, you could also use this value for the marker id in place of the current loop value, such that...

var num_markers = locations.length;

for (var i = 0; i < num_markers; i++) {  

  markers[i] = new google.maps.Marker({

    position: {lat:locations[i][1], lng:locations[i][2]},

    map: map,

    html: locations[i][0],

    id: locations[i][3],

  });

};

score 7 · Accepted Answer · 2018-04-03 14:48:11Z

Accepted answer, rewritten in ES6:

$(document).ready(() => {

  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');



  // Display a map on the page

  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });



  const buildings = [

    {

      title: 'London Eye, London', 

      coordinates: [51.503454, -0.119562],

      info: 'carousel'

    },

    {

      title: 'Palace of Westminster, London', 

      coordinates: [51.499633, -0.124755],

      info: 'palace'

    }

  ];



  placeBuildingsOnMap(buildings, map);

});





const placeBuildingsOnMap = (buildings, map) => {

  // Loop through our array of buildings & place each one on the map  

  const bounds = new google.maps.LatLngBounds();

  buildings.forEach((building) => {

    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }

    // Stretch our bounds to the newly found marker position

    bounds.extend(position);



    const marker = new google.maps.Marker({

      position: position,

      map: map,

      title: building.title

    });



    const infoWindow = new google.maps.InfoWindow();

    // Allow each marker to have an info window

    google.maps.event.addListener(marker, 'click', () => {

      infoWindow.setContent(building.info);

      infoWindow.open(map, marker);

    })



    // Automatically center the map fitting all markers on the screen

    map.fitBounds(bounds);

  })

})

score 5 · Accepted Answer · 2018-06-08 19:09:22Z

Add a marker in your program is very easy. You just may add this code:

var marker = new google.maps.Marker({

  position: myLatLng,

  map: map,

  title: 'Hello World!'

});

The following fields are particularly important and commonly set when you construct a marker:

position (required) specifies a LatLng identifying the initial location of the marker. One way of retrieving a LatLng is by using the Geocoding service.

map (optional) specifies the Map on which to place the marker. If you do not specify a map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker's setMap() method.

Note, in the example, the title field set the marker's title who will appear as a tooltip.

You may consult the Google api documenation here.

This is a complete example to set one marker in a map. Be care full, you have to replace YOUR_API_KEY by your google API key:

<!DOCTYPE html>

<html>

<head>

   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

   <meta charset="utf-8">

   <title>Simple markers</title>

<style>

  /* Always set the map height explicitly to define the size of the div

   * element that contains the map. */

  #map {

    height: 100%;

  }

  /* Optional: Makes the sample page fill the window. */

  html, body {

    height: 100%;

    margin: 0;

    padding: 0;

  }

</style>

</head>

<body>

 <div id="map"></div>

<script>



  function initMap() {

    var myLatLng = {lat: -25.363, lng: 131.044};



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 4,

      center: myLatLng

    });



    var marker = new google.maps.Marker({

      position: myLatLng,

      map: map,

      title: 'Hello World!'

    });

  }

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</script>

Now, if you want to plot markers of an array in a map, you should do like this:

var locations = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



function initMap() {

  var myLatLng = {lat: -33.90, lng: 151.16};



  var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,

    center: myLatLng

    });



  var count;



  for (count = 0; count < locations.length; count++) {  

    new google.maps.Marker({

      position: new google.maps.LatLng(locations[count][1], locations[count][2]),

      map: map,

      title: locations[count][0]

      });

   }

}

This example give me the following result:

enter image description here

You can, also, add an infoWindow in your pin. You just need this code:

var marker = new google.maps.Marker({

    position: new google.maps.LatLng(locations[count][1], locations[count][2]),

    map: map

    });



marker.info = new google.maps.InfoWindow({

    content: 'Hello World!'

    });

You can have the Google's documentation about infoWindows here.

Now, we can open the infoWindow when the marker is "clik" like this:

var marker = new google.maps.Marker({

     position: new google.maps.LatLng(locations[count][1], locations[count][2]),

     map: map

     });



marker.info = new google.maps.InfoWindow({

     content: locations [count][0]

     });





google.maps.event.addListener(marker, 'click', function() {  

    // this = marker

    var marker_map = this.getMap();

    this.info.open(marker_map, this);

    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

            });

Note, you can have some documentation about Listener here in google developer.

And, finally, we can plot an infoWindow in a marker if the user click on it. This is my complete code:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>Info windows</title>

    <style>

    /* Always set the map height explicitly to define the size of the div

    * element that contains the map. */

    #map {

        height: 100%;

    }

    /* Optional: Makes the sample page fill the window. */

    html, body {

        height: 100%;

        margin: 0;

        padding: 0;

    }

    </style>

</head>

<body>

    <div id="map"></div>

    <script>



    var locations = [

        ['Bondi Beach', -33.890542, 151.274856, 4],

        ['Coogee Beach', -33.923036, 151.259052, 5],

        ['Cronulla Beach', -34.028249, 151.157507, 3],

        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

        ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];





    // When the user clicks the marker, an info window opens.



    function initMap() {

        var myLatLng = {lat: -33.90, lng: 151.16};



        var map = new google.maps.Map(document.getElementById('map'), {

            zoom: 10,

            center: myLatLng

            });



        var count=0;





        for (count = 0; count < locations.length; count++) {  



            var marker = new google.maps.Marker({

                position: new google.maps.LatLng(locations[count][1], locations[count][2]),

                map: map

                });



            marker.info = new google.maps.InfoWindow({

                content: locations [count][0]

                });





            google.maps.event.addListener(marker, 'click', function() {  

                // this = marker

                var marker_map = this.getMap();

                this.info.open(marker_map, this);

                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

                });

        }

    }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

    </script>

</body>

</html>

Normally, you should have this result:

Your result

Community♦ 11 · Accepted Answer · 2017-05-23 12:02:56Z

Following from Daniel Vassallo's answer, here is a version that deals with the closure issue in a simpler way.

Since since all markers will have an individual InfoWindow and since JavaScript doesn't care if you add extra properties to an object, all you need to do is add an InfoWindow to the Marker's properties and then call the .open() on the InfoWindow from itself!

Edit: With enough data, the pageload could take a lot of time, so rather than construction the InfoWindow with the marker, the construction should happen only when needed. Note that any data used to construct the InfoWindow must be appended to the Marker as a property (data). Also note that after the first click event, infoWindow will persist as a property of it's marker so the browser doesn't need to constantly reconstruct.

var locations = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



var map = new google.maps.Map(document.getElementById('map'), {

  center: new google.maps.LatLng(-33.92, 151.25)

});



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,

    data: {

      name: locations[i][0]

    }

  });

  marker.addListener('click', function() {

    if(!this.infoWindow) {

      this.infoWindow = new google.maps.InfoWindow({

        content: this.data.name;

      });

    }

    this.infoWindow.open(map,this);

  })

}

score 2 · Accepted Answer · 2016-09-04 16:43:18Z

Here is a nearly complete example javascript function that will allow multiple markers defined in a JSONObject.

It will only display the markers that are with in the bounds of the map.

This is important so you are not doing extra work.

You can also set a limit to the markers so you are not showing an extreme amount of markers (if there is a possibility of a thing in your usage);

it will also not display markers if the center of the map has not changed more than 500 meters.

This is important because if a user clicks on the marker and accidentally drags the map while doing so you don't want the map to reload the markers.

I attached this function to the idle event listener for the map so markers will show only when the map is idle and will redisplay the markers after a different event.

In action screen shot
there is a little change in the screen shot showing more content in the infowindow.
enter image description here
pasted from pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

score 1 · Accepted Answer · 2019-02-19 09:26:45Z

Source Link

Demo Link

Complete HTML code

Show InfoWindow on Click or Hover.

Only one InfoWindow will be shown

enter image description here

    <!DOCTYPE html>

    <html>



    <head>

        <style>

            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */

            #map {

                height: 400px;

                /* The height is 400 pixels */

                width: 100%;

                /* The width is the width of the web page */

            }

        </style>

        <script>

            var map;

            var InforObj = ;

            var centerCords = {

                lat: -25.344,

                lng: 131.036

            };

            var markersOnMap = [{

                    placeName: "Australia (Uluru)",

                    LatLng: [{

                        lat: -25.344,

                        lng: 131.036

                    }]

                },

                {

                    placeName: "Australia (Melbourne)",

                    LatLng: [{

                        lat: -37.852086,

                        lng: 504.985963

                    }]

                },

                {

                    placeName: "Australia (Canberra)",

                    LatLng: [{

                        lat: -35.299085,

                        lng: 509.109615

                    }]

                },

                {

                    placeName: "Australia (Gold Coast)",

                    LatLng: [{

                        lat: -28.013044,

                        lng: 513.425586

                    }]

                },

                {

                    placeName: "Australia (Perth)",

                    LatLng: [{

                        lat: -31.951994,

                        lng: 475.858081

                    }]

                }

            ];



            window.onload = function () {

                initMap();

            };



            function addMarkerInfo() {

                for (var i = 0; i < markersOnMap.length; i++) {

                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +

                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';



                    const marker = new google.maps.Marker({

                        position: markersOnMap[i].LatLng[0],

                        map: map

                    });



                    const infowindow = new google.maps.InfoWindow({

                        content: contentString,

                        maxWidth: 200

                    });



                    marker.addListener('click', function () {

                        closeOtherInfo();

                        infowindow.open(marker.get('map'), marker);

                        InforObj[0] = infowindow;

                    });

                    // marker.addListener('mouseover', function () {

                    //     closeOtherInfo();

                    //     infowindow.open(marker.get('map'), marker);

                    //     InforObj[0] = infowindow;

                    // });

                    // marker.addListener('mouseout', function () {

                    //     closeOtherInfo();

                    //     infowindow.close();

                    //     InforObj[0] = infowindow;

                    // });

                }

            }



            function closeOtherInfo() {

                if (InforObj.length > 0) {

                    /* detach the info-window from the marker ... undocumented in the API docs */

                    InforObj[0].set("marker", null);

                    /* and close it */

                    InforObj[0].close();

                    /* blank the array */

                    InforObj.length = 0;

                }

            }



            function initMap() {

                map = new google.maps.Map(document.getElementById('map'), {

                    zoom: 4,

                    center: centerCords

                });

                addMarkerInfo();

            }

        </script>

    </head>



    <body>

        <h3>My Google Maps Demo</h3>

        <!--The div element for the map -->

        <div id="map"></div>



        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>



    </body>



    </html>

Halvor Holsten Strand 15.2k145874 · Accepted Answer · 2014-07-06 21:57:47Z

This is the simplest I could reduce it to:

<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <title>Google Maps Multiple Markers</title> 

  <script src="http://maps.google.com/maps/api/js?sensor=false" 

          type="text/javascript"></script>

</head> 

<body>

  <div id="map" style="width: 500px; height: 400px;"></div>



  <script type="text/javascript">

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(-33.92, 151.25),

      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>

</body>

</html>

Screenshot:

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:

Mozilla Dev Center: Working with Closures

@RaphaelDDL: Yes those parenthesis are needed to actually invoke the nameless function. The arguments need to be passed because of the way JavaScript works (because of closures). See my answer to this question for an example and more info: stackoverflow.com/a/2670420/222908 — Jul 11 '12 at 22:07
Good answer, but it could be simplified further. Since since all markers will have individual InfoWindows and since JavaScript doesn't care if you add extra properties to an object, all you need to do is add an InfoWindow to the Marker's properties and then call the .open() on the InfoWindow from itself. I would have posted the change here, but it the modifications were large enough that I posted my own answer. — Jun 30 '16 at 3:08

Community♦ 11 · Accepted Answer · 2017-09-25 21:03:11Z

Here is another example of multiple markers loading with a unique title and infoWindow text. Tested with the latest google maps API V3.11.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Multiple Markers Google Maps</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>

        <script type="text/javascript">

        // check DOM Ready

        $(document).ready(function() {

            // execute

            (function() {

                // map options

                var options = {

                    zoom: 5,

                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US

                    mapTypeId: google.maps.MapTypeId.TERRAIN,

                    mapTypeControl: false

                };



                // init map

                var map = new google.maps.Map(document.getElementById('map_canvas'), options);



                // NY and CA sample Lat / Lng

                var southWest = new google.maps.LatLng(40.744656, -74.005966);

                var northEast = new google.maps.LatLng(34.052234, -118.243685);

                var lngSpan = northEast.lng() - southWest.lng();

                var latSpan = northEast.lat() - southWest.lat();



                // set multiple marker

                for (var i = 0; i < 250; i++) {

                    // init markers

                    var marker = new google.maps.Marker({

                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),

                        map: map,

                        title: 'Click Me ' + i

                    });



                    // process multiple info windows

                    (function(marker, i) {

                        // add click event

                        google.maps.event.addListener(marker, 'click', function() {

                            infowindow = new google.maps.InfoWindow({

                                content: 'Hello, World!!'

                            });

                            infowindow.open(map, marker);

                        });

                    })(marker, i);

                }

            })();

        });

        </script>

    </head>

    <body>

        <div id="map_canvas" style="width: 800px; height:500px;"></div>

    </body>

</html>

Screenshot of 250 Markers:

Google Maps API V3.11 with Multiple Markers

It will automatically randomize the Lat/Lng to make it unique. This example will be very helpful if you want to test 500, 1000, xxx markers and performance.

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead. — Mar 9 '13 at 23:43
This will get many pop up infoWindow for each marker and won't hide the other infoWindow if it's currently shown. it's really helpful :) — Mar 27 '14 at 3:30
@Anup, if you just read the question and comment it would be better. the question is asking "example for multiple marker" whether it is random or your own bla bla. — Jun 29 '15 at 13:39

score 33 · Accepted Answer · 2014-02-04 15:52:28Z

I thought I would put this here as it appears to be a popular landing point for those starting to use Google Maps API's. Multiple markers rendered on the client side is probably the downfall of many mapping applications performance wise. It is difficult to benchmark, fix and in some cases even establish there is an issue (due to browser implementation differences, hardware available to the client, mobile devices, the list goes on).

The simplest way to begin to address this issue is to use a marker clustering solution. The basic idea is to group geographically similar locations into a group with the number of points displayed. As the user zooms into the map these groups expand to reveal individual markers beneath.

Perhaps the simplest to implement is the markerclusterer library. A basic implementation would be as follows (after library imports):

<script type="text/javascript">

  function initialize() {

    var center = new google.maps.LatLng(37.4419, -122.1419);



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 3,

      center: center,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });



    var markers = ;

    for (var i = 0; i < 100; i++) {

      var location = yourData.location[i];

      var latLng = new google.maps.LatLng(location.latitude,

          location.longitude);

      var marker = new google.maps.Marker({

        position: latLng

      });

      markers.push(marker);

    }

    var markerCluster = new MarkerClusterer(map, markers);

  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

The markers instead of being added directly to the map are added to an array. This array is then passed to the library which handles complex calculation for you and attached to the map.

Not only do these implementations massively increase client side performance but they also in many cases lead to a simpler and less cluttered UI and easier digestion of data on larger scales.

Other implementations are available from Google.

Hope this aids some of those newer to the nuances of mapping.

Thanks, a big big help! There is an order or magnitude difference in performance, by making the google.map data points first and then passing it to the mapping library, in this case MarketCluster to plot. with about 150,000 data points the first post by 'Daniel Vassallo' took about 2 mins to load, this 5 seconds. Thanks a bunch 'Swires'! — Apr 15 '14 at 15:11
I thought this would be a good place for this, I would imagine most peoples first landing on stack when related to Google maps is this page, and there second is 'why does my map take so long to load'. — Jun 25 '14 at 10:51
@Monic it's whatever your data set is, it's just a placeholder variable. — Mar 31 '15 at 8:39

sHaDeoNeRsHaDeoNeR 2371512 · Accepted Answer · 2014-06-06 12:58:16Z

Asynchronous version :

<script type="text/javascript">

  function initialize() {

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(-33.92, 151.25),

      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));

    }

}



function loadScript() {

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +

      'callback=initialize';

  document.body.appendChild(script);

}



window.onload = loadScript;

  </script>

Community♦ 11 · Accepted Answer · 2017-09-25 20:57:28Z

This is the working example map image

var arr = new Array();

    function initialize() { 

        var i;  

        var Locations = [

                {

                  lat:48.856614, 

                  lon:2.3522219000000177, 

                  address:'Paris',

                  gval:'25.5',

                  aType:'Non-Commodity',

                  title:'Paris',

                  descr:'Paris'           

                },        

                    {

                  lat: 55.7512419, 

                  lon: 37.6184217,

                  address:'Moscow',

                  gval:'11.5',

                  aType:'Non-Commodity',

                  title:'Moscow',

                  descr:'Moscow Airport'              

                },     



                {

              lat:-9.481553000000002, 

              lon:147.190242, 

              address:'Port Moresby',

              gval:'1',

              aType:'Oil',

              title:'Papua New Guinea',

              descr:'Papua New Guinea 123123123'              

            },

            {

           lat:20.5200,

           lon:77.7500,

           address:'Indore',

            gval:'1',

            aType:'Oil',

            title:'Indore, India',

            descr:'Airport India'

        }

    ];



    var myOptions = {

        zoom: 2,

        center: new google.maps.LatLng(51.9000,8.4731),

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };



    var map = new google.maps.Map(document.getElementById("map"), myOptions);



    var infowindow =  new google.maps.InfoWindow({

        content: ''

    });



    for (i = 0; i < Locations.length; i++) {

            size=15;        

            var img=new google.maps.MarkerImage('marker.png',           

                new google.maps.Size(size, size),

                new google.maps.Point(0,0),

                new google.maps.Point(size/2, size/2)

           );



        var marker = new google.maps.Marker({

            map: map,

            title: Locations[i].title,

            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           

                icon: img

        });



        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  



    }



}



function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 

    google.maps.event.addListener(marker, 'mouseover', function() {

            infowindow.setContent(html); 

            infowindow.open(map, marker); 



    });

    google.maps.event.addListener(marker, 'mouseout', function() {

        infowindow.close();



    }); 

}

Full working example. You can just copy, paste and use.

user180100 · Accepted Answer · 2010-06-17 05:36:57Z

From Google Map API samples:

function initialize() {

  var myOptions = {

    zoom: 10,

    center: new google.maps.LatLng(-33.9, 151.2),

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  setMarkers(map, beaches);

}



/**

 * Data for the markers consisting of a name, a LatLng and a zIndex for

 * the order in which these markers should display on top of each

 * other.

 */

var beaches = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



function setMarkers(map, locations) {

  // Add markers to the map



  // Marker sizes are expressed as a Size of X,Y

  // where the origin of the image (0,0) is located

  // in the top left of the image.



  // Origins, anchor positions and coordinates of the marker

  // increase in the X direction to the right and in

  // the Y direction down.

  var image = new google.maps.MarkerImage('images/beachflag.png',

      // This marker is 20 pixels wide by 32 pixels tall.

      new google.maps.Size(20, 32),

      // The origin for this image is 0,0.

      new google.maps.Point(0,0),

      // The anchor for this image is the base of the flagpole at 0,32.

      new google.maps.Point(0, 32));

  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      // The shadow image is larger in the horizontal dimension

      // while the position and offset are the same as for the main image.

      new google.maps.Size(37, 32),

      new google.maps.Point(0,0),

      new google.maps.Point(0, 32));

      // Shapes define the clickable region of the icon.

      // The type defines an HTML &lt;area&gt; element 'poly' which

      // traces out a polygon as a series of X,Y points. The final

      // coordinate closes the poly by connecting to the first

      // coordinate.

  var shape = {

      coord: [1, 1, 1, 20, 18, 20, 18 , 1],

      type: 'poly'

  };

  for (var i = 0; i < locations.length; i++) {

    var beach = locations[i];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({

        position: myLatLng,

        map: map,

        shadow: shadow,

        icon: image,

        shape: shape,

        title: beach[0],

        zIndex: beach[3]

    });

  }

}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :( — Mar 29 '12 at 12:27

score 11 · Accepted Answer · 2015-02-26 03:49:38Z

Here is another version I wrote to save map real estate, that places the infowindow pointer on the actual lat and long of the marker, while temporarily hiding the marker while the infowindow is being displayed.

It also does away with the standard 'marker' assignment and speeds up
processing by directly assigning the new marker to the markers array on the markers creation. Note however, that additional properties have been added to both the marker and the infowindow, so this approach is a tad unconventional... but that's me!

It is never mentioned in these infowindow questions, that the standard infowindow IS NOT placed at the lat and lng of the marker point, but rather at the top of the marker image. The marker visibility must be hidden for this to work, otherwise the Maps API will shove the infowindow anchor back to the top of the marker image again.

Reference to the markers in the 'markers' array are created immediately upon marker declaration for any additional processing tasks that may be desired later(hiding/showing, grabbing the coords,etc...). This saves the additional step of assigning the marker object to 'marker', and then pushing the 'marker' to the markers array... a lot of unnecessary processing in my book.

Anyway, a different take on infowindows, and hope it helps to inform and inspire you.

    var locations = [

      ['Bondi Beach', -33.890542, 151.274856, 4],

      ['Coogee Beach', -33.923036, 151.259052, 5],

      ['Cronulla Beach', -34.028249, 151.157507, 3],

      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

      ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];

    var map;

    var markers = ;



    function init(){

      map = new google.maps.Map(document.getElementById('map_canvas'), {

        zoom: 10,

        center: new google.maps.LatLng(-33.92, 151.25),

        mapTypeId: google.maps.MapTypeId.ROADMAP

      });



      var num_markers = locations.length;

      for (var i = 0; i < num_markers; i++) {  

        markers[i] = new google.maps.Marker({

          position: {lat:locations[i][1], lng:locations[i][2]},

          map: map,

          html: locations[i][0],

          id: i,

        });



        google.maps.event.addListener(markers[i], 'click', function(){

          var infowindow = new google.maps.InfoWindow({

            id: this.id,

            content:this.html,

            position:this.getPosition()

          });

          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){

            markers[this.id].setVisible(true);

          });

          this.setVisible(false);

          infowindow.open(map);

        });

      }

    }



google.maps.event.addDomListener(window, 'load', init);

Here is a working JSFiddle

Additional Note

You will notice in this given Google example data a fourth place in the 'locations' array with a number. Given this in the example, you could also use this value for the marker id in place of the current loop value, such that...

var num_markers = locations.length;

for (var i = 0; i < num_markers; i++) {  

  markers[i] = new google.maps.Marker({

    position: {lat:locations[i][1], lng:locations[i][2]},

    map: map,

    html: locations[i][0],

    id: locations[i][3],

  });

};

score 7 · Accepted Answer · 2018-04-03 14:48:11Z

Accepted answer, rewritten in ES6:

$(document).ready(() => {

  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');



  // Display a map on the page

  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });



  const buildings = [

    {

      title: 'London Eye, London', 

      coordinates: [51.503454, -0.119562],

      info: 'carousel'

    },

    {

      title: 'Palace of Westminster, London', 

      coordinates: [51.499633, -0.124755],

      info: 'palace'

    }

  ];



  placeBuildingsOnMap(buildings, map);

});





const placeBuildingsOnMap = (buildings, map) => {

  // Loop through our array of buildings & place each one on the map  

  const bounds = new google.maps.LatLngBounds();

  buildings.forEach((building) => {

    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }

    // Stretch our bounds to the newly found marker position

    bounds.extend(position);



    const marker = new google.maps.Marker({

      position: position,

      map: map,

      title: building.title

    });



    const infoWindow = new google.maps.InfoWindow();

    // Allow each marker to have an info window

    google.maps.event.addListener(marker, 'click', () => {

      infoWindow.setContent(building.info);

      infoWindow.open(map, marker);

    })



    // Automatically center the map fitting all markers on the screen

    map.fitBounds(bounds);

  })

})

score 5 · Accepted Answer · 2018-06-08 19:09:22Z

Add a marker in your program is very easy. You just may add this code:

var marker = new google.maps.Marker({

  position: myLatLng,

  map: map,

  title: 'Hello World!'

});

The following fields are particularly important and commonly set when you construct a marker:

position (required) specifies a LatLng identifying the initial location of the marker. One way of retrieving a LatLng is by using the Geocoding service.

map (optional) specifies the Map on which to place the marker. If you do not specify a map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker's setMap() method.

Note, in the example, the title field set the marker's title who will appear as a tooltip.

You may consult the Google api documenation here.

This is a complete example to set one marker in a map. Be care full, you have to replace YOUR_API_KEY by your google API key:

<!DOCTYPE html>

<html>

<head>

   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

   <meta charset="utf-8">

   <title>Simple markers</title>

<style>

  /* Always set the map height explicitly to define the size of the div

   * element that contains the map. */

  #map {

    height: 100%;

  }

  /* Optional: Makes the sample page fill the window. */

  html, body {

    height: 100%;

    margin: 0;

    padding: 0;

  }

</style>

</head>

<body>

 <div id="map"></div>

<script>



  function initMap() {

    var myLatLng = {lat: -25.363, lng: 131.044};



    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 4,

      center: myLatLng

    });



    var marker = new google.maps.Marker({

      position: myLatLng,

      map: map,

      title: 'Hello World!'

    });

  }

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</script>

Now, if you want to plot markers of an array in a map, you should do like this:

var locations = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



function initMap() {

  var myLatLng = {lat: -33.90, lng: 151.16};



  var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,

    center: myLatLng

    });



  var count;



  for (count = 0; count < locations.length; count++) {  

    new google.maps.Marker({

      position: new google.maps.LatLng(locations[count][1], locations[count][2]),

      map: map,

      title: locations[count][0]

      });

   }

}

This example give me the following result:

enter image description here

You can, also, add an infoWindow in your pin. You just need this code:

var marker = new google.maps.Marker({

    position: new google.maps.LatLng(locations[count][1], locations[count][2]),

    map: map

    });



marker.info = new google.maps.InfoWindow({

    content: 'Hello World!'

    });

You can have the Google's documentation about infoWindows here.

Now, we can open the infoWindow when the marker is "clik" like this:

var marker = new google.maps.Marker({

     position: new google.maps.LatLng(locations[count][1], locations[count][2]),

     map: map

     });



marker.info = new google.maps.InfoWindow({

     content: locations [count][0]

     });





google.maps.event.addListener(marker, 'click', function() {  

    // this = marker

    var marker_map = this.getMap();

    this.info.open(marker_map, this);

    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

            });

Note, you can have some documentation about Listener here in google developer.

And, finally, we can plot an infoWindow in a marker if the user click on it. This is my complete code:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>Info windows</title>

    <style>

    /* Always set the map height explicitly to define the size of the div

    * element that contains the map. */

    #map {

        height: 100%;

    }

    /* Optional: Makes the sample page fill the window. */

    html, body {

        height: 100%;

        margin: 0;

        padding: 0;

    }

    </style>

</head>

<body>

    <div id="map"></div>

    <script>



    var locations = [

        ['Bondi Beach', -33.890542, 151.274856, 4],

        ['Coogee Beach', -33.923036, 151.259052, 5],

        ['Cronulla Beach', -34.028249, 151.157507, 3],

        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

        ['Maroubra Beach', -33.950198, 151.259302, 1]

    ];





    // When the user clicks the marker, an info window opens.



    function initMap() {

        var myLatLng = {lat: -33.90, lng: 151.16};



        var map = new google.maps.Map(document.getElementById('map'), {

            zoom: 10,

            center: myLatLng

            });



        var count=0;





        for (count = 0; count < locations.length; count++) {  



            var marker = new google.maps.Marker({

                position: new google.maps.LatLng(locations[count][1], locations[count][2]),

                map: map

                });



            marker.info = new google.maps.InfoWindow({

                content: locations [count][0]

                });





            google.maps.event.addListener(marker, 'click', function() {  

                // this = marker

                var marker_map = this.getMap();

                this.info.open(marker_map, this);

                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

                });

        }

    }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

    </script>

</body>

</html>

Normally, you should have this result:

Your result

Community♦ 11 · Accepted Answer · 2017-05-23 12:02:56Z

Following from Daniel Vassallo's answer, here is a version that deals with the closure issue in a simpler way.

Since since all markers will have an individual InfoWindow and since JavaScript doesn't care if you add extra properties to an object, all you need to do is add an InfoWindow to the Marker's properties and then call the .open() on the InfoWindow from itself!

Edit: With enough data, the pageload could take a lot of time, so rather than construction the InfoWindow with the marker, the construction should happen only when needed. Note that any data used to construct the InfoWindow must be appended to the Marker as a property (data). Also note that after the first click event, infoWindow will persist as a property of it's marker so the browser doesn't need to constantly reconstruct.

var locations = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];



var map = new google.maps.Map(document.getElementById('map'), {

  center: new google.maps.LatLng(-33.92, 151.25)

});



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,

    data: {

      name: locations[i][0]

    }

  });

  marker.addListener('click', function() {

    if(!this.infoWindow) {

      this.infoWindow = new google.maps.InfoWindow({

        content: this.data.name;

      });

    }

    this.infoWindow.open(map,this);

  })

}

score 2 · Accepted Answer · 2016-09-04 16:43:18Z

Here is a nearly complete example javascript function that will allow multiple markers defined in a JSONObject.

It will only display the markers that are with in the bounds of the map.

This is important so you are not doing extra work.

You can also set a limit to the markers so you are not showing an extreme amount of markers (if there is a possibility of a thing in your usage);

it will also not display markers if the center of the map has not changed more than 500 meters.

This is important because if a user clicks on the marker and accidentally drags the map while doing so you don't want the map to reload the markers.

I attached this function to the idle event listener for the map so markers will show only when the map is idle and will redisplay the markers after a different event.

In action screen shot
there is a little change in the screen shot showing more content in the infowindow.
enter image description here
pasted from pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

score 1 · Accepted Answer · 2019-02-19 09:26:45Z

Source Link

Demo Link

Complete HTML code

Show InfoWindow on Click or Hover.

Only one InfoWindow will be shown

enter image description here

    <!DOCTYPE html>

    <html>



    <head>

        <style>

            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */

            #map {

                height: 400px;

                /* The height is 400 pixels */

                width: 100%;

                /* The width is the width of the web page */

            }

        </style>

        <script>

            var map;

            var InforObj = ;

            var centerCords = {

                lat: -25.344,

                lng: 131.036

            };

            var markersOnMap = [{

                    placeName: "Australia (Uluru)",

                    LatLng: [{

                        lat: -25.344,

                        lng: 131.036

                    }]

                },

                {

                    placeName: "Australia (Melbourne)",

                    LatLng: [{

                        lat: -37.852086,

                        lng: 504.985963

                    }]

                },

                {

                    placeName: "Australia (Canberra)",

                    LatLng: [{

                        lat: -35.299085,

                        lng: 509.109615

                    }]

                },

                {

                    placeName: "Australia (Gold Coast)",

                    LatLng: [{

                        lat: -28.013044,

                        lng: 513.425586

                    }]

                },

                {

                    placeName: "Australia (Perth)",

                    LatLng: [{

                        lat: -31.951994,

                        lng: 475.858081

                    }]

                }

            ];



            window.onload = function () {

                initMap();

            };



            function addMarkerInfo() {

                for (var i = 0; i < markersOnMap.length; i++) {

                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +

                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';



                    const marker = new google.maps.Marker({

                        position: markersOnMap[i].LatLng[0],

                        map: map

                    });



                    const infowindow = new google.maps.InfoWindow({

                        content: contentString,

                        maxWidth: 200

                    });



                    marker.addListener('click', function () {

                        closeOtherInfo();

                        infowindow.open(marker.get('map'), marker);

                        InforObj[0] = infowindow;

                    });

                    // marker.addListener('mouseover', function () {

                    //     closeOtherInfo();

                    //     infowindow.open(marker.get('map'), marker);

                    //     InforObj[0] = infowindow;

                    // });

                    // marker.addListener('mouseout', function () {

                    //     closeOtherInfo();

                    //     infowindow.close();

                    //     InforObj[0] = infowindow;

                    // });

                }

            }



            function closeOtherInfo() {

                if (InforObj.length > 0) {

                    /* detach the info-window from the marker ... undocumented in the API docs */

                    InforObj[0].set("marker", null);

                    /* and close it */

                    InforObj[0].close();

                    /* blank the array */

                    InforObj.length = 0;

                }

            }



            function initMap() {

                map = new google.maps.Map(document.getElementById('map'), {

                    zoom: 4,

                    center: centerCords

                });

                addMarkerInfo();

            }

        </script>

    </head>



    <body>

        <h3>My Google Maps Demo</h3>

        <!--The div element for the map -->

        <div id="map"></div>



        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>



    </body>



    </html>

搜尋此網誌

Ndtyjky

Google Maps JS API v3 - Simple Multiple Marker Example

12 Answers
12

Accepted answer, rewritten in ES6:

protected by Community♦ Oct 10 '11 at 16:50

12 Answers
12

12 Answers
12

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

protected by Community♦ Oct 10 '11 at 16:50

Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma

Google Maps JS API v3 - Simple Multiple Marker Example

12 Answers 12

Accepted answer, rewritten in ES6:

protected by Community♦ Oct 10 '11 at 16:50

12 Answers 12

12 Answers 12

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

Accepted answer, rewritten in ES6:

protected by Community♦ Oct 10 '11 at 16:50

Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma

12 Answers
12

12 Answers
12

12 Answers
12