Hộp màu xám xuất hiện trong các phần của Google Map được nhúng trong hộp phương thức

Question

Tôi gặp sự cố khi nhúng Bản đồ Google qua API v3 trong một hộp phương thức.

Hộp màu xám xuất hiện trong khung bản đồ khi phương thức được hiển thị. Thay đổi kích thước cửa sổ trình duyệt, đưa Trình kiểm tra web lên, v.v. làm cho tất cả các lát bản đồ có thể nhìn thấy được, tức là "buộc hiển thị lại" bản đồ.

Phần tử gốc của phần tử bản đồ (section#map-modal, xem mã bên dưới) có display: none đặt trong CSS khi tải trang. Mã phương thức JS tự động đặt display: block khi nút hiển thị được nhấp. Nếu tôi tạm thời xóa display: none khỏi phần tử phương thức, bản đồ sẽ hiển thị chính xác khi làm mới trang. Không phải là Google Map thích có một yếu tố cha mẹ ẩn?

Tôi đang sử dụng plugin jQuery phương thức Bootstrap của Twitter và đang điều khiển chính phương thức bằng CSS. Đó là vị trí cố định, có chiều rộng pixel, v.v. Không có gì bất thường.

Tôi đã đương nhiên googled xung quanh các giải pháp, và nhiều điểm với phương pháp API Google kích hoạt các sự kiện resize:

google.maps.event.trigger(map, 'resize'); 

Tôi đã thực sự làm như vậy, nhưng không có kết quả.

đang liên quan: https://gist.github.com/1591488

Như bạn thấy, I'me kích hoạt các sự kiện tại dòng 39.

(nhấn vào nút đồXem lớn hơn ở dưới cùng của thanh bên).

Files:

• fagerhult.js
• fagerhult.map.js
• bootstrap-modal.js
• master.css

tôi sẽ sâu sắc đánh giá cao bất kỳ giúp đỡ hoặc cặp thêm mắt trong này, như tôi sớm phát điên lên.

Answer 1

Theo như tôi chọc vào nó một chút trên Chrome sử dụng JS live chỉnh sửa, kéo dài thời gian thực hiện resize phải chờ cho phim hoạt hình phương thức có thể làm việc :)

https://gist.github.com/1592330#L107

Answer 2

tôi phát hiện ra rằng có display: none trên yếu tố cha mẹ của bản đồ (phương thức) thực sự làm rối tung mọi thứ. Tôi đã đổi nó thành visibility: hidden chỉ trong tuyệt vọng tuyệt đối để xem điều gì sẽ xảy ra, và nó đã hoạt động!

Tôi cũng đã sửa đổi mã JS phương thức để đặt phương thức thành visibility: visible/hidden khi phương thức được hiển thị/ẩn. Nếu không, nó sẽ nhận được display: none/block đặt lại, điều này sẽ tạo lại các hộp màu xám.

Answer 3

Vấn đề là nếu bạn làm điều gì đó như thế này:

$("#mapModalLink").click(function(){ 
    google.maps.event.trigger(map,"resize"); 
}); 

là phương thức của bạn có thể không mở (và hiển thị ở kích thước phù hợp) khi sự kiện thay đổi kích thước được kích hoạt. Để giải quyết điều này:

$("#mapModalLink").click(function(){ 
    $("#mapModal").show(); 
    google.maps.event.trigger(map, 'resize'); 
}); 

Làm việc cho tôi ít nhất :)

Answer 4

Giải pháp của tôi cho bootstrap-modal.js v 2.0

thay thế lớp "ẩn" cho "vô hình" trong phương thức div

<div id="map_modal" class="modal fade invisible"> 
... 
</div> 

chức năng javascript

function open_map() 
{ 
    $('#map_modal').removeClass("invisible"); 
    $('#map_modal').modal('toggle'); 
} 

liên kết html

<a href="javascript:open_map()">Open map</a> 

Answer 5

Hãy thử sử dụng trình xử lý sự kiện theo phương thức. Tôi nghĩ rằng đây là cách ngắn gọn nhất (và đúng) để đảm bảo rằng bạn đang thay đổi kích thước sau khi phương thức được hiển thị mà không cần viết bất kỳ plugin:

$('#map-modal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
}) 

UPDATE: Tôi chỉ nhận ra rằng giải pháp này vẫn không tập trung bản đồ đúng cách , vì vậy, tôi cần thêm một lệnh nữa:

$('#map-modal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989)); 
}) 

Answer 6

Tôi gặp sự cố này và tôi đã giải quyết được sự cố gọi lại phương thức vẽ. Tôi nghĩ rằng điều này xảy ra bởi vì bạn vẽ bản đồ của bạn erlier hơn hiển thị hộp thoại.

tôi đã sử dụng mã này để giải quyết nó (nó wasn'ta cửa sổ modal):

$('#map').show(function() 
{ 
    var punto = new google.maps.LatLng(this.latitud, this.longitud); 
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false}; 
    var map = new google.maps.Map(document.getElementById('mapa'), myOptions); 
    var marker = new google.maps.Marker({ 
    position:punto, 
    map: map, 
    title: this.nombre 
}); 
}); 

Answer 7

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
      google.maps.event.trigger(map, 'resize'); 

    }); 
}); 

Answer 8

Đối với những người sử dụng bootstrap, tôi đã phải loại bỏ "phai" từ lớp "phương thức" của tôi

Từ

<div class="modal fade" 

để

<div class="modal" ... 

Tôi đã thử các giải pháp trước đó bằng cách gọi google.maps.event.trigger (bản đồ, 'thay đổi kích thước'); nhưng figured rằng

.on("shown.bs.modal" ... 

chưa bao giờ được gọi. Vấn đề này dường như chỉ cho tôi để loại bỏ các phai.
https://github.com/twbs/bootstrap/issues/11793

Đây không phải là một giải pháp tối ưu kể từ khi phai là thực sự rất thú vị khi có ...

Answer 9

bản đồ hiển thị thành công mà không cần thay đổi kích thước.

Tại sao thay đổi kích thước cung cấp cho bạn bản đồ phù hợp?

Vì trình duyệt sẽ vẽ lại chế độ xem.

Làm thế nào để sửa chữa nó?

Để có bố cục thích hợp của bản đồ trong bất kỳ bảng điều khiển nào được kích hoạt gần đây, bản đồ phải được vẽ sau khi bảng điều khiển được tải.Điều này có thể đạt được bằng mã (setTimeout) như được đề cập bên dưới. mục tiêu mã là kích hoạt sự kiện thay đổi kích thước bản đồ sau 60 giây.

setTimeout(function() { 
     uiGmapIsReady.promise().then(function (maps) { 
      google.maps.event.trigger(maps[0].map, 'resize'); 
      lat = -37; 
      lon = 144; 
      maps[0].map.panTo(new google.maps.LatLng(lat,lon)); 
      var marker = { 
       id: Date.now(), 
       coords: { 
        latitude: lat, 
        longitude: lon 
       } 
      }; 
      $scope.map.markers = []; 
      $scope.map.markers.push(marker); 
      console.log($scope.map.markers); 
     }); 
    }, 60);