Google Maps API V3: hiển thị giao diện người dùng kỳ lạ trục trặc (với ảnh chụp màn hình)

Bất cứ ai có bất kỳ ý tưởng nào về nguyên nhân gây ra trục trặc kỳ lạ này với các thành phần giao diện người dùng của google maps, hãy thực sự biết ơn khi được lắng nghe ý kiến ​​của bạn!

bản đồ được tạo bằng:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

và trục trặc giống nhau ngay cả khi không có điểm đánh dấu.

Chúng tôi đã gặp phải cùng một vấn đề. Nhà thiết kế css đã sử dụng phong cách này:

style.css

img {max-width: 100%; }

Thay vì tắt điều khiển thu phóng, chúng tôi đã khắc phục sự cố bằng cách ghi đè kiểu img cho các phần tử map_canvas như sau:

style.css:

#map_canvas img { max-width: none; }

Điều khiển thu phóng hiện hiển thị chính xác.

Đặt "img max-width: 100%" là một kỹ thuật được sử dụng trong thiết kế trang web đáp ứng / linh hoạt để hình ảnh có kích thước lại theo tỷ lệ khi kích thước lại trình duyệt. Rõ ràng một số hệ thống lưới css đã bắt đầu thiết lập kiểu này theo mặc định. Thông tin thêm về hình ảnh linh hoạt tại đây: http://www.alistapart.com/articles/fluid-images/ Không chắc tại sao điều này xung đột với bản đồ google ...

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ó vẻ như sự cố với điều khiển thu phóng. Hãy thử thêm zoomControl:falsevào các tùy chọn của bạn.

Trên thực tế, có vẻ như thanh trượt thu phóng bình thường được đặt ở bên trái của trang (sử dụng Firebug> Kiểm tra phần tử). Có thể là một xung đột CSS?

Tôi đã sửa lỗi này:

Trên CSS của bạn, bạn đã thêm một số thứ như:

img {max-width: 100%; height: auto;}

cố gắng không làm cho nó toàn cầu và nó sẽ khắc phục bạn :)

Điều này đã làm việc cho tôi:

#map img { max-width: none !important; } (from Patrick's answer)

thuộc tính "! important" đảm bảo ghi đè bất kỳ kiểu nào khác, #map là id được chỉ định khi bạn khai báo đối tượng mới Gmaps:

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

nếu bạn đang sử dụng tính năng lưới chất lỏng Dreamweaver thiết lập mặc định của bạn sẽ trông như thế này:

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Thử đi:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

chỉ cần thay thế mã như nó vốn có.

Bootstrap (kể từ phiên bản 2.3.2) gây rối với các hình ảnh theo cách giống như trong câu trả lời được chấp nhận.

Trên thực tế, tôi nghi ngờ rằng thiết kế được sử dụng trong trang web của Haroldo sử dụng Bootstrap.

Tôi chỉ đăng bài này vì không ai khác đề cập đến Bootstrap và ai đó có thể đang tìm kiếm một giải pháp dành riêng cho Bootstrap.

Tôi gặp sự cố này trên trang web Square Space của mình. Tôi không có quyền truy cập vào bảng định kiểu CSS. Vì bạn đang nhúng một tài liệu html, bạn chỉ có thể sử dụng CSS nội tuyến để khắc phục sự cố. Tôi đã sửa đổi kiểu của vùng chứa thay vì thực hiện thay đổi trên toàn bộ trang web (điều mà tôi không thể thực hiện). Đây là những gì tôi đã làm:

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>