Google Maps Resize not working

I'm using Google Maps in a (initially hidden) tab, with the map being generated from the sample code provided by the Wordpress Advanced Custom Fields plugin.

My map is opening with tiles missing. I understand this is because the tab is initially hidden,and there are various solutions using google.maps.event.trigger(map, "resize") but for the life of me I can't get this working.

Here's the acf code with the basic ammendments I've found, but still not working:

        (function($) {
            var map;
            function render_map( $el ) {
                var $markers = $el.find(".marker");
                var args = {
                    zoom        : 16,
                    center      : new google.maps.LatLng(0, 0),
                    mapTypeId   : google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map( $el[0], args);
                map.markers = [];
                $markers.each(function(){
                    add_marker( $(this), map );
                });
                center_map( map );
            }

            function add_marker( $marker, map ) {
                var latlng = new google.maps.LatLng( $marker.attr("data-lat"), $marker.attr("data-lng") );
                var marker = new google.maps.Marker({
                    position    : latlng,
                    map         : map
                });
                map.markers.push( marker );
                if( $marker.html() )
                {
                    var infowindow = new google.maps.InfoWindow({
                        content     : $marker.html()
                    });
                    google.maps.event.addListener(marker, "click", function() {
                        infowindow.open( map, marker );
                    });
                }
            }

            function center_map( map ) {
                var bounds = new google.maps.LatLngBounds();
                $.each( map.markers, function( i, marker ){
                    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
                    bounds.extend( latlng );
                });

                if( map.markers.length == 1 )
                {
                    map.setCenter( bounds.getCenter() );
                    map.setZoom( 16 );
                }
                else
                {
                    map.fitBounds( bounds );
                }

            }
            $(document).ready(function(){
                $(".acf-map").each(function(){
                    render_map( $(this) );
                });
            });
            $(document).on("click", "#map-tab", function() {
                alert("clicked");
                google.maps.event.trigger(map, "resize");
                map.setCenter( bounds.getCenter() );
                map.setZoom( 16 );
            });
        })(jQuery);

Can anyone suggest what I'm doing wrong? Very grateful for any assistance

Answers


You need to do the fitBounds operation after the map has been rendered (after it is shown and has the final size). Currently it is being done when the map is hidden so it is fitting to a zero size map. Note that if you click the "Location mentioned" tab twice, it renders the tiles, but the center is still in the upper left hand corner.

proof of concept example (Show/Hide does fitBounds after the div is shown, Show 1/Hide 1 uses your code)


First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:

<li onclick="reloadmap()">

And in the map script right after the

google.maps.event.addDomListener(window, 'load', initialize);

put this:

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}

Need Your Help

Bundle the JAR File into an App Package with Preloader JavaFx

java ant package preloader

I'm trying to create an app package with preloader class using ant. With the following build.xml file the app is successfully created. After double click on Viewer.app the preloader screen doesn't ...

Heroku, Rails 4, and Rack::Cors

heroku ruby-on-rails-4 cors

I am trying to use Rack::Cors with my Rails 4 application so that I can do a JSON based API.