Google지도 API V3 : 이상한 UI 표시 오류 (스크린 샷 포함)

Question

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

와 결함도없이 마커와 동일합니다.

Answer 1

같은 문제가 발생했습니다. CSS는 디자이너가 스타일이 사용되었습니다

:

있는 style.css를

img {max-width: 100%; } 

대신 줌 컨트롤을 사용하지 않도록, 우리는 그렇게 같은 map_canvas 요소에 대한 IMG 스타일을 재정 의하여 문제를 해결 있는 style.css :

#map_canvas img { max-width: none; } 

줌 제어 이제 표시 괜찮아.

"img max-width : 100 %"설정은 반응 형/유동 웹 사이트 디자인에서 사용되는 기술로 브라우저의 크기를 조정할 때 이미지 크기가 비례하여 조정됩니다. 분명히 일부 CSS 그리드 시스템은 기본적으로이 스타일을 설정하기 시작했습니다. 여기 유체 이미지에 대한 자세한 정보는 : 구글 맵이 충돌 ...

Answer 2

줌 컨트롤에 문제가있는 것 같습니다. 옵션에 zoomControl:false을 추가하십시오.

실제로는 일반적인 줌 슬라이더가 페이지 왼쪽에 위치합니다 (파이어 버그> 요소 검사 사용). CSS 충돌 일 수 있습니까?

Answer 3

그럼 난 이것에 대한 수정 된 이유 http://www.alistapart.com/articles/fluid-images/ 확실하지 :

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

: 당신의 CSS에

을 당신은 같은 것을 추가

는 글로벌 공개하고 싶지 않아 시도하고 당신이 필요 당신이 Google지도 API의 최신 버전

Answer 4

을 :) 수정해야합니다 :

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

을

Answer 5

이 같아야 기본이 설정은 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%; 
} 

그냥 코드를 교체합니다.

Answer 6

부트 스트랩 (버전 2.3.2 현재)은 허용 된 답변과 같은 방식으로 이미지를 망칩니다.

실제로 Haroldo의 웹 사이트에 사용 된 디자인이 부트 스트랩을 사용하고 있다고 생각합니다.

아무도 부트 스트랩에 대해 언급하지 않았기 때문에 나는 게시하고 있습니다. 누군가가 부트 스트랩 특정 솔루션을 찾고있을 수도 있습니다.

Answer 7

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

Answer 8

이 나를 위해 일했다 : "중요한"

는 속성이 다른 스타일을 재정의해야합니다

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

이 #map이 새를 선언 할 때 할당 된 ID입니다 객체 Gmaps :

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