Карты Google серые

Я использую карты Google в мобильном приложении, используя html и javascript. Когда я загружаю карту, я могу видеть только 5% карты в верхнем левом углу. 95% контейнера div серого. Когда я хочу проверить div с Firebug, вся карта загружается внезапно. Что это может быть? Я попробовал уже несколько потоков Stackoverflow, но ни одно решение для меня не работало. Спасибо.

код:

<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">       </script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>

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

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.92, 151.25),
       mapTypeId: google.maps.MapTypeId.ROADMAP                                
});

index.js

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
});

Когда я использую атрибуты div, измеренные в% или em, он вообще не работает.

Ответы

Ответ 1

Попробуйте также вызвать метод изменения размера документа:

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});

Ответ 2

Проверьте, соответствует ли ваш центр или другие свойства правильной. По моему случаю, свойство центра было неинтерпретируемым по карте google; хотя страница была абсолютно безошибочной с точки зрения css и jsp, она показывала мне только серая карта все время.

Ответ 3

В моем случае просто вызов map.refresh() исправил эту проблему. Я использую Gmaps.

Ответ 4

Это произошло со мной, потому что mapTypeId был NULL.

Try:

map.setMapTypeId("roadmap");

Ответ 5

В моем случае я пропустил предоставление долготы, исходящей из внешнего API. После того как API был включен, чтобы включить Longitude, проблема была решена.

Ответ 6

У меня был аналогичный вопрос, используя angular 5
Я мог получить карту только для обновления/воссоздания с помощью setTimeout И a setZoom (хотя уровень один и тот же)

// set timeout.
setTimeout(() => {
    console.log("attempting refresh");
    google.maps.event.trigger(this.map, "resize");
    this.map.setZoom(8);
},
100);

Рабочий Plunker здесь

Что увлекательно об обновлении, так это то, что он перемещает карту во второй раз. Карты Google явно не являются без ошибок.

Ответ 7

В моем случае моя карта не загружалась, потому что я не установил zoom.

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10, // Forgot to set this prop
       center: new google.maps.LatLng(-33.92, 151.25)                               
});