Question

Link: http://www.bastosviegas.com/mapa (please roll over “interactivo” to see the google map)

As you can see the map is not centered in the correct coordinates and it bugs until you maximize/minimize the page.

Anyone ran into this bug yet? If so how did you got it right?

Answer 1

This is not a bug, anytime you manipulate the div that contains the map you should trigger a map resize with this trigger: google.maps.event.trigger(map, 'resize');

I would add this trigger to the mouseover event.

Here is an example:

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    //when map is shown, trigger resize
    $('#hoverbtn').hover(function(){
       $('#map').show(); 
       google.maps.event.trigger(map, 'resize');
    });

}

Fiddle example of the above code