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

Ответ 1

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

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

Ответ 2

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

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

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

вместо

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

вы будете дома бесплатно!

Ответ 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').

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

Ответ 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
        });
    }
});

Ответ 5

Если вы используете плагин 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)
});

Ответ 6

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

Разработчики должны инициировать это событие на карте при изменении div размер: 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.

Ответ 7

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

Как сказал Джей в своем ответе, должна быть указана ширина и высота, которую я еще не сделал.

Я изменил:

<body style="margin:0;">

в

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

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

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

Привет

Ответ 8

У меня была та же проблема, и я решил ее просто, изменив ширину содержащего div на "px" вместо "%" (например, width = "700px" вместо "80%" ). Я предполагаю, что Google может сделать более качественный расчет таким образом... Я не гарантирую этого, но это помогло мне

Ответ 9

У меня была эта проблема, и я обнаружил, что единственным решением (в моем случае) было инициирование изменения размера внутри строки после элемента. Я не могу сказать, почему, но я нашел нить, где у кого-то тоже было это решение. (извините, нет ссылок). Моя установка была немного иной; это было из загруженной страницы 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>

Ответ 10

В моем случае те же проблемы для устройств Mac: Safari 5.1.7 (Os Windows 10 [Извините]) Safari 5.1 (Ipad 1 [Old Sorry]) Safari 10 (Iphone 6 Plus) Здесь мое решение работает для меня: 1) захват ширины браузера detect.min.js 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 */

Ответ 11

Я столкнулся с той же проблемой при настройке центра карты вручную. Я решил это с помощью кода ниже:

google.maps.event.trigger(map, "center_changed");

Ответ 12

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);

}