Google지도가 부분적으로 표시되고 Google 서버의 이미지 대신 회색 영역이 표시됨

Google지도가 부분적으로 표시되고 Google 서버의 이미지 대신 회색 영역이 표시됨

---

때로는 Google지도가 부분적으로 다른 영역이 회색으로 표시됩니다. 한 가지 문제가 있습니다. Firebug를 시작하면 이미지가 회색 영역에 표시됩니다. 왜 이런 일이 일어나는지 모릅니다. 누구나 이것을 경험하고 해결책을 찾았습니다. 공유하십시오.

---

이 버그는지도의 DIV. 크기 조정 후 gmap.checkResize()함수 호출을 시도하십시오 .

---

v3를 사용하는 경우

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

여기도 보세요

---

안녕하세요,지도 컨테이너가있는 div에서 toggle을 사용하는 경우 함수에서 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() );
}

지도 변수를 전역으로 설정하는 것을 잊지 마십시오.)

---

부분적으로로드 된 Google지도에 대한 간단한 해결책을 찾았습니다. 일반적으로 onLoad()페이지의 나머지 부분 (지도 요소 포함)이 완전히로드되지 않을 때 호출되기 때문에 발생합니다 . 이로 인해 부분적인지도로드가 발생합니다. 이 문제를 해결하는 간단한 방법은 onLoadbody 태그 동작 을 변경하는 것 입니다.

옛날 방식 :

onload="initialize()"

새로운 방식 :

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

Google 자바 스크립트가 올바른 크기 속성에 액세스하기 전에 2 초 동안 대기합니다. 또한 시도하기 전에 브라우저 캐시를 지우십시오. 때로는 거기에 붙어 있습니다 :)

이것이 바로 구글 문서에 설명 된 당신이 궁금해 경우 내 최고 자바 스크립트 부분 (하지만 난이 호출이기 때문에 Latitude하고 LongitudePHP에서 변수, 따라서 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>

---

I just wanna add to this discussion that I had this problem with grey stripes aswell, and this wasen't the same issue that I needed to use the gmap.Resize Function but that it was in my css. In my css I had

img { 
max-width:50% 
}

so when I set this in my css file

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

The problem disappered! I looked all over google but couldn't find this answer.

---

this style solved my problem

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

This forces the browser to allow the map to be as wide as it needs to be - the !important essentially means "do not overwrite this style".

---

The above solutions nothing works for me.

I have used display:none for my map, By changing it to visibility:hidden it works fine for me.

Change

display:none

To

visibility:hidden

---

I solved it this way, my problem was in the rotation device, this solution works great:

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

---

I had this issue pop up while working on other parts of my site so I didn't notice it right when it started. After going through every change I had made over the last hour, I came across the culprit:

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

in my css. I removed that and voila, it works. (Of course, I could just change the overflow attribute on my map div but I only need overflow: auto on a couple divs.) I'm sure there's a good reason why but I'm pretty new at this so I don't know. Anyways I hope this can help someone.

참고URL : https://stackoverflow.com/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server