Google Maps API - поведение странной карты со смещением

Question

Я добавляю карту рядом с формой на моей веб-странице. Идея состоит в том, что люди могут зарегистрироваться, и когда они вводят свой адрес и нажимают кнопку поиска, это ставит отметки в их доме, они должны сделать это до отправки формы (геолокация играет большую роль на моем сайте).

К сожалению, я добавил карту, но в окне карты сама карта выглядит смещенной. Смотрите изображение ниже, чтобы проиллюстрировать, что я имею в виду:

Я могу перетащить карту только из "отображенной" части поля. Если я выберу серую область, чтобы перетащить карту, произойдет сбой.

Есть идеи, что может вызвать это?

EDIT:

Вот мой инициализирующий карту Javascript, вызываемый при загрузке страницы.

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(52.428385,-3.560257);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("adminMap"), myOptions);

Вот моя карта CSS

#adminMap{
    float:left;
    width:270px;
    height:370px;
    margin-left:20px; 
}

Вот моя карта HTML

<div id="adminMap">
</div>

Answer 1

Я видел подобные вещи. Не имея доступа к какому-либо коду, лучше всего, если карта инициализируется в тот момент, когда контейнер div скрыт. Я видел, что вызывают такие симптомы. Попробуйте настроить карту так, как вы ее показываете, а не раньше.

Answer 2

Для полной визуализации карты при изменении видимости div вы можете использовать этот код.

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

Это переопределяет вашу карту внутри div и отобразит ее полностью.