Close all infowindows in Google Maps API v3

Question

I am busy with a script that will make a google maps canvas on my website  with multiple markers  I want that when you click on a marker  a infowindow opens  I have done that  and the code is at the moment    var latlng   new google maps LatLng -34 397  150 644       var myOptions           zoom  8        center  latlng        mapTypeId  google maps MapTypeId ROADMAP            var map   new google maps Map document getElementById  map canvas    myOptions       function addMarker map  address  title         geocoder   new google maps Geocoder         geocoder geocode     address   address   function results  status            if  status    google maps GeocoderStatus OK              map setCenter results 0  geometry location             var marker   new google maps Marker        position  results 0  geometry location                map  map                title title             google maps event addListener marker   click   function          var infowindow   new google maps InfoWindow                infowindow setContent   lt strong gt   title     lt  strong gt  lt br   gt     address                infowindow open map  marker                            else             alert  Geocode was not successful for the following reason      status                                addMarker map   Address    Title     addMarker map   Address    Title      This works 100   But now i want that when one infowindow is open  and you want to open the second  the first one automaticly closes  But i haven t found a way to do that  infowindow close    won t help  Has someone an example or a solution to this problem

User · Answer

Declare global variables   var mapOptions  var map  var infowindow  var marker  var contentString  var image    In intialize use the map s addEvent method   google maps event addListener map   click   function         if  infowindow            infowindow close

User · Answer

I have a sample of my code that maybe can help  I had set only one infowindow object at global scope  Then use setContent   to set the content before show it      let map    let infowindow    let dataArr                 pos  lat  -34 397  lng  150 644         content   First marker                     pos  lat  -34 340  lng  150 415         content   Second marker                function initMap         map   new google maps Map document getElementById  map            center   lat  -34 397  lng  150 644         zoom  8                Set infowindow object to global varible     infowindow   new google maps InfoWindow        loadMarker           function loadMarker        dataArr forEach  obj  i   gt         let marker   new google maps Marker           position  obj pos          map  map                 marker addListener  click   function             infowindow close           infowindow setContent   lt div gt    obj content   lt  div gt            infowindow open map  marker

User · Answer

I had a dynamic loop that was creating the infowindows and markers based on how many were input into the CMS  so I didn t want to create a new InfoWindow   on every event click and bog it down with requests  if that ever arose   Instead  I tried to know what the specific infowindow variable for each instance was going to be out of the set amount of locations I had  and then prompt Maps to close all of them before it opened the correct one   My array of locations was called locations  so the PHP I set up before the actual maps initilization to get my infowindow variable names was   for  k   0   k  lt  count  locations    k               infowindows      infowindow     k        Then after initialzing the map and so forth  in the script I had a PHP foreach loop creating the dynamic info windows using a counter        javascript map initilization  lt  php   i 0  foreach  locations as  location             get latitudes  longitude  image  etc     echo  var mapMarker     i       new google maps Marker             position  myLatLng     i                map  map            icon  image              echo  var contentString     i         lt h1 gt      title  i      lt  h1 gt  lt h2 gt      address  i      lt  h2 gt      content  i                   echo  infowindow     i       new google maps InfoWindow      echo      content  contentString     i                      echo  google maps event addListener mapMarker     i       click   function               foreach  infowindows as  window              echo  window     close                     echo  infowindow     i     open map mapMarker    i                     i         gt       continue with Maps script       So  the point is  before I called the entire map script  I had an array with the names I knew were going to be outputted when an InfoWindow   was created  like infowindow0  infowindow1  infowindow2  etc     Then  on the click event for each marker  the foreach loop goes through and says close all of them before you follow through with the next step of opening them   It turns out looking like this   google maps event addListener mapMarker0   click   function         infowindow0 close        infowindow1 close        infowindow2 close        infowindow0 open map mapMarker0       Just a different way of doing things I suppose    but I hope it helps someone

User · Answer

I have something like the following  function initMap              create new map here     var infowindow          business   each function el                get lat lng         var position   new google maps LatLng lat  lng           var content    contents go here           var title    titleText           var openWindowFn          var closure   function content  position                openWindowFn   function                                 if  infowindow                                        infowindow close                                      infowindow   new google maps InfoWindow                       position position                      content content                                     infowindow open map  marker                           content  position           var marker   new google maps Marker               position position              map map              title title                      google maps event addListener marker   click   openWindowFn             In my understanding  using a closure like that allows the capturing of variables and their values at the time of function declaration  rather than relying on global variables  So when openWindowFn is called later  on the first marker for example  the content and position variable have the values they did during the first iteration in the each   function    I m not really sure how openWindowFn has infowindow in its scope  I m also not sure I m doing things right  but it works  even with multiple maps on one page  each map gets one open infowindow     If anyone has any insights  please comment

User · Answer

When dealing with marker clusters this one worked for me   var infowindow   null   google maps event addListener marker   click   function               if  infowindow                infowindow close                      var markerMap   this getMap            infowindow   this info          this info open markerMap  this

User · Answer

For loops that creates infowindows dynamically  declare a global variable   var openwindow   and then in the addListenerfunction call  which is within the loop    google maps event addListener marker lt  php echo  id    gt    click   function     if openwindow       eval openwindow  close      openwindow  myInfoWindow lt  php echo  id    gt    myInfoWindow lt  php echo  id    gt  open map  marker lt  php echo  id    gt

User · Answer

infowindow is local variable and window is not available at time of close    var latlng   new google maps LatLng -34 397  150 644   var infowindow   null        google maps event addListener marker   click   function         if  infowindow            infowindow close              infowindow   new google maps InfoWindow

User · Answer

If you have multiple markers you can use this simple solution to close a previously opened marker when clicking a new marker  var infowindow   new google maps InfoWindow                   maxWidth   window innerWidth - 160                   content  content                              marker infowindow   infowindow              var openInfoWindow                    marker addListener  click   function  map  marker                    if  openInfoWindow                        openInfoWindow close                                      openInfoWindow   this infowindow                  this infowindow open map  this

User · Answer

I encourage you to try goMap jQuery plugin when working with Google Maps  For this kind of situation you can set hideByClick to true when creating markers     function              map   goMap            markers                   latitude  56 948813               longitude  24 704004               html                     content   Click to marker                    popup true                                           latitude  54 948813               longitude  21 704004               html   Hello                         hideByClick  true                  This is just one example  it has many features to offer like grouping markers and manipulating info windows

User · Answer

Write this below line after script tag start  previous Window null   It will work 100    by using this code  radius  circle getRadius   1000   radius mile  circle getRadius   1609 344    newRadious    This Circle Radius Covers Approx     radius toFixed 1      Km     lt br gt  This circle Radius Covers Approx    radius mile toFixed 1    Miles               var infoWindow  new google maps InfoWindow                 content  newRadious                    infoWindow setContent newRadious   infoWindow setPosition circle getCenter      if  previous Window     previous Window close       infoWindow open map     previous Window infoWindow

User · Answer

I have been an hour with headache trying to close the infoWindow  My final  and working  option has been closing the infoWindow with a SetTimeout  a few seconds  It s not the best way    but it works easely       marker addListener  click   function         infowindow setContent html       infowindow open map  this        setTimeout function            infowindow close          5000

User · Answer

You should have to click your map -     map-selector   click

[javascript] Close all infowindows in Google Maps API v3

Examples related to javascript

Examples related to google-maps-api-3