Подтвердить что ты не робот

API Карт Google v3: Серый ящик, нет карты

В рамках гораздо более масштабного проекта мы пытаемся получить карту на сайте с помощью Google Map API v3. Я выполнил простейшие шаги, которые Google изложил, я пробовал копировать код прямо с других рабочих карт. Но независимо от того, что я делаю, все, что мы получаем, это серая коробка и карта.

Используя Firebug, я вижу информацию, пытающуюся заполнить карту, но она просто не отображается. Я пробовал jquery, jquery-библиотеки, специально созданные для карт Google, ничего не работает. Я был вверх и вниз по интернету и через файлы справки google api. Кроме того, проблема не локальная, поскольку я загрузил файл на несколько серверов и протестировал его на нескольких браузерах и компьютерах. Ничего не работает.

На данный момент это должно быть что-то глупое, что я пропускаю. Вот мой код.

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            //zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);

        function createMarker(point, text, title) 
        {
          var marker =
          new GMarker(point,{title:title});
          return marker;
        }
    }

</script>
  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Это работает для меня. Вам просто нужно установить параметр zoom:

ОБНОВЛЕНИЕ (от @user2652379): Вам нужно установить ОБА zoom и center параметры. Просто zoom не работает.

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            //imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);
       // map.addControl(new GSmallMapControl());
       // map.addControl(new GMapTypeControl());
       // map.addMapType(ROADMAP);
       // map.setCenter(
       // new GLatLng(37.4419, -122.1419), 13);
    }

</script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div>
</body>
</html>

Ответ 2

Другой случай - когда контейнер карты скрыт в момент инициализации карты. Например. вы делаете это внутри события bootstrap show.bs.modal вместо shown.bs.modal

Ответ 3

У меня была такая же проблема, и я столкнулся с множеством тем в stackoverflow, но ни у кого из них не было рабочего решения для меня. В конце концов я узнал, что он был вызван линией css, которую я добавил.

Все элементы на карте унаследовали

overflow:hidden;

Добавив следующую строку в мой CSS, она была исправлена ​​

#map * {
    overflow:visible;
}

Ответ 4

Я хотел бы добавить к нему быстрый комментарий, так как у меня была та же проблема с набором параметров zoom. Я узнал, что проблема была в моей теме css. В моей базовой теме у меня был следующий CSS:

img, embed, object, video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

Это испортило рендеринг карты, и после того, как я ее удалил, моя карта просто отлично.

Ответ 5

Также остерегайтесь иметь недопустимое значение широты или долготы для центра карты или ваших маркеров. Например, эта скрипка показывает Серую карту смерти, потому что центр карты находится на широте 131.044, что является недопустимым ( не от +90: -90).

function initMap() {
  var uluru = {lat: 131.044, lng: -25.363};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

Ответ 6

В моем случае я работал над картой с vue и модальным в библиотеке iview; и во время первого рендера он работал, но любой другой рендер отображал серый экран смерти. Я исправил проблему, установив функцию тайм-аута для отображения карты через 50 мс, чтобы дать модальное время для визуализации и быть видимым.

//Time out is crucial for the map to load when opened with vue
setTimeout(() => {
   this.showMap(id);
}, 50);

Ответ 7

У меня была такая же проблема. Я использовал карты Google в JQuery Accordion, и когда я расширяю div, карта состояла только из серой области. Я смог решить эту проблему, вызвав событие щелчка на указанном аккордеоне и установив контейнер карты в видимый.

Script:

<script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

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

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>

ASPX File/Html Markup:

<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>

Ответ 8

У меня была эта проблема с сайтом, над которым я тоже работаю. Мы делаем кое-что для всех тегов <img> для реагирования. Это исправление работает для нас для карты:

img {max-width: initial !important;}

Ответ 9

Для тех, кто может застрять вне зависимости от хороших решений, представленных здесь, попробуйте установить высоту и ширину вашего контейнера непосредственно в разметке html вместо таблицы стилей, т.е.

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

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

Ответ 10

В моем случае кто-то отбросил этот маленький выигрыш в файле responsive.css:

img {
  max-width: 100% !important;
}

Удалено, и теперь все нормально.

Ответ 11

Это может быть не для всех, но, возможно, это может помочь кому-то.

Я создавал маркеры в своей карте из атрибутов data, размещенных на элементе карты следующим образом: data-1-lat="2" data-1-lon="3" data-text="foo". Я помещал их в массив на основе порядка, который они были помещены в атрибуты данных.

Проблема в том, что IE и Edge (по какой-то безумной причине) инвертируют порядок атрибутов данных в теге HTML, поэтому я не смог правильно их извлечь из атрибутов данных.

Ответ 12

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

Боролся с этим в течение нескольких часов, но, обнаружив, что карта Google отображается с наложением серого поля, если карта отображается, когда она не видна, я использовал немного jQuery, чтобы мое приложение только создавало экземпляр и отображало карту, если карта видимо, вот так:

if ($("#myHomeMapHolder").is(":visible")) {
        if (homemap == null) {

            homemap = new google.maps.Map(document.getElementById("myHomeMapHolder"), myOptions);
            google.maps.event.addListener(homemap, 'click', function (event) {
                placeHomeMarker(event.latLng);
            });
        } else {
            homemap.setCenter(myLatlng);
        }


        if (homemarker == null) {
            homemarker = new google.maps.Marker({
                position: myLatlng,
                map: homemap,
                title: "Home"
            });
        } else {
            homemarker.setPosition(myLatlng);
        }
}

И вуаля, моя карта отображается только в том случае, если держатель карты виден, поэтому он никогда не отображается с серым прямоугольником.

Для всех, кто интересуется, myHomeMapHolder - это div, внутри которого находится карта.

Ответ 13

В моем случае (версия равна 3,30 при отправке), это потому, что идентификатор div ДОЛЖЕН быть "map" 

<div id="map"></div>
...
document.getElementById("map")