How to add Info popup window to Google Map

• aaron4osu

• March 10, 2023 at 7:44 am

I’m trying to figure out how to add an info window popup to a map created with the Google Map field. I wanted to combine the Google Map field with a Text field for the info window headline, and a text area field for a short description (gm_headline and gm_description).

I have the basic map working using the Google Maps helper code and the code form the “Render a single marker onto a map” section. How to I add an the info window popup and event listener for it.

I guess where I’m getting confused is usually I would not have the helper code as a function I would have everything inline where I’m going to use the map and all the map code would be inside JS. But with the example provided on the ACF Google Map page you have some parts of map created in the helper code and others on the template side and the marker is added using html rather than inside the map js functions.

here is my JS

(function( $ ) {

/**
 * initMap
 *
 * Renders a Google Map onto the selected jQuery element
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @return  object The map instance.
 */
function initMap( $el ) {

    // Find marker elements within map.
    var $markers = $el.find('.marker');

    // Create gerenic map.
    var mapArgs = {
        zoom        : $el.data('zoom') || 16,
        styles: mapStyles,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], mapArgs );

    // Add markers.
    map.markers = [];
    $markers.each(function(){
        initMarker( $(this), map );
    });

    // Center map based on markers.
    centerMap( map );

    // Return map instance.
    return map;
}

/**
 * initMarker
 *
 * Creates a marker for the given jQuery element and map.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @param   object The map instance.
 * @return  object The marker instance.
 */
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 )
    };

    var logo = "";
    logo = "https://lovetheobx.com/wp-content/themes/gohocking-theme/assets/img/map-marker-60.png";

    // Create marker instance.
    var marker = new google.maps.Marker({
        position : latLng,
        icon: logo,
        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()
        });

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

/**
 * centerMap
 *
 * Centers the map showing all markers in view.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   object The map instance.
 * @return  void
 */
function centerMap( map ) {

    // Create map boundaries from all map markers.
    var bounds = new google.maps.LatLngBounds();
    map.markers.forEach(function( marker ){
        bounds.extend({
            lat: marker.position.lat(),
            lng: marker.position.lng()
        });
    });

    // Case: Single marker.
    if( map.markers.length == 1 ){
        map.setCenter( bounds.getCenter() );

    // Case: Multiple markers.
    } else{
        map.fitBounds( bounds );
    }
}

// Render maps on page load.
$(document).ready(function(){
    $('.acf-map').each(function(){
        var map = initMap( $(this) );
    });
});

})(jQuery);

and here is my php on the page template

<script async src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/mapHelperCode.js"></script>

        <?php 
        $location = get_field('google_map_location');
        if( $location ): 
            $gm_headline = get_field('gm_headline');
            $gm_description = get_field('gm_description');
         ?>
            <div id="map1" class="acf-map col-lg-7 bgImage" data-zoom="14">
                <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
            </div>
        <?php endif; ?>

• Paola

• March 11, 2023 at 7:15 am

Hi,
have you tried to do something like this?

<div id="map1" class="acf-map col-lg-7 bgImage" data-zoom="14">
    <?php 
        $location = get_field('google_map_location');
        if( $location ): 
            $gm_headline = get_field('gm_headline');
            $gm_description = get_field('gm_description');
         ?>
    
    <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
    
    <?php endif; ?>
</div>

• aaron4osu

• March 13, 2023 at 7:45 am

that’s what I already have… I’m not looking for a static marker. I’m trying to figure out how to add an event listener and info window popup for the marker.

• aaron4osu

• March 23, 2023 at 12:33 pm

any suggestions on how to add event listener and info window popup for the marker?

• EyesX

• May 24, 2023 at 2:46 pm

Put whatever you like to show in the .marker div

Something like

<div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>">
  <strong><?php echo esc_attr($gm_headline); ?></strong>
  <p><?php echo esc_attr($gm_description); ?></p>
</div>