[google-maps] Google지도에 영향을주는 Twitter 부트 스트랩 CSS

Program / 글쓴이

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