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

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

9 57
javascript google-maps google-maps-api-2

9 ответов:

эта ошибка может возникнуть, если вы изменяете размер карты DIV. После изменения размера, попробуйте позвонить

36

Если вы используете v3 попробуйте 

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

посмотрите здесь

79

Привет, если вы используете тумблер в DIV с контейнером карте вы называете несжижаемым в функции 

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

затем несжижаемым(); такой

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

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

7

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

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

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

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

img { 
max-width:50% 
}

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

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

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

4

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

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

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

1

выше решений не работает для меня.

я использовал display:none для моей карты, изменив его на visibility:hidden он отлично работает для меня.

изменить

display:none

до

visibility:hidden

1

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

$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();
0

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

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

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

0