[javascript] Google지도 확대 / 축소 컨트롤이 엉망입니다

Google Maps API (v.3)를 사용하여 몇 개의 마커가있는지도를 표시합니다. 최근에지도를 확대 / 축소하는 데 사용 된 컨트롤이 엉망인 것으로 나타났습니다 (항상 그렇지는 않았습니다). 나는 원인이 무엇인지 전혀 모른다.

여기에 이미지 설명을 입력하십시오

최신 정보

이 게시물에는 원래 문제를 볼 수있는 페이지에 대한 링크가 있었지만 링크가 손상되었으므로 제거했습니다.



답변

CSS가 엉망이되었습니다. max-width: 100%;814 행에서 제거 하면 확대 / 축소 컨트롤이 다시 잘 보입니다. 이러한 버그를 피하려면 CSS에서보다 구체적인 선택기를 사용하십시오.


답변

#myMap_canvas img {
    max-width: none;
}

나를 위해 수정했지만 @Ben의 질문에 대한 의견을 지적하고 싶습니다. “is map_canvas를 map div id로 사용하면 Bootstrap 에서이 문제가 발생하지 않습니다”. 그가 맞아. Bootstrap을 사용하고 있지 않지만 div ID를 변경 한 후에 문제가 발생하기 시작했습니다.

map_canvas로 다시 설정하면 최대 너비 변경없이 수정했습니다.

<div id="map_canvas"></div>


답변

부트 스트랩을 사용하는 경우 “google-maps”클래스를 제공하십시오. 이것은 나를 위해 일했습니다.

대안으로 Google지도 div에 대한 모든 것을 일종의 마지막 리조트 솔루션으로 재설정 할 수 있습니다.

HTML :

<div class="mappins-map"><div> 

CSS :

.mappins-map img {
    max-width: none !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


답변

@ Max-Favilli 답변을 공유하십시오.

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

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

@ Max-Favilli 덕분에

https://stackoverflow.com/a/19339767/3070027


답변

Twitter 부트 스트랩 사용자 인 경우이 줄을 CSS에 추가해야합니다.

.gmnoprint img { max-width: none; } 


답변

나는이 문제도 가지고 있었고

.google-maps img {
    max-width: none;
}

작동하지 않았다. 나는 결국 사용했다

.google-maps img {
    max-width: none !important;
}

그리고 그것은 매력처럼 작동했습니다.


답변

Yahoo의 Pure CSS를 사용하는 경우 div에 Bootstrap과 같은 “google-maps”클래스를 제공하고이 규칙을 CSS에 넣으십시오.

.google-maps img {
    max-width: none;
    max-height: none;
}

내가 알 수있는 한, 순수 CSS는이 문제를 독자적으로 해결할 수있는 방법이 없습니다.