Vùng màu xám V3 của Google Maps API

Question

Tôi đã cài đặt API Google Maps V3, nhưng tôi gặp sự cố khi nhận chức năng thay đổi kích thước để hoạt động bình thường. Tôi đã đặt kịch bản để hiển thị bản đồ trong một bộ phận rơi xuống khi một liên kết được nhấp vào, tuy nhiên, nó cho thấy các khu vực màu xám ở hai bên. Tôi đã đọc các trường hợp mà bạn phải có chức năng thay đổi kích thước trong tập lệnh hiển thị bộ phận, từ những gì tôi có thể hiểu được, nhưng tôi đang gặp sự cố khi triển khai nó đúng cách.

Dưới đây là đoạn code mà làm cho bộ phận (class = "Nội dung") được tiết lộ:

$(function() { 
$('.action').click(function() {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    content.slideToggle('fast'); 
}); 

Tôi có bản đồ bên trong một div với id "bản đồ".

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

Tôi đã thức cả đêm làm việc trên các phần khác của trang web và đang khá phân tán vào lúc này. xin lỗi nếu tôi quên đăng nội dung cần thiết để giải quyết vấn đề này.

Cảm ơn trước, Bc.

Answer 1

Bạn cần phải tự xoay kích thước thậm chí trên bản đồ google.

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

Reference.

Cập nhật

<script type="text/javascript"> 
// Global Variable 
var map; 

// This is a global Function 
function initialize() 
{ 
    // This variable is scoped only for the initialize function, 
    // it is not available to other functions scoped globally 
    var myOptions = 
    { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Instead of a function scoped map variable this should be global 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.trigger(map, 'resize') 
} 
</script> 

Sau đó, bạn có thể thay đổi để đoạn mã sau:

$(function() 
{ 
    $('.action').click(function() 
    {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    // this uses the callback functionality 
    // to only throw the trigger after the 
    // animation finishes. 
    content.slideToggle('fast', 
     function() 
     { 
     google.maps.event.trigger(map, 'resize'); 
     }); 
    }); 
}); 

Answer 2

Hey tôi nhận ra một sửa chữa dễ dàng nhanh chóng như thế này:

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(42.365885, -71.258658), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    google.maps.event.trigger(map,'resize'); 
} 

$(document).on("pageshow", "#map", function() { 
    initialize(); 
}); 

với div trang được gọi là "bản đồ" và div bản đồ có tên "bản đồ-canvas".

Điều này dường như làm là khởi tạo bản đồ khi trang được hiển thị. Điều này làm cho ứng dụng của bạn chậm hơn bằng cách tải bản đồ khi người dùng mở nó, nhưng nó tránh được các lỗi gây ra bởi dom và không. Điều này hoàn toàn sửa chữa các vấn đề về bản đồ/khu vực màu xám trên điện thoại di động của tôi + ứng dụng bản đồ jquery + google app!