Điều khiển thu phóng của Google Maps bị rối

Tôi sử dụng API Google Maps (v.3) để hiển thị bản đồ với một vài điểm đánh dấu. Gần đây tôi nhận thấy rằng điều khiển được sử dụng để phóng to bản đồ đã bị rối (không phải lúc nào cũng như vậy). Tôi không biết nguyên nhân là gì.

Cập nhật

Bài đăng này ban đầu có một liên kết đến một trang nơi bạn có thể xem vấn đề, nhưng bây giờ liên kết đã bị hỏng, vì vậy tôi đã xóa nó.

CSS của bạn làm nó rối tung lên. Xóa max-width: 100%;trong dòng 814 và các điều khiển thu phóng sẽ trông ổn trở lại. Để tránh những lỗi như vậy, hãy sử dụng các bộ chọn cụ thể hơn trong CSS của bạn.

#myMap_canvas img {
    max-width: none;
}

đã sửa nó cho tôi, nhưng tôi cũng muốn chỉ ra nhận xét về câu hỏi của @Ben, "Vấn đề này không xảy ra với Bootstrap nếu bạn sử dụng là map_canvas làm id id bản đồ". Anh ấy đúng. Tôi không sử dụng Bootstrap, nhưng vấn đề bắt đầu xảy ra sau khi tôi thay đổi id id.

Đặt nó trở lại map_canvas đã sửa nó mà không thay đổi độ rộng tối đa.

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

Nếu bạn đang sử dụng Bootstrap, chỉ cần cung cấp cho lớp "google-maps". Điều này làm việc cho tôi.

Để thay thế, bạn có thể đặt lại mọi thứ cho div bản đồ google như một loại giải pháp cuối cùng:

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

Chỉ cần chia sẻ @ Max-Favilli trả lời:

Với phiên bản mới nhất của google maps api, bạn cần điều này:

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

Cảm ơn @ Max-Favilli

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

Nếu bạn là người dùng Twitter Bootstrap, bạn nên thêm dòng này vào CSS của mình:

.gmnoprint img { max-width: none; } 

Tôi đã có vấn đề này là tốt và sử dụng

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

đã không làm việc. Cuối cùng tôi đã sử dụng

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

và nó làm việc như một lá bùa.

Nếu bạn đang sử dụng CSS thuần của Yahoo, hãy cung cấp cho lớp div "google-maps" của bạn như Bootstrap và đặt quy tắc này vào CSS của bạn:

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

Theo như tôi có thể nói, Pure CSS không có cách nào tự khắc phục vấn đề này.

Các tùy chọn mà các bạn nói với tôi đã không làm việc cho trang web của tôi.

Tôi sử dụng Bootstrap V3 và tập trung vào chức năng. Lý do chính là tôi đã cung cấp cho bản đồ của mình một ID khác sau đó tệp CSS được sử dụng để hiển thị thanh thu phóng với anh chàng streetvieuw màu vàng

Tôi đã đổi tên map_canvas thành mapholder và sau đó nó hoạt động với tôi! Dù sao cũng cảm ơn những gợi ý mà tôi nên xem xét các tệp CSS!

Tôi đã thử tất cả các giải pháp trên, và các giải pháp khác từ các diễn đàn khác đều vô ích. nó thực sự gây phiền nhiễu vì tôi có một trang web không phải Wordpress khác, nơi mã hoạt động hoàn hảo. (Tôi đã cố gắng hiển thị bản đồ Google trong trang Wordpress, nhưng các điều khiển thu phóng và Streetview bị méo).

Giải pháp tôi đã làm là tạo một tệp html mới (sao chép dán tất cả mã vào Notepad và đặt tên là xyz.html, lưu dưới dạng "tất cả các tệp"). Sau đó tải lên / ftp nó lên trang web và thiết lập trang Wordpress mới và sử dụng chức năng nhúng. Khi chỉnh sửa trang, hãy chuyển đến trình soạn thảo văn bản (không phải trình soạn thảo trực quan) và sao chép / gõ:

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

Nếu bạn thay đổi kích thước, hãy nhớ thay đổi kích thước trong cả hai đối số ở trên hoặc bạn nhận được kết quả kỳ lạ.

Chúng ta đi - có thể không thông minh như một số câu trả lời khác, nhưng nó hiệu quả với tôi! Bằng chứng ở đây: http://a-bc.co.uk/latitude-longitude-finder/