Google Maps API V3 : 이상한 UI 디스플레이 결함 (스크린 샷 포함)

Google Maps API V3 : 이상한 UI 디스플레이 결함 (스크린 샷 포함)

---

Google지도 UI 구성 요소에서이 이상한 결함을 일으키는 원인에 대한 아이디어가있는 사람은 여러분의 의견을 정말 감사드립니다!

지도는 다음으로 생성됩니다.

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

마커가 없어도 글리치는 동일합니다.

---

우리는 같은 문제에 부딪 혔습니다. CSS 디자이너는 다음 스타일을 사용했습니다.

style.css

img {max-width: 100%; }

확대 / 축소 컨트롤을 비활성화하는 대신 다음과 같이 map_canvas 요소에 대한 img 스타일을 재정 의하여 문제를 해결했습니다.

style.css :

#map_canvas img { max-width: none; }

이제 줌 컨트롤이 올바르게 표시됩니다.

"img max-width : 100 %"설정은 반응 형 / 유동적 웹 사이트 디자인에 사용되는 기술로, 브라우저 크기가 조정될 때 이미지 크기가 비례 적으로 조정됩니다. 분명히 일부 CSS 그리드 시스템은 기본적 으로이 스타일을 설정하기 시작했습니다. 유동 이미지에 대한 자세한 정보는 http://www.alistapart.com/articles/fluid-images/ Google지도와 충돌하는 이유를 모르겠습니다.

---

최신 버전의 Google지도 API를 사용하려면 다음이 필요합니다.

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>

---

확대 / 축소 컨트롤에 문제가있는 것 같습니다. zoomControl:false옵션에 추가해보십시오 .

실제로 일반 확대 / 축소 슬라이더가 페이지 왼쪽에있는 것 같습니다 (Firebug> Inspect Element 사용). CSS 충돌 일 수 있습니까?

---

이 문제를 해결했습니다.

CSS에 다음과 같이 추가했습니다.

img {max-width: 100%; height: auto;}

그것을 글로벌하게 만들지 마십시오.

---

이것은 나를 위해 일했습니다.

#map img { max-width: none !important; } (from Patrick's answer)

"! important"속성은 다른 스타일을 재정의합니다. #map은 새 개체 Gmap을 선언 할 때 할당 된 ID입니다.

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

---

Dreamweaver 유동 격자 기능을 사용하는 경우 기본 설정은 다음과 같습니다.

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

이 시도:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

코드를 그대로 교체하십시오.

---

부트 스트랩 (버전 2.3.2 기준)은 수락 된 답변과 같은 방식으로 이미지를 엉망으로 만듭니다.

사실 저는 Haroldo의 웹 사이트에서 사용 된 디자인이 Bootstrap을 사용한다고 생각합니다.

아무도 Bootstrap에 대해 언급하지 않았기 때문에 이것을 게시하고 있으며 누군가 Bootstrap 관련 솔루션을 찾고있을 수 있습니다.

---

내 Square Space 웹 사이트에서이 문제가 발생했습니다. CSS 스타일 시트에 액세스 할 수 없었습니다. html 문서를 포함하고 있으므로 인라인 CSS를 사용하여 문제를 해결할 수 있습니다. 나는 사이트 전체를 변경하는 대신 컨테이너의 스타일을 수정했습니다. 내가 한 일은 다음과 같습니다.

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>

참고 URL : https://stackoverflow.com/questions/7471830/google-maps-api-v3-weird-ui-display-glitches-with-screenshot