Close opened infowindows - google maps api

Question

I'm trying that when the user clicks on a marker, it opens and close all the previous opened markers. I'm trying with this code with no luck, any idea how to do it?

updated with the full script I'm using and based on the possible solutions on the answers:

    (function($) {

    /*
    *  new_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param $el (jQuery element)
    *  @return  n/a
    */

    function new_map( $el ) {

      // var
      var $markers = $el.find('.marker');


      // vars
      var args = {
        scrollwheel: false,
        zoom    : 5,
        center    : new google.maps.LatLng(0, 0),
        mapTypeId : google.maps.MapTypeId.ROADMAP
      };


      // create map           
      var map = new google.maps.Map( $el[0], args);


      // add a markers reference
      map.markers = [];


      // add markers
      $markers.each(function(){

          add_marker( $(this), map );

      });


      // center map
      center_map( map );


      // return
      return map;

    }

    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param $marker (jQuery element)
    *  @param map (Google Map object)
    *  @return  n/a
    */

    function add_marker( $marker, map ) {

      // var
      var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

      // create marker
      var marker = new google.maps.Marker({
        position  : latlng,
        map     : map,
        icon: '<?php echo get_template_directory_uri(); ?>/assets/img/google-map-marker.png',
      });

      // add to array
      map.markers.push( marker );

      if( $marker.html() ){
         var infoWindows = [];
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

           // Need to clear up old info windows before adding new ones
          for (var i = 0; i < infoWindows.length; i++) {
            infoWindows[i].setMap(null);
          }

        // create info window
          var infoWindow = new google.maps.InfoWindow({
            content   : $marker.html()
          });

          infoWindow.open( map, marker );
          infoWindows.push(infoWindow);
        });
      }  

    }


    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 4.3.0
    *
    *  @param map (Google Map object)
    *  @return  n/a
    */

    function center_map( map ) {

      // vars
      var bounds = new google.maps.LatLngBounds();

      // loop through all markers and create bounds
      $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

      });

      // only 1 marker?
      if( map.markers.length == 1 )
      {
        // set center of map
          map.setCenter( bounds.getCenter() );
          map.setZoom( 16 );
      }
      else
      {
        // fit to bounds
        map.fitBounds( bounds );
      }

    }

    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type  function
    *  @date  8/11/2013
    *  @since 5.0.0
    *
    *  @param n/a
    *  @return  n/a
    */
    // global var
    var map = null;

    $(document).ready(function(){

      $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

      });

    });

    })(jQuery);

possible duplicate of [Google Maps API - only one infowindow open at once](http://stackoverflow.com/questions/33713676/google-maps-api-only-one-infowindow-open-at-once) — geocodezip, Mar 29 '17 at 05:25
possible duplicate of [Auto close InfoWindow in googlemap](http://stackoverflow.com/questions/28138468/auto-close-infowindow-in-googlemap) — geocodezip, Mar 29 '17 at 05:26
possible duplicate of [close InfoWindow before open another](http://stackoverflow.com/questions/14321808/close-infowindow-before-open-another) — geocodezip, Mar 29 '17 at 05:27

taymyinl · Answer 1 · 2017-03-29T07:02:45.097

0

I changed a little in your code.

var infoWindows = [];
if( $marker.html() ){

    // Need to clear up old info windows before adding new ones
    for (var i = 0; i < infoWindows.length; i++) {
      infoWindows[i].setMap(null);
    }
  // show info window when marker is clicked
  google.maps.event.addListener(marker, 'click', function() {

  // create info window
    var infoWindow = new google.maps.InfoWindow({
      content   : $marker.html()
    });

    infoWindow.open( map, marker );
    infoWindows.push(infoWindow);
  });
}

I hope it will work. If not, let me know more detail about your code. Thanks

edited Mar 29 '17 at 07:02

answered Mar 29 '17 at 06:39

taymyinl

295
4
15

I'm using your code but when I click on a marker I get the following error: `infoWindows is not defined` – codek Mar 29 '17 at 06:46
i edited in my answer. Add var infoWindows = []; in top of your codes. you need to declare variable of array (in your case, "infoWindows") before pushing objects into it. – taymyinl Mar 29 '17 at 06:48
thanks. It has fixed it and I'm not getting any error, still the problem is not solved, when I click another marker it keeps all `infowindows` opened – codek Mar 29 '17 at 06:52
try to put for looping out side of marker click event. or you can put your sample code on jsfiddle? – taymyinl Mar 29 '17 at 06:59

Close opened infowindows - google maps api

1 Answers1