Come utilizzare google.maps.event.trigger (mappa, 'ridimensiona')

Question

Sono nuovo di JS e ho trovato la risposta a una domanda precedente, che ha sollevato una nuova domanda, che mi ha riportato di nuovo qui.

Ho un Reveal Modal che contiene un'API di Google Maps. Quando si fa clic su un pulsante, viene visualizzata la Reveal Modal e viene visualizzata la mappa di Google. Il mio problema è che viene visualizzato solo un terzo della mappa. Questo perché è necessario implementare un trigger di ridimensionamento. La mia domanda è: come posso implementare google.maps.event.trigger (map, 'resize')? Dove metto questo piccolo frammento di codice?

Ecco il mio sito di test. Fai clic sul pulsante Mappa di Google per visualizzare il problema. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Lo script Reveal modello:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
     }); 
      }); 
</script> 

mio Google Map Script:

<script type="text/javascript"> 
function initialize() { 
var mapOptions = { 
center: new google.maps.LatLng(39.739318, -89.266507), 
zoom: 5, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions); 
} 

</script> 

Il div che detiene la Google Map:

<div id="myModal" class="reveal-modal large"> 
    <h2>How to get here</h2> 
    <div id="map_canvas" style="width:600px; height:300px;"></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Answer 1

c'erano in realtà un paio di problemi con il codice sorgente.

• viene creata la funzione initialize(), ma mai chiamato
• Il $(document).ready dovrebbe essere chiamato dopo che jQuery ci caricato
• Il map dovrebbe essere una variabile globale (come @Cristiano Fontes ha detto) e non un var map
• (Importante) L'evento click non viene mai chiamato. Stai cercando di combinare i due metodi Reveal from Zurb per aprire una finestra di dialogo (una con JS, una con solo HTML). È necessario utilizzare l'unico metodo JS.
• Si sta utilizzando l'ID errato (#myModal1 non si trova mai nel codice HTML).

E ora: Download the solution (Si prega di fornire un download/JSFilf successivo, quindi non è necessario crearlo da soli).

Spero che abbia aiutato!

Answer 2

Basta aggiungere qui

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
    google.maps.event.trigger(map, 'resize'); 
     }); 
      }); 
</script> 

, ma è necessario mettere la mappa come una variabile globale, in modo da perdere la var qui

<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(39.739318, -89.266507), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
--> map = new google.maps.Map(document.getElementById("map_canvas"), 
    mapOptions); 
} 

</script> 

Answer 3

Non trovato come lasciare un commento per l'ultima risposta, ma +1 per l'aiuto di Cristiano Fontes! Ha funzionato. Nel mio caso:

<script type="text/javascript">  

$('div.map-box').hide(); 
$('li.map').mouseover(function(){ 
    $('div.map-box').show(); 
    google.maps.event.trigger(map, 'resize'); 
}); 

</script> 

Answer 4

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