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

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

---

Those options you guys told me didn´t work for my website.

I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy

I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!

---

I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).

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

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

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

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

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