Support

Account

Home Forums General Issues Google Map size and not centered

Solving

Google Map size and not centered

  • The map is not showing correctly see image google

    Thanks for the help

  • Do you have any javascript errors or any CSS that might be clashing with the plugin?

    Also, ensure that none of your other plugins are clashing with the theme. 🙂

  • Hi @jagipson

    This looks like a rendering issue with the google map which was fixed in a recent version.

    The issue was caused buy the google map being hidden by a tab field.

    What version of ACF are you using?

    Thanks
    E

  • Ver 4.3.4
    How do I update? No update available from the wp dashboard

  • Hi @jagipson

    This is the latest version. I’ll do some testing and let you know what I find.

    Can you let me know if there is anything else about your fields that could effect the map’s display?

    Your screenshot shows a very customized UI, perhaps it is some custom JS which is causing the issue?

  • Same problem here, I’m using the Google Map in a lightbox. When I use it on a normal page it’s rendered correctly. No JS error is visible in the Chrome Inspector both times.
    Only when I resize my window, even by 1px, the map begins to render correctly in the lightbox.

    Google Map

  • Hi @elliot

    If you render a google map onto an element which is hidden, this is the result. To fix it, you need to refresh the google map like so:

    google.maps.event.trigger(this.map, 'resize');

    Thanks
    E

  • Thanks for your quick suggestion, however I tried for quite a while now but can’t seem to find where to add that rule.

    I’m using your code from the documentation:

    <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( 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
    */
     
    $(document).ready(function(){
     
    	$('.acf-map').each(function(){
     
    		render_map( $(this) );
     
    	});
     
    });
     
    })(jQuery);
    </script>
  • Hi @eaglejohn

    The code I wrote will need to be fired when the google map is shown in the lightbox.

    How have you got the lightbox appearing, and how do your render the map within the lightbox?

    Thanks
    E

  • I got the same error!

    Do not have JS error.

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

The topic ‘Google Map size and not centered’ is closed to new replies.