Google Map infoWindow.close()

• vespino

• March 11, 2016 at 3:37 am

I’m looking for a way to combine this example:

http://gmaps-samples-v3.googlecode.com/svn/trunk/single-infowindow/single-infowindow.html

with the Google Maps example provided by ACF. I’m hoping to only have 1 infoWindow open at the same time. In my current setup the windows keep opening.

		if( $marker.html() )
		{
			// create info window
			var infoWindow = new google.maps.InfoWindow({
				content		: $marker.html()
			});
	
			// show info window when marker is clicked
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.open( map, marker );
				/*$('.overlay').html($marker.html());
				$('.overlay').animate({width: 'show'});*/
			});
			
			google.maps.event.addListener(map, 'click', function() {
				infoWindow.close();
			});
		}

• James

• March 11, 2016 at 5:48 pm

Hi @vespino

ACF can only return the latitude, longitude and the address data of your Google map field. What you want to do with those data is up to you. You don’t have to follow the example code provided by ACF. For example, by following the source code of the page you shared, you can generate Javascript code that will do what you want like this:

...
...
    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

		<?php if( have_rows('locations') ): ?>
			<?php $i = 1; ?>
			<?php while ( have_rows('locations') ) : the_row();
				$location = get_sub_field('location');
				?>
				var marker<?php echo $i; ?> = new google.maps.Marker({
		      map: map,
		      position: new google.maps.LatLng(<?php echo $location['lat']; ?>, <?php echo $location['lng']; ?>)
		    });
				google.maps.event.addListener(marker<?php echo $i; ?>, 'click', onMarkerClick);
				<?php $i++; ?>
			<?php endwhile; ?>
		<?php endif; ?>
  });
</script>
...
...

I hope this makes sense.

• vespino

• March 11, 2016 at 7:14 pm

		if( $marker.html() )
		{
			// create info window
			var infoWindow = new google.maps.InfoWindow({
				content		: $marker.html()
			});
			
			infoWindows.push(infoWindow);
	
			// show info window when marker is clicked
			google.maps.event.addListener(marker, 'click', function() {

				//close all
				for (var i = 0; i < infoWindows.length; i++) {
				  infoWindows[i].close();
				}
																	
				infoWindow.open( map, marker );
			});
			
			google.maps.event.addListener(map, 'click', function() {
				infoWindow.close();
			});
		}

• adejones

• June 3, 2017 at 2:42 am

Hi vespino

I am having the same trouble you did, I used your code above but I got ‘Can’t find variable: infoWindows’ in the console.

When I changed all infoWindows to infoWindow I then got ‘TypeError: infoWindow.push is not a function. (In ‘infoWindow.push(infoWindow)’, ‘infoWindow.push’ is undefined)’

I’m assuming you have got yours working, could I please see your full script for the map?

Thanks

• lstreng

• June 20, 2017 at 9:17 am

I’m having the same problem as @adejones … got anymore info?

• jpvanmuijen

• August 1, 2017 at 6:10 pm

I was struggling with this as well, but it turns out you need to declare a global array at the top to push the infowindows into.
In case anyone’s interested:
At the top ( after (function($) { ) add var infoWindows = new Array(); , after which you can use the above infoWindows.push(infoWindow); and //close all part to push to and loop through the array.
Make sure to double check the upper/lower case W in infowindow/infoWindows.
Not sure if this is the most efficient way of doing this, but it works.

• futaba

• July 17, 2020 at 3:22 am

Thanks to @jpvanmuijen for pointing out the issue with the solved answer. Here is the portion the code that you need to use.

var infoWindows = [];

function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
        position : latLng,
        map: map
    });

    // Append to reference for later use.
    map.markers.push( marker );

    // If marker contains HTML, add it to an infoWindow.
    if( $marker.html() ){

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

        infoWindows.push(infoWindow);

        // Show info window when marker is clicked.
        google.maps.event.addListener(marker, 'click', function() {

            //close all
            for (var i = 0; i < infoWindows.length; i++) {
                infoWindows[i].close();
            }
            infoWindow.open( map, marker );

        });

        google.maps.event.addListener(map, 'click', function() {
            infoWindow.close();
        });
    }
}

• pierrebalian

• June 27, 2022 at 5:37 pm

Perfect, thank you.
This code should really be added to the acf example page.
https://www.advancedcustomfields.com/resources/google-map/

I think in most use cases users would only want a single infowindow open at a time.

@acf-support