Support

Account

Home Forums ACF PRO Google Map not loading marker – loading ocean

Helping

Google Map not loading marker – loading ocean

  • Hey everyone!

    I’ve been using ACF Pro to add Google Maps (with markers) to sites for a while now, and have recently run into a problem that I can’t seem to solve.

    I have followed the documentation on how to add a map with a marker, including adding the Google API Key via the new filter. I’ve also pulled code from existing projects (which is essentially the same as the code from the documentation, with minor changes to variable names).

    I’m not receiving any errors in the Console, and the Maps (both back-end and front-end) are visible… However, the front-end map isn’t populating with a marker despite the address existing in the field in the back-end. Instead, it’s populating with a location in the middle of an ocean.

    google-map-init.js

    (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 = {
                zoom        : 14,
                center      : new google.maps.LatLng(0, 0),
                mapTypeId   : google.maps.MapTypeId.ROADMAP,
                styles       : [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#b9006e"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"simplified"},{"saturation":"-65"},{"lightness":"45"},{"gamma":"1.78"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"saturation":"-33"},{"lightness":"22"},{"gamma":"2.08"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"gamma":"2.08"},{"hue":"#"}]},{"featureType":"transit.station.airport","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.rail","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.rail","elementType":"labels.icon","stylers":[{"visibility":"simplified"},{"saturation":"-55"},{"lightness":"-2"},{"gamma":"1.88"},{"hue":"#ffab00"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#bbd9e5"},{"visibility":"simplified"}]}]
            };
            
            // 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
            });
    
            // add to array
            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 );
                });
            }
        }
    
        /*
        *  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( 14 );
            } 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);

    single-events.php

    
    <?php $venue_address = get_field( 'event_address' ); ?>
    <?php if( !empty($venue_address) ): ?>
    	<div class="acf-map">
    		<div class="marker" data-lat="<?php echo $venue_address['lat']; ?>" data-lng="<?php echo $venue_address['lng']; ?>"></div>
    	</div>
    <?php endif; ?>

    Note: API script is being called before the init file.

    Any help would be appreciated.

  • Hi @orbital,

    I recently ran into this issue and the cause was calling the Google map JS several times on the page. This caused several map objects to be created on the page and the map getting centered on the ocean.

    Please check if this is the case.

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

You must be logged in to reply to this topic.