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

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 %"를 추가해야합니다.

---

There is also an issue with printing maps using Print in any browser. The img { max-width: 100% !important; } will not be fixed by the code above: you need to add an !important declaration like so:

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

---

I also had to turn box-shadow off, and because of the order of my includes, I added the !important flag.

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

---

All answers were max-widht:none

for me, max-height:inherit worked.....

People are using #map, #map_canvas, etc. Look at your parent div. If it's blue, than it will be #blue img { }

참고URL : https://stackoverflow.com/questions/9141249/twitter-bootstrap-css-affecting-google-maps