Google지도에 영향을주는 Twitter 부트 스트랩 CSS

Twitter Bootstrap을 사용하고 있으며 Google지도가 있습니다.

마커와 같은지도의 이미지가 부트 스트랩의 CSS에 의해 왜곡됩니다.

부트 스트랩 CSS에는 다음이 있습니다.

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

max-widthFirebug를 사용하여 속성을 비활성화하면 마커 이미지가 정상적으로 나타납니다. Bootstrap CSS가 Google지도 이미지에 영향을 미치지 않도록하려면 어떻게해야합니까?

Bootstrap 2.0을 사용하면 트릭을 수행하는 것처럼 보입니다.

#mapCanvas img {
  max-width: none;
}

지형 및 오버레이에 대한 드롭 다운 선택기에 문제가 있으며, 둘 다 추가하면 문제가 해결됩니다.

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
} 

두 번째 스타일은 일부 브라우저에서 지형 및 오버레이 상자와 관련된 다른 문제입니다.

지도 캔버스 div에 id를 지정하십시오 map_canvas.

이 부트 스트랩 커밋 에는 max-width: noneid에 대한 수정 사항 이 포함되어 있습니다 map_canvas(하지만 작동하지 않습니다 mapCanvas).

이 답변 중 어느 것도 나를 위해 일하지 않았으므로 내 div로 이동하여 해당 클래스의 "gm-style"인 새 div를 보았으므로 CSS에 넣었습니다.

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

.. 그리고 그것은 나를 위해 문제를 해결했습니다.

max-width : none;을 사용하여 CSS 섹션의 max-width 규칙을 재정의하려고합니다. 이것은이 문제를 해결하는 방법 인 것 같습니다

gmap4rails gem을 사용하면 #MapCanvas를 변경해도 효과가 없었지만

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

gmaps4rails를 사용하고 있습니다.이 수정은 나를 위해했습니다.

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

최신 트위터 부트 스트랩 2.0.4는이 수정 사항을 직접 포함합니다.

트위터 부트 스트랩의 데모 페이지에서와 같이 a (div class = "container")로 컨텐츠를 래핑하는 경우 style = "height : 100 %"를 추가해야합니다.

모든 브라우저에서 인쇄를 사용하여 맵을 인쇄하는 데 문제가 있습니다. 은 img { max-width: 100% !important; }: 위의 코드에 의해 고정되지 않습니다 당신이 추가 할 필요가 !important과 같이 선언 :

@media print {
  img {
    max-width: auto !important;
  }
}

또한 box-shadow를 꺼야했고 포함 순서대로! important 플래그를 추가했습니다.

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}

모든 답변은 max-widht : none

나를 위해, 최대 높이 : 상속받은 .....

사람들은 #map, #map_canvas 등을 사용하고 있습니다. 부모 div를보십시오. 파란색이면 #blue img {}입니다.