Support

Account

Home Forums Front-end Issues Google Map infoWindow.close()

Solved

Google Map infoWindow.close()

  • 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();
    			});
    		}
  • 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.

  • 		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();
    			});
    		}
  • 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

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

  • 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.

  • 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();
            });
        }
    }
  • 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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.