Google Maps предоставляет серый/бежевый коробок

Я хочу, чтобы вставлять карту Google с помощью v3 API:Google Maps предоставляет серый/бежевый коробок

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta charset="utf-8" /> 
    </head> 
    <body> 
    <div class="map"></div> 
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=mykey&sensor=false&region=DE"></script> 
    <script> 
     new google.maps.Map(document.querySelector('div.map'), { 
     zoom: 4, center: new google.maps.LatLng(0, 0) 
     }); 
    </script> 
    </body> 
</html>

В результате он успешно загружает весь Аякс и делает их в div.map но карта бежевая/серая, а элементы управления отсутствуют.

Примечание:

ключа = MyKey является заполнителем для моего ключа API
document.querySelector возвращает узел соответствующего элемента и работать на моем браузере
опуская тип карты разрешено как ROADMAP по умолчанию
вам не нужно вводить логику в нагрузка обертка для событий, как есть в конце документа

Так что, пожалуйста, не советуйте ничего об этом, я уже пробовал!

Так что я делаю неправильно?

Бодо

источник

2013-06-13 bodokaiser

Что определяет размер карты DIV? – geocodezip

@geocodezip в исходном примере есть ширина bootstrap8 для ширины, и я сам даю ей высоту 400px – bodokaiser

@geocodezip только что попытались удалить классы и поместить их где-нибудь без ограничений css, и результат был таким же. Просто ящик был больше – bodokaiser

MapTypeId является требуется на documnetation

mapTypeId MapTypeId T он начальный Map mapTypeId. Требуется.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta charset="utf-8" /> 
    </head> 
    <body> 
    <div class="map" style="height:500px; wiodth:600px;"></div> 
    <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&region=DE"></script> 
    <script> 
     new google.maps.Map(document.querySelector('div.map'), { 
     zoom: 4, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
    </script> 
    </body> 
</html>

working example

источник

2013-06-13 16:16:31 geocodezip

Вы, где это правильно. V3 Экспериментальные установки ROADMAP по умолчанию, но 3.12 требует его. Спасибо! – bodokaiser

Согласно Google's examples, добавьте немного CSS, чтобы сделать карту шоу в определенном размере:

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    .map { height: 100% } 
</style>

Попробуйте назначить карту к переменной:

var map = new google.maps.Map(...)

источник

2013-06-13 15:06:04 duncan

1. попробовал css => ничего не изменил (как я понял до сих пор css только для мобильной совместимости) 2. присвоение карте также не вносило изменений – bodokaiser

может быть что-то не так с url-схема, которую я использую для запроса api (region?) – bodokaiser

нет, это должно быть хорошо AFAIK – duncan

Google Maps предоставляет серый/бежевый коробок

ответ

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