Карты Google не отображаются полностью на странице?

Question

У меня есть Google Maps на моей странице с поисковой панелью, которую я создал сам, которую можно отображать и скрывать по желанию. Он покрывает, скажем, 200 пикселей карты на стороне. Дело в том, что когда я изменяю размеры моей карты или около того, область, где перекрывается панель, не обрабатывается, то есть карта по какой-то причине не отображается там.

Проверьте эту ссылку

В поле введите, скажем, OMDB, который является кодом icao для аэропорта, и нажмите enter.

Результаты отображаются, и вы видите панель. Теперь нажмите на ссылку в полноэкранном режиме, а затем на вкладку «Аэропорты», чтобы убрать панель - теперь вы видите, что часть карты вообще не отображается ... Мне нужно перетащить карту вокруг, и это только частично отображает эта область. Как я могу это исправить?

К вашему сведению, я запускал его в Google Chrome, Firefox и IE8 в Windows XP. Есть ли способ, чтобы заставить полный рендеринг карты или около того? Это довольно странная проблема, и может ли она быть связана с моим кодом или это проблема хоста? Или Google просто не любит меня? (

РЕДАКТИРОВАТЬ: См. Большое уродливое пятно на стороне. Это неопределяемая область, где карта должна была быть визуализирована также. Никакое увеличение масштаба и панорамирование не помогает очистить это: (

Answer 1

Я не могу воспроизвести проблему, с которой вы столкнулись, но она похожа на другую проблему, с которой я столкнулся на картах Google.

Похоже, что вы, вероятно, сталкиваетесь с тем, как карты Google определяют, какие плитки отображаются. Он рассчитывает это только один раз, когда карта загружается в div в первый раз, и если div увеличивается, то будет нарисовано недостаточно карты. К счастью, с этим легко иметь дело. в любое время, когда размер контейнера может быть изменен, используйте метод checkResize() в экземпляре карты, и область отсечения будет пересчитана из текущего размера контейнера.

Answer 2

Да, вы ДОЛЖНЫ указать реальную высоту пикселей и ширину контейнера DIV. Это на самом деле подробно описано в Google API.

Используя что-то вроде этого:

<div id="map_canvas" style="width:500px;height:500px;"></div>

вместо

<div id="map_canvas"></div>

ты будешь дома свободен!

Answer 3

Насколько я вижу, он отлично работает на OS X 10.6.2 в Google Chrome.

http://i33.tinypic.com/sfe3ah.png

Единственная проблема в том, что аэропорт Копенгагена находится совсем рядом с местом, которое подразумевает ваше приложение. И LAX находится в середине океана; -)

Edit:
Я вижу ваш скриншот, и мне кажется, что Google Maps каким-то образом не отображает ту часть карты, которая была покрыта панелью поиска и результатов поиска, и после этого рендеринг не запускается правильно при скрытии панели поиска.

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

В качестве альтернативы вы можете попробовать вручную запустить некоторые из событий, которые, по вашему мнению, могут вызвать повторное отображение карты, например google.maps.event.trigger(map, 'resize').

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

Answer 4

Я столкнулся с той же проблемой, когда пытался загрузить карту Google в диалоговом окне. Как будто карта Google не была правильно отображена. поэтому я нашел решение, которое может решить вашу проблему ниже.

Я вызвал событие изменения размера карты Google после диалогового окна инициализации, проверьте приведенный ниже код.

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Пример:

Я загрузил карту с помощью вызова ajax, затем инициализировал диалог и, наконец, вызвал событие изменения размера карты Google.

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $('#inlineEditPopUp').dialog('open');
        google.maps.event.trigger(map, 'resize', function () {
            // your callback content
        });
    }
});

Answer 5

В Google Maps V3 немного волшебства, которое вам нужно, задокументировано здесь: https://developers.google.com/maps/documentation/javascript/reference#Map под событиями

Разработчики должны вызвать это событие на карте при изменении div size: google.maps.event.trigger (map, 'resize')

Хитрость заключается в том, чтобы знать, когда , чтобы вызвать это, что будет ситуативным в зависимости от вашего кода. Если вы используете Bootstrap 3 Modals, это прекрасно работает.

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, 'resize');
    });

Где gmap - это google.maps.Map объект, который вы создали.

Answer 6

Если вы используете плагин jQuery goMap , то вы должны использовать:

google.maps.event.trigger($.goMap.map, 'resize');

Хотя вы должны заключить это в событие, чтобы оно запускалось при отображении карты. Вот как я делаю это в моем коде:

$(document).on('click', '#mapClicker', 'initmap', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, 'resize');
      $.goMap.fitBounds();
   }, 100)
});

Answer 7

Я знаю, что этот вопрос немного устарел, но я только что столкнулся с подобной проблемой. Однако в моем случае я устанавливал карту для загрузки из тела (для полноэкранного эффекта) в пределах iframe.

Как упоминал Джей в своем ответе, необходимо указать width и height , чего я тогда не делал.

Я изменил:

<body style="margin:0;">

до:

<body style="margin:0;width:100%;height:100%">

и теперь он отлично загружается в Chrome, Firefox и Internet Explorer 10.

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

Привет

Answer 8

В моем случае, те же проблемы для устройств Mac на: Safari 5.1.7 (ОС Windows 10 [Извините]) Safari 5.1 (Ipad 1 [Старый извините]) Safari 10 (Iphone 6 Plus) Вот мое решение работает для меня: 1) захватить ширину браузера. 2) изменить параметр ширины стиля attr 3) изменить размер карты

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

Answer 9

function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:     google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});

google.maps.event.addListenerOnce(largeMap, 'idle', function(){
    google.maps.event.trigger(largeMap, 'resize');
    largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);

}

Answer 10

У меня была эта проблема, и я обнаружил, что единственное решение (в моем случае) состояло в том, чтобы инициировать изменение размера в строке после элемента. Я не могу сказать почему, но я нашел ветку, где у кого-то тоже было это решение. (извините, нет.) Моя установка была немного другой; это была страница со вставкой jQueryMobile, поэтому поздняя инстанциация может иметь отношение к моей проблеме. Надеюсь, это кому-нибудь поможет.

<div id="my-map"></div>
<script type="text/javascript">
  $('#my-map').height($("#my-map-container").height());
  $('#my-map').width($("#my-map-container").width());
  google.maps.event.trigger($('#my-map'), 'resize');
</script>