Google Maps API - карта не помещается на фрейм

Question

Ссылка: http://www.bastosviegas.com/mapa (пожалуйста, наведите курсор на "interactivo", чтобы увидеть карту Google)

Как вы можете видеть, карта не центрирована в правильных координатах и ​​выдает ошибки, пока вы не развернете /сверните страницу.

Кто-нибудь еще сталкивался с этой ошибкой?Если да, то как ты правильно понял?

Answer 1

Это не ошибка, каждый раз, когда вы манипулируете div, который содержит карту, вы должны вызывать изменение размера карты с помощью этого триггера: google.maps.event.trigger(map, 'resize');

Я бы добавил этот триггер в событие mouseover.

Вот пример:

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');
    });

}

Пример скрипта приведенного выше кода