Google 지도 확대/축소 제어가 엉망입니다.

Google 지도 확대/축소 제어가 엉망입니다.

Google 지도 API(v.3)를 사용하여 몇 개의 마커가 있는 지도를 표시합니다.지도 확대/축소에 사용되는 컨트롤이 엉망이라는 것을 최근에 알게 되었습니다(항상 이렇지는 않았습니다).원인이 무엇인지 전혀 모르겠습니다.

갱신하다

이 게시물은 원래 이슈를 볼 수 있는 페이지에 대한 링크가 있었는데, 지금 링크가 끊어져서 삭제했습니다.

당신의 CSS가 망쳤어요제거한다.max-width: 100%;라인 814 및 확대/축소 컨트롤은 다시 정상으로 보입니다.이러한 버그를 방지하려면 CSS에서 보다 구체적인 선택기를 사용합니다.

#myMap_canvas img {
    max-width: none;
}

그것을 고쳐주었지만, 저는 또한 @Ben의 질문에 대한 의견을 지적하고 싶었습니다. "만약 당신이 is map_canvas를 맵 디비트로 사용한다면 이 문제는 부트스트랩에서 발생하지 않습니다."그가 맞아.부트스트랩을 사용하지 않고 있는데 디바이드를 변경한 후부터 문제가 발생하기 시작했습니다.

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

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

부트스트랩을 사용하는 경우 "구글 맵" 클래스를 지정합니다.이것은 저에게 효과가 있었습니다.

대안으로 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

트위터 부트스트랩 사용자라면 다음 행을 CSS에 추가해야 합니다.

.gmnoprint img { max-width: none; } 

저도 이 문제가 있었고 사용했습니다.

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

작동하지 않았습니다.결국 사용했습니다.

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

그리고 그것은 매력적으로 작용했습니다.

Yahoo의 Pure CSS를 사용하는 경우 div에 부트스트랩과 같은 "구글 맵" 클래스를 지정하고 이 규칙을 CSS에 넣습니다.

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

제가 알기로는 Pure CSS는 이 문제를 자체적으로 해결할 방법이 없습니다.

당신들이 내게 말했던 그 옵션들은 내 웹사이트에서 작동하지 않았습니다.

저는 부트스트랩 V3를 사용하며 기능에 중점을 둡니다.주된 이유는 제가 제 지도에 다른 ID를 주었고 노란색 스트리트 뷰 남자와 줌바를 표시하는 데 사용된 CSS 파일을 주었기 때문입니다.

map_canvas의 이름을 mapolder로 바꿨더니 잘 됐어요!어쨌든 CSS 파일을 조사해야 한다는 힌트에 감사드립니다!

위의 모든 솔루션과 다른 포럼의 다른 솔루션을 시도했지만 실패했습니다.코드가 완벽하게 작동하는 워드프레스가 아닌 다른 사이트가 있어서 정말 짜증이 났습니다. (워드프레스 페이지에 구글 지도를 표시하려고 했는데 줌과 스트리트뷰 컨트롤이 왜곡되었습니다.)

제가 한 해결책은 새로운 html 파일을 만드는 것이었습니다. (모든 코드를 메모장에 복사하여 붙여넣고 xyz로 이름을 지었습니다.)html, "모든 파일" 유형으로 저장).그런 다음 웹사이트에 업로드/ftp하고, 새로운 Wordpress 페이지를 설정하고 임베디드 기능을 사용합니다.페이지를 편집할 때 텍스트 편집기(시각적 편집기가 아님)로 이동하고 복사/입력합니다.

http://page URL 너비="900" 높이="950">

치수를 변경하는 경우 위의 두 인수 모두에서 변경해야 합니다. 그렇지 않으면 이상한 결과가 나타납니다.

자, 이제 시작입니다. 다른 답들처럼 영리하지는 않겠지만, 저에게는 효과가 있었습니다!여기 증거: http://a-bc.co.uk/latitude-longitude-finder/

언급URL : https://stackoverflow.com/questions/8879544/google-maps-zoom-control-is-messed-up