ACF Google Maps Rendering

• jasonblackdog

• May 8, 2015 at 8:23 am

Hello,
We are currently using the Google Maps as a repeater field and have setup the code according to this documentation (see acf-fields.png) : http://www.advancedcustomfields.com/resources/google-map/

I have all of the fields pulling in correctly and markers are where they should be. I am trying to accomplish a page where the Google Map is 100% width and height on the page, but when I attempt it via CSS the Google Map disappears completely. On the other hand, if I set a pixel height and 100% width, then the Google Map appears, but with more than half the map in grey squares (see attached grey.png). Is there any way to accomplish a 100% width and height map using this code? Any help would be GREATLY appreciated. Thank you!!

• Using WordPress Version 4.2.2
• All Plugins deactivated except for ACF version 4.4.1 & ACF Repeater Version 1.1.1

My CSS:

<style>
html {
	box-sizing: border-box;
	width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
}
body {
	margin: 0;
	color: #666;
	background: #fff;
	font: 26px/31px "sourcesanspro", "Arial", "Helvetica", sans-serif;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;	
	width: 100%;
        height: 100%;
        padding: 0;
}
.acf-map {
	width: 100%;
	height: 100%;
	position: relative;
        margin: 0;
        padding: 0;
}
</style>

Template Code

<?php if( have_rows('locations') ): ?>
 <div class="acf-map">
<?php while ( have_rows('locations') ) : the_row();                                                 
$location = get_sub_field('map_location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('location_title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('location_description'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

JS Code:

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
	<script type="text/javascript">
    (function($) {
    
    /*
    *  render_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 render_map( $el ) {
    
        // var
        var $markers = $el.find('.marker');
    
        // vars
        var args = {
            zoom		: 16,
            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 );
    
    }
    
    /*
    *  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( 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
    */
    
    $(document).ready(function(){
    	
        $('.acf-map').each(function(){
    
            render_map( $(this) );
    		
        });
		
		
    
    });
    
    })(jQuery);
    </script>

Additional Script Located in the footer.php file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery-1.11.2.min.js"><\/script>')</script>
<script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.main.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
      $(function() {
        $( "#tabs" ).tabs();
      });
 </script>

acf-fields.p....png

grey.png.png

• James

• May 8, 2015 at 11:09 am

Hi @jasonblackdog

To resolve this, you should trigger Google maps resize event manually. Try this: One function render_map(…), after the center_map(…), add this code:

google.maps.event.addListenerOnce(map, 'idle', function(){
     google.maps.event.trigger(map, 'resize');
     center_map(map);
 });

Hope this helps 🙂

• jasonblackdog

• May 9, 2015 at 12:22 am

Hello James,
Thank you but…I tried adding it after the center_map(…) code but it still renders with the grey. Any other options? Just to confirm here is what my code looks like after adding your recommended code:

<script type="text/javascript">
    (function($) {
    
    /*
    *  render_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 render_map( $el ) {
    
        // var
        var $markers = $el.find('.marker');
    
        // vars
        var args = {
            zoom		: 16,
            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 );
		
		google.maps.event.addListenerOnce(map, 'idle', function(){
			 google.maps.event.trigger(map, 'resize');
			 center_map(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( 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
    */
    
    $(document).ready(function(){
    	
        $('.acf-map').each(function(){
    
            render_map( $(this) );
    		
        });
		
		
    
    });
    
    })(jQuery);
    </script>

• jasonblackdog

• May 9, 2015 at 4:31 am

Alright, so I got what I wanted! Since I was using jQuery tabs on my page, I attached a click event to one of my tab links that loads the map. Now, it will only load the map when someone clicks that particular link/tab (which I’m okay with). So, on tab click, render map and resize to 100% width and height. Thank you @acf-support James for leading my in the right direction!

Here is my updated code:

<script type="text/javascript">
    (function($) {
    
    function render_map( $el ) {
    
        // var
        var $markers = $el.find('.marker');
    
        // vars
        var args = {
            zoom		: 16,
            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 );
		
		google.maps.event.addListenerOnce(map, 'idle', function(){
			 google.maps.event.trigger(map, 'resize');
			 center_map(map);
		 });
		 
    
    }
    
	
    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 );
    
            });
        }
    
    }
    
    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(function(){
        
		$( ".mapclick" ).one( "click", function() {
			//$('.mapclick').click(function(event) {			
          	$('.acf-map').each(function(){
				render_map( $(this) );
			});			
			
			$(window).resize(function() {
				$('.acf-map').height($(window).height() - 170);
			});
				
			$(window).trigger('resize');	
		});

		//$height = $('#wrapper').height();
    	//$('.acf-map').height($height);
		
    
    });
	
    })(jQuery);
    </script>

• bigdropgr

• May 29, 2015 at 12:33 am

Hi,

I’m trying to put the map in to a jQuery tab, just like you did. I’m using the Twitter Bootstrap as a framework and the bootstrap.min.js is loading on every page.

On your last post you wrote this
“…I attached a click event to one of my tab links that loads the map. Now, it will only load the map when someone clicks that particular link/tab (which I’m okay with). So, on tab click, render map and resize to 100% width and height….”

Can you please provide a little more info about this?
I want to make the map show properly but instead I only get only a part of it working (the upper left corner only show I get the same error like in your attached image).

Thank you in advance for your willingness to help!

• jasonblackdog

• May 29, 2015 at 1:06 am

Hey @bigdropgr what I used was an onclick function on one of my tab buttons. Specifically this part of my code is what renders the map and resizes it to 100% width and height:

$(document).ready(function(){
        
		$( ".mapclick" ).one( "click", function() {
			//$('.mapclick').click(function(event) {			
          	$('.acf-map').each(function(){
				render_map( $(this) );
			});			
			
			$(window).resize(function() {
				$('.acf-map').height($(window).height() - 170);
			});
				
			$(window).trigger('resize');	
		});

		//$height = $('#wrapper').height();
    	//$('.acf-map').height($height);
		
    
    });

So on one of my tab buttons, I have the class name “mapclick”. Then in my code, I have when the button “mapclick” is clicked, render the map and resize.

Here is my tabs code:

<ul class="products-list">
    <li class="active info countbutton"><a href="#info"><span class="text">Info</span></a></li>
    <li class="photo countbutton"><a href="#photo" class="photoclick"><span class="text">Photos</span></a></li>
    <li class="video countbutton"><a href="#video"><span class="text">Videos</span></a></li>
    <li class="map countbutton"><a href="#map" class="mapclick"><span class="text">Maps</span></a></li>
    <li class="hour countbutton"><a href="#hour"><span class="text">Hours</span></a></li>
</ul>

Let me know if this makes sense.

• bigdropgr

• August 18, 2015 at 8:49 pm

I apologise for the very long delay.

THANK YOU VERY MUCH!!!

This code work for me too! Now my map is fully functional!!

Greetings from sunny Greece!

• RRichardson

• February 2, 2016 at 10:57 am

Hi thank you so much for this solution @jasonblackdog.

I have had same issue and have used exact same code with partial success. I have multiple tabs with multiple maps, the first map on click renders correctly but then all other maps after render out in the middle of the ocean instead of the actual location.
So I am guessing this is re-centering problem? Not quite sure

$(document).ready(function(){

  $( 'a[data-toggle="tab"]' ).one( "click", function() {
  
  $('.acf-map').each(function(){
        render_map( $(this));
  });

  $(window).resize(function() {
        $('.acf-map').height($(window).height() - 170);

        });
          
        $(window).trigger('resize');
        //center = map.getCenter(); ???
        //map.setCenter(center);  ???
        
  });
});

I have also added this in too under the center_map() call

google.maps.event.addListenerOnce(map, 'idle', function(){
     google.maps.event.trigger(map, 'resize');
     center_map(map);
 });

• Chris Levin

• March 16, 2016 at 7:31 am

Hey @rrichardson I have the same issue. I tried creating another function, since I have two instances on a page where I need a map. The first one renders fine but if I click on another I’m in the ocean near Australia 🙂

I think it probably has to do with the each(function() part of the code. We want to make it so that the render_map function is called each time it is needed. Have you figured it out since your post??