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

Question

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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>

Answer 4

Привет, если вы используете переключение в 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() );
}

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

Answer 5

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

img { 
max-width:50% 
}

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

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

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

Answer 6

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

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

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

Answer 7

Вышеуказанные решения у меня ничего не работают.

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

Изменить

display:none

К

visibility:hidden

Answer 8

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

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

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

Answer 9

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

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