web-dev-qa-db-fra.com

Comment utiliser google.maps.event.trigger (carte, «redimensionner»)

Je suis nouveau chez JS, et j'ai trouvé la réponse à une question précédente, qui a soulevé une nouvelle question, qui m'a amené à nouveau ici.

J'ai un Reveal Modal qui contient une API Google Map. Quand un bouton est cliqué, le Reveal Modal apparaît et affiche la carte Google. Mon problème est que seul un tiers de la carte s'affiche. En effet, un déclencheur de redimensionnement doit être implémenté. Ma question est de savoir comment implémenter google.maps.event.trigger (carte, "redimensionner")? Où dois-je placer ce petit extrait de code?

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

Le script Reveal Model:

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

Mon script Google Map:

<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 carte Google:

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

MISE À JOUR 2018-05-22

Avec une nouvelle version du rendu dans la version 3.32 de l'API Maps Maps, l'événement resize ne fait plus partie de la classe Map.

La documentation indique

Lorsque la carte est redimensionnée, le centre de la carte est fixe

  • Le contrôle plein écran conserve désormais le centre.

  • Il n'est plus nécessaire de déclencher l'événement de redimensionnement manuellement.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); n'a aucun effet à partir de la version 3.32

javascripthtmlgoogle-mapszurb-foundation
15
Jeremy Flaugher

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

  • La fonction initialize() est créée, mais jamais appelée
  • La $(document).ready doit être appelée après le chargement de jQuery
  • Le map doit être une variable globale (comme l'a dit @Cristiano 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 un mauvais ID (#myModal1 n'est jamais situé dans le HTML).

Et maintenant: Téléchargez la solution (Veuillez nous fournir un téléchargement/JSFiddle la prochaine fois, donc nous n'avons pas besoin de le créer nous-mêmes).

J'espère que cela a aidé!

20
MarcoK

Ajoutez-le simplement ici

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

MAIS vous devez mettre la carte en tant que variable globale, alors perdez la 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>
11
Cristiano Fontes
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});
5
Mir Shakeel Hussain

N'a pas trouvé comment laisser un commentaire pour la dernière réponse, mais +1 pour Cristiano Fontes aide! Ç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>
3
Andrey Davis