Основной глюк Google Maps с использованием API V3

Question

изменить: теперь это решено, см. Мой ответ ниже

---

Ситуация:

1. Пользователь нажимает на карту-изображение
2. Google MapsAPI V3 загружается через ajax
3. карта отображается в диалоговом окне / лайтбоксе

Что происходит:

Карта отображается и все функции работают, однако естьсбой с верхним левым «квадратом» карты.

Я застрял!

---

изменить: теперь с кодом:

<div id="map_canvas"></div>
<script type="text/javascript">
    $(function() {          
            var latlng = new google.maps.LatLng(51.448359,-2.590559);
            var options = {
              zoom: 13,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 

            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.448359,-2.590559),
              map: map
            });
    })
</script>

Answer 1

Спасибо Альфонсо за то, что он указал мне правильное направление.

Проблема в размерах div карты, хотя #map_canvas имеет высоту и ширину, примененные с помощью css в верхней части документа, может показаться, что API Google Maps инициализируется до применения стиля ( теория может быть проверена с помощью dynatrace).

* Простое решение:

1) встроенные стили для ширины и высоты *

<div id="map_canvas" style="width: 700px; height: 400px"></div>

2) задержать загрузку карты с setTimeout()

Answer 2

Я думаю, что проблема в том, что карта инициализируется до завершения анимации изменения размера, и поэтому она думает, что она меньше.

Попробуйте настроить размер после завершения эффекта загрузки:

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

(вам нужно сохранить ссылку на объект "карта"