Карта Google поставляется частично, вместо изображений с сервера google появляется серая область

Ответ 1

Эта ошибка может возникнуть, если вы изменяете размер карты DIV. После изменения размера попробуйте вызвать функцию gmap.checkResize().

Ответ 2

Если вы используете v3 try

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

Также посмотрите здесь

Ответ 3

Привет, если вы используете toggle в div с контейнером карты, вы вызываете resizeMap в функции

associated with the trigger:
        $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
         resizeMap();
        return false;

затем resizeMap(); как это

function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}

не забудьте указать переменную map как глобальную;) приветствия

Ответ 4

Я нашел простое решение для частично загруженной карты google. Обычно это вызвано вызовом onLoad() в то время, когда остальная часть страницы (включая ваш элемент карты) не полностью загружена. Это вызывает частичную загрузку карты. Простым способом решения этой проблемы является изменение тега тега onLoad.

Старый способ:

onload="initialize()"

Новый способ:

onLoad="setTimeout('initialize()', 2000);"

Ожидается, что за 2 секунды до того, как Google Javascript обратится к правильным атрибутам размера. Также попробуйте очистить кеш браузера перед его попыткой; иногда он застревает там:)

Это моя верхняя часть Javascript на случай, если вам интересно (точно так же, как описано в Документации Google, но потому, что я вызываю Latitude и Longitude из переменных PHP, следовательно, PHP-фрагменты.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
    var marker = new google.maps.Marker({ position:point, map:map })    
}
</script>

Ответ 5

Я просто хочу добавить к этому обсуждению, что у меня тоже была проблема с серыми полосками, и это не было той же проблемой, что мне нужно было использовать функцию gmap.Resize, но это было в моем css. В моем css я имел

img { 
max-width:50% 
}

поэтому, когда я устанавливаю это в свой файл css

#map-canvas { 
max-width:none;
}

Проблема исчезла! Я просмотрел google, но не смог найти ответ.

Ответ 6

этот стиль решил мою проблему

#map_canvas img { max-width: none !important; }

Это заставляет браузер позволять карте быть такой же широкой, какой она должна быть - !important по существу означает "не перезаписывать этот стиль".

Ответ 7

Я решил это так, моя проблема была в ротационном устройстве, это решение отлично работает:

$scope.orientation = function(){
            var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            window.addEventListener(orientationEvent, function() {
                $interval(function(){
                    google.maps.event.trigger(map, 'resize');
                },100);
            });
        };
$scope.orientation();

Ответ 8

У меня возникла эта проблема во время работы над другими частями моего сайта, поэтому я не заметил ее правильно, когда она началась. Пройдя все изменения, которые я совершил в последний час, я наткнулся на виновника:

div
{
    [... other css ...]
    overflow: auto;
}

в моем css. Я удалил это и вуаля, он работает. (Конечно, я мог бы просто изменить атрибут переполнения на моем div div, но мне нужно только переполнение: auto на пару div.) Я уверен, что есть веская причина, почему, но я довольно новичок в этом, поэтому я не знать. В любом случае я надеюсь, что это может помочь кому-то.