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는이 문제를 독자적으로 해결할 수있는 방법이 없습니다.

너희들이 나에게 말한 옵션은 내 웹 사이트에서 작동하지 않았다.

Bootstrap V3를 사용하고 기능에 중점을 두었습니다. 주된 이유는 내지도에 다른 ID를 부여하고 노란색 streetvieuw 녀석과 줌 바를 표시하는 데 사용되는 CSS 파일을 사용했기 때문입니다.

map_canvas의 이름을 mapholder로 바꾸고 나에게 도움이되었습니다! 어쨌든 CSS 파일을 살펴 봐야 할 힌트에 감사드립니다!

위의 모든 솔루션과 다른 포럼의 다른 솔루션을 사용해 보았습니다. 코드가 완벽하게 작동하는 WordPress 이외의 다른 사이트가 있기 때문에 정말 짜증났습니다. (워드 프레스 페이지에 Google지도를 표시하려고했지만 확대 / 축소 및 스트리트 뷰 컨트롤이 왜곡되었습니다.)

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

http : // page URL width = "900"height = "950">

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

거기에 우리는 간다-다른 대답만큼 영리하지는 않지만 그것은 나를 위해 일했다! 증거는 여기 : http://a-bc.co.uk/latitude-longitude-finder/