Support

Account

Home Forums Front-end Issues ACF Google Maps Rendering

Solved

ACF Google Maps Rendering

  • 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>
  • 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 šŸ™‚

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

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

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

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

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

You must be logged in to reply to this topic.