Multiple Google maps bug

Question

I try to display several custom google maps on a single page, but when one is displaying, the other one is bugged, as you can see below : enter image description here

I don't feel like it comes from my code as both containers fit the correct size (and the Google logo and "Terms of Use" are correctly displayed). However the "map tiles" are not displayed in the second map and a grey background is applied instead.

Any idea/suggestion?

EDIT : The first map seems to be always displayed and the other ones always bugged.

That second map looks the way maps do when they need their resize function called. — Andy, Nov 04 '13 at 15:45
Mmh. I hoped it was a known bug. This example comes from Chrome and also happens on Firefox. And actually this does not happen everytime and sometime the second one is bugged but not the first one... I load the map data using json-p, so I guess it's "first come first served". And showing the code is pretty tricky as there are many files with many methods... I'll try to figure something out. — Simon, Nov 04 '13 at 15:45
Give `google.maps.event.trigger(secondmap, 'resize');` a go and see what happens. — Andy, Nov 04 '13 at 15:47

score 0 · Answer 1 · answered Nov 04 '13 at 16:01

0

Give google.maps.event.trigger(secondmap, 'resize'); a go and see what happens.

answered Nov 04 '13 at 16:01

Andy

61,948
13
68
95

I've found some sugar around your own answer : http://stackoverflow.com/questions/17059816/google-maps-v3-load-partially-on-top-left-corner-resize-event-does-not-work And another one here : http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div But despite the fact that it seems to match my problem, it does not solve it. I still have this issue. – Simon Nov 04 '13 at 16:39

Simon · Accepted Answer · 2013-11-05T10:29:18.930

I've finally found how to fix my problem which is a mix between @Andy's solution and mine. The resize event must indeed be triggered, however the zoom level and the map center are not properly displayed, as you can see below :

enter image description here

To update the zoom level and the center, I use this home-made method which updates the bounds of my map depending on the map markers :

var updateBounds = function ( map, markers ) {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0, len = markers.length ; i < len ; i++ ) {
        bounds.extend ( markers[i].marker.position );
    }

    // extend bounds using two invisible markers so the markers don't get too close to the map borders
    var
        extendPoint1 = new google.maps.LatLng ( bounds.getNorthEast().lat() + 0.001, bounds.getNorthEast().lng() + 0.001 ),
        extendPoint2 = new google.maps.LatLng ( bounds.getNorthEast().lat() - 0.001, bounds.getNorthEast().lng() - 0.001 );

    bounds.extend ( extendPoint1 );
    bounds.extend ( extendPoint2 );

    map.fitBounds ( bounds );
};

Multiple Google maps bug

2 Answers2