Googlemap показывает серый ящик на всех браузерах

-2

У меня есть простой сайт тест, чтобы показать карту Google here:Googlemap показывает серый ящик на всех браузерах

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script> 
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script> 
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" /> 
<script type="text/javascript">$(document).ready(function() { 
    $("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382}); 
    /*var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    });*/ 
});</script> 
</head> 
<body style="width: 1000px; height: 600px;"> 
    <div id="googlemap" style="width: 1000px; height: 600px; ">abc</div> 
</body> 
</html>

страница просто показывает серый DIV без карты. Я искал на этом сайте, но ничего не работает (изменение размера окна, переполнение: видимое, ширина: 100% ... и т. Д.)

Дело в том, что я раскомментирую образец кода Google, он работает. Так что должно быть что-то не так с моим сценарием, файл GoogleMap_thread_view.js

(function ($) { 
var map, place, myMarker; 
$.widget('4phuong.GoogleMap', { 
    options: { 
     addr: 'unknown', 
     lat: 0, 
     lng: 0, 
     zoom: 2 
    }, 

    _create: function() { 
     var $widget = this; 
     $widget.element.children().hide(); 
     $widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>'); 
     $widget.element.append($widget._$container); 
     var mapOptions = { 
      center: new google.maps.LatLng($widget.options.lat, $widget.options.lng), 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.SMALL, 
       position: google.maps.ControlPosition.LEFT_BOTTOM 
      }, 
      mapTypeControl: false, 
      streetViewControl: false 
     }; 
     map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions); 

     myMarker = new google.maps.Marker({ 
      map: map, 
      title: $widget.options.addr, 
      position: new google.maps.LatLng($widget.options.lat, $widget.options.lng) 
     }); 
    }, 

    destroy: function() { 
     this._$container.remove(); 
     $.Widget.prototype.destroy.apply(this, arguments); 
     this.element.show(); 
    }, 

    control: function() { 
     return this._$control; 
    } 
}); 
}(jQuery));

Может кто-то пожалуйста, скажите мне, где я не прав?

источник

2015-05-17 YukiSakura

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

Вы ссылаетесь на 'document.getElementsByClassName ('map-canvas')' для вашей карты, но вы только создаете этот элемент динамически ранее в JS с '$ widget ._ $ container = $ ('

'); '- действительно ли' getElementsByClassName' возвращает вам карту div? – duncan

Привет @duncan. Да. Потому что я поместил скрипт в document.ready из jQuery. Я вижу, что браузер показывает серое окно. Когда я использую инструмент разработчика для просмотра DOM, я также вижу, что генерируются элементы Googmap. – YukiSakura

Я знаю причину. Это связано с тем, что я не придавал значения поле «зум» при создании карты. Он должен выглядеть следующим образом:

 var mapOptions = { 
      center: new google.maps.LatLng($widget.options.lat, $widget.options.lng), 
      zoom: $widget.options.zoom, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.SMALL, 
       position: google.maps.ControlPosition.LEFT_BOTTOM 
      }, 
      mapTypeControl: false, 
      streetViewControl: false 
     };

Это действительно глупо, поскольку Google должен использовать для него значение по умолчанию.

источник

2015-05-20 10:14:12 YukiSakura

Yup .. отсутствующий вариант масштабирования был проблемой .. –

Да, это странная реализация Google в моей точке зрения. Мне потребовалось много дней, исследуя :-) – YukiSakura

Очень верно. Когда я сравнивал прокомментированный код в html и файле GoogleMap_thread_view.js, единственным отсутствующим вариантом было масштабирование, вообще говоря, если зум не был указан, плагин должен принять значение по умолчанию, но этого не происходит –

Googlemap показывает серый ящик на всех браузерах

ответ

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