Comment utiliser google.maps.event.trigger (map, 'redimensionner')

Question

Je suis nouveau à JS, et j'ai trouvé la réponse à une question précédente, qui a soulevé une nouvelle question, qui m'a amené ici encore. J'ai un Reveal Modal qui contient une API Google Map. Quand un bouton est cliqué, le mode Reveal apparaît et affiche la carte Google. Mon problème est que seulement un tiers de la carte affiche. C'est parce qu'un déclencheur de redimensionnement doit être implémenté. Ma question est de savoir comment implémenter google.maps.event.trigger (map, 'resize')? Où puis-je placer ce petit extrait de code?

Voici mon site de test. Cliquez sur le bouton Google Map pour voir le problème. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Le script du modèle Reveal:

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

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

Le div qui détient 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

Il y avait en fait deux problèmes avec votre code source.

• La fonction initialize() est créée, mais jamais appelé
• Le $(document).ready doit être appelée après nous jQuery chargé
• Le map doit être une variable globale (comme @Cristiano dit Fontes) et non un var map
• (Important) L'événement click n'est jamais appelé. Vous essayez de combiner les deux méthodes Reveal from Zurb permet d'ouvrir une boîte de dialogue (une avec JS, une avec seulement HTML). Vous devez utiliser la seule méthode JS.
• Vous utilisez le mauvais ID (#myModal1 ne se trouve jamais dans le code HTML).

Et maintenant: Download the solution (S'il vous plaît nous fournir un téléchargement/JSFiddle la prochaine fois, nous n'avons donc pas besoin de créer nous-mêmes).

Espérons que cela a aidé!

Answer 2

il suffit d'ajouter ici

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

mais vous avez besoin de mettre la carte en tant que variable globale, donc perdre le var ici

<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

N'a pas trouvé comment laisser un commentaire sur la dernière réponse, mais +1 pour l'aide de Cristiano Fontes! Ça a marché. Dans mon cas:

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