Серый ящик на API Карт Google V3

Похоже, что было обновлено API Карт Google, если значение пикселя для ширины & не установлено, тогда оно просто отображает серый квадрат. Проблема, с которой я столкнулась, - мне нужна карта полной ширины.Серый ящик на API Карт Google V3

Карта делает рендер, если вы перетаскиваете карту вправо, вы можете увидеть карту.

Я попытался добавить это событие google.maps.event.trigger(map, "resize"); Это не помогло.

Вот мой Markup

<div class="map-holder"> 
     <div id="google-map"></div> 
</div>

Вот мой JS

var map; 

function initialize() { 
    var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(XX.XXXXX, XX.XXXXX), 
     disableDefaultUI: true, 
     draggable: true, 
     scrollwheel: false, 
     scaleControl: false, 
     zoomControl: false 
    }; 

    map = new google.maps.Map(document.getElementById('google-map'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(XX.XXXXX, XX.XXXXX), 
     map: map, 
     title: 'Some place', 
     visible: true, 
     place: 'Some place' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

google.maps.event.addDomListener(window, 'resize', function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
});

источник

2015-09-09 Chris H

Как выглядит ваш CSS? Как вы включаете API? Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

Не могли бы вы принять ответ? –

Хорошо кажется, что я нашел исправить, просто добавьте номер 3,20 версии.

<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>

источник

2015-09-09 13:34:04

Хотите узнать, может ли кто-нибудь объяснить, почему это исправляет это? –

Можете ли вы предоставить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему? – geocodezip

Это исправило проблему и для меня. Я бы подумал, что опустить версию было бы последним? –

Эта ошибка может произойти, если вы забыли mapTypeId, который является обязательным атрибутом. Это также может произойти, если вы забудете передать параметры карты.

источник

2015-12-14 02:10:23

У меня была такая же проблема, и вот почему у меня была серая коробка и карта. У меня есть две вкладки - одна видимая и одна скрыта - одна карта находится внутри видимой, другая находится внутри скрытой - у меня есть абсолютно такой же минимальный код, чтобы инициализировать карты, отличные от идентификаторов div.

Я поместил скрытую карту div в видимую область и запустил - и она работала и отображалась точно так же, как и видимая.

Мораль моей истории - если он находится в скрытом DIV - это не будет правильно инициализировать - возможно, из-за DOM не делает некоторые вещи доступными благодаря display:none;

Я просто надеюсь, что это помогает - это не первый раз, когда я столкнулся с этим, поэтому я решил, что позволю брату моего кода знать сделку!

источник

2016-02-02 22:18:02

Попробуйте установить высоту и ширину вашего контейнера непосредственно в html-разметке вместо таблицы стилей или <style> тэг, т.е. в вашем случае:

<div id="google-map" style="width: 100%; height: 300px;"></div>

счастливым отображения!

источник

2017-12-12 14:58:03 Rom

Серый ящик на API Карт Google V3

ответ

Смежные вопросы