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

Question

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

Answer 1

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

Answer 2

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

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

Также посмотрите на here

Answer 3

Привет, если вы используете переключатель в 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 4

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

Answer 5

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

img { 
max-width:50% 
} 

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

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

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

Answer 6

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

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

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

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

Answer 8

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

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

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