Aree grigie dell'API di Google Maps V3

Question

Ho installato l'API V3 di Google Maps, ma non riesco a far funzionare correttamente la funzione di ridimensionamento. Ho messo lo script per visualizzare la mappa in una divisione che scende quando viene cliccato un link, tuttavia, mostra aree grigie sui lati. Ho letto casi in cui è necessario avere la funzione di ridimensionamento nello script che visualizza la divisione, da quello che posso capire, ma ho problemi ad implementarlo correttamente.

Ecco il codice che causa la divisione (class = "content") per essere rivelato:

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

ho la mappa all'interno di un div con l'id "mappa".

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

Sono stato sveglio tutta la notte a lavorare su altre parti del sito e sono abbastanza disperato al momento. scusate se ho dimenticato di postare qualcosa di necessario per risolvere questo.

Grazie in anticipo, Bc.

Answer 1

È necessario eseguire manualmente il ridimensionamento uniforme sulla mappa di google.

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

Reference.

Aggiornamento

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

Quindi è possibile modificare il codice seguente:

$(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 ho realizzato un semplice soluzione rapida a questo:

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

con il div di pagina chiamato "map" e il map div chiamato "map-canvas".

Ciò che sembra fare è inizializzare la mappa quando viene visualizzata la pagina. Questo rende la tua app più lenta caricando la mappa quando l'utente la apre, ma evita gli errori causati da dom e quant'altro. Questo risolve completamente il problema delle mappe in grigio/aree grigie sulla mia app phonegap + jquery mobile + google map!