Google Maps API Multiple Markers with Infowindows

Question

I am trying to add multiple markers each with its own infowindow that comes up when clicked on  I am having trouble with getting the infowindows coming up  when I try it either shows up only one marker without an infowindow    Thanks  let me know if you need some more information   lt meta name  viewport  content  initial-scale 1 0  user-scalable no   gt   lt style type  text css  gt  html       height  100     body       height  100       margin  0      padding  0     map canvas       height  100     lt  style gt   lt script type  text javascript      src  http   maps googleapis com maps api js key AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98 amp sensor false  gt   lt  script gt   lt script type  text javascript  gt   var locations           loan 1   33 890542  151 274856   address 1          loan 2   33 923036  151 259052   address 2          loan 3   34 028249  151 157507   address 3          loan 4   33 80010128657071  151 28747820854187   address 4          loan 5   33 950198  151 259302   address 5       function initialize          var myOptions             center  new google maps LatLng 33 890542  151 274856           zoom  8          mapTypeId  google maps MapTypeId ROADMAP             var map   new google maps Map document getElementById  default            myOptions        setMarkers map  locations      function setMarkers map  locations         var marker  i     for  i   0  i  lt  locations length  i               var loan   locations i  0          var lat   locations i  1          var long   locations i  2          var add   locations i  3           latlngset   new google maps LatLng lat  long            var marker   new google maps Marker               map  map  title  loan  position  latlngset                     map setCenter marker getPosition             var content    Loan Number      loan     lt  h3 gt      Address      add          var infowindow   new google maps InfoWindow            google maps AddListener marker   click   function  map  marker                infowindow setContent content              infowindow open map  marker                         lt  script gt   lt  head gt   lt body onload  initialize    gt   lt div id  default  style  width 100   height 100   gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Here is the code snippet which will work for sure  You can visit below link for working jsFiddle and explainantion in detail  How to locate multiple addresses on google maps with perfect zoom  var infowindow   new google maps InfoWindow      google maps event addListener marker   mouseover    function marker                 return function                      var content   address                   infowindow setContent content                    infowindow open map  marker                                marker

User · Answer

function setMarkers map locations    for  var i   0  i  lt  locations length  i           var loan   locations i  0    var lat   locations i  1    var long   locations i  2    var add    locations i  3     latlngset   new google maps LatLng lat  long     var marker   new google maps Marker               map  map  title  loan   position  latlngset         map setCenter marker getPosition        marker content     lt h3 gt Loan Number      loan      lt  h3 gt      Address      add     google maps events addListener marker  click   function map marker             map infowindow setContent marker content             map infowindow open map marker                 Then move var infowindow   new google maps InfoWindow   to the initialize   function   function initialize          var myOptions           center  new google maps LatLng 33 890542  151 274856         zoom  8        mapTypeId  google maps MapTypeId ROADMAP             var map   new google maps Map document getElementById  default            myOptions       map infowindow   new google maps InfoWindow         setMarkers map locations

User · Answer

Source Link  Demo Link  The following code will show Multiple Markers with InfoWindow  You can Uncomment code to show Info on Hover as well                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  lt  markersOnMap length  i                          var contentString     lt div id  content  gt  lt h1 gt     markersOnMap i  placeName                             lt  h1 gt  lt p gt Lorem ipsum dolor sit amet  vix mutat posse suscipit id  vel ea tantas omittam detraxit  lt  p gt  lt  div gt                         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  gt  0                        InforObj 0  set  marker   null                       InforObj 0  close                        InforObj length   0                                               function initMap                     map   new google maps Map document getElementById  map                          zoom  4                      center  centerCords                                     addMarkerInfo

User · Answer

If you also want to bind closing of infowindow to some event  try something like this  google maps event addListener marker  click    function marker content infowindow        return function             infowindow setContent content           infowindow open map marker           windows push infowindow          google maps event addListener map  click   function                 infowindow close                           marker content infowindow

User · Answer

You could use a closure  Just modify your code like this   google maps event addListener marker  click    function marker content infowindow        return function             infowindow setContent content           infowindow open map marker             marker content infowindow        Here is the DEMO

[javascript] Google Maps API Multiple Markers with Infowindows

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to google-maps-markers

Examples related to infowindow