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

Question

Bất kỳ ai có bất kỳ ý tưởng nào về nguyên nhân gây ra sự cố lạ này với các thành phần giao diện người dùng bản đồ google, thực sự biết ơn khi được nghe từ bạn!

bản đồ được tạo ra với:

 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 là như nhau thậm chí không có dấu.

Answer 1

Chúng tôi đã gặp sự cố tương tự. Các nhà thiết kế đã sử dụng css phong cách này:

style.css

img {max-width: 100%; } 

Thay vì vô hiệu hóa điều khiển zoom, chúng tôi khắc phục vấn đề bằng cách ghi đè các phong cách img cho map_canvas các yếu tố như vậy:

style.css:

#map_canvas img { max-width: none; } 

Điều khiển thu phóng hiện hiển thị s đúng.

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

Answer 2

Có vẻ như đã xảy ra sự cố với điều khiển thu phóng. Thử thêm zoomControl:false và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 thông 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 cuộc xung đột CSS?

Answer 3

Vâng, tôi đã sửa chữa cho điều này:

On CSS của bạn, bạn thêm một cái gì đó như:

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

cố gắng không để làm cho nó toàn cầu và nó sẽ sửa chữa bạn :)

Answer 4

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

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

Answer 5

nếu bạn đang sử dụng tính năng lưới dịch Dreamweaver mặc định của bạn thiết lập nên 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%; 
} 

Hãy thử điều này:

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ế các mã như nó là.

Answer 6

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

Trong 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 giải pháp cụ thể cho Bootstrap.

Answer 7

Tôi đã gặp sự cố này trên trang web Không gian Square của tôi. Tôi không có quyền truy cập vào trang định dạng CSS. Vì bạn đang nhúng 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 trang web (mà tôi không thể thực hiện). Dưới đâ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> 

Answer 8

này làm việc cho tôi: "quan trọng"

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

thuộc tính làm cho chắc chắn để ghi đè lên bất kỳ phong cách khác, #map là id được gán khi bạn khai báo mới đối tượng Gmaps:

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