Google Maps API V3 Szary obszar

Question

Zainstalowałem Google Maps API V3, ale mam problem z prawidłowym działaniem funkcji zmiany rozmiaru. Umieściłem skrypt, aby wyświetlał mapę w dziale, które spada po kliknięciu łącza, ale pokazuje szare obszary po bokach. Czytałem przypadki, w których musisz mieć funkcję zmiany rozmiaru w skrypcie, która wyświetla podział, z tego, co rozumiem, ale mam problemy z jej prawidłowym wdrożeniem.

Oto kod, który powoduje podział (class = "content"), aby się objawić:

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

Mam mapę wewnątrz div z id "map".

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

Przez całą noc pracowałem nad innymi częściami strony i jestem w tej chwili dość roztrzepany. Przepraszam, jeśli zapomniałem opublikować coś niezbędnego do rozwiązania tego problemu.

Z góry dzięki, Bc.

Answer 1

Musisz ręcznie rzucić nawet zmienić rozmiar na mapie google.

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

Reference.

Aktualizacja

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

Następnie można przejść do następnego kodu:

$(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

Hej realizowanego szybki łatwy poprawkę do tego:

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

z div strony o nazwie "map" i div mapy o nazwie "map-canvas".

To, co wydaje się robić, to zainicjować mapę po wyświetleniu strony. To sprawia, że ​​aplikacja wolniej ładuje mapę, gdy użytkownik ją otwiera, ale pozwala uniknąć błędów spowodowanych przez dom i inne. To całkowicie rozwiązuje problem mapy rogów i szarej strefy w mojej aplikacji mapowej + aplikacji mobilnej + mapa Google jigsaw + jquery!