Wie man google nutzt.maps.event.trigger(map, 'Größe')

Ich bin neu in JS, und gefunden haben, die Antwort auf eine Vorherige Frage, das brachte eine neue Frage, die mich dazu brachte, wieder hier.

Ich habe einen Reveal-Modal, enthält eine Google-Map-API. Wenn auf eine Schaltfläche geklickt wird, wird der Reveal-Modal öffnet sich und zeigt die Google-Karte. Mein problem ist, dass nur ein Drittel der Karte angezeigt wird. Dies ist, weil ein resize-trigger umgesetzt werden muss. Meine Frage ist, wie Binde ich den google.maps.event.trigger(map, 'resize')? Wo platziere ich dieses kleine code-snippet?

Hier ist meine test-site. Klicken Sie auf der Google-Map-Schaltfläche, um das problem an der hand.
http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Zeigen die Modell-Skript:

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

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

Div-hält die Google-Karte:

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

UPDATE 2018-05-22

Mit einem neuen renderer release in der version 3.32 von Maps JavaScript API für das resize-Ereignis ist nicht mehr ein Teil der Map Klasse.

Gibt die Dokumentation

Wenn die Karte geändert wird, wird die Karte Mitte fixiert ist

Den full-screen-Controller nun bewahrt center.

Ist es nicht mehr auslösen müssen das resize-Ereignis manuell.

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

google.maps.event.trigger(map, "resize"); keine Wirkung ab version 3.32

Das ist etwas komisch, das ich noch nicht gesehen. Ich öffnete Ihre Website und wie Sie sagten die Karte nicht vollständig angezeigt. Allerdings, wenn ich öffnen Sie die chrome-Konsole mit F12 oder dem firebug in mozilla, sofort Ihre Karte wird vollständig angezeigt und bis ich wieder die Seite aktualisieren, bekomme ich die komplette Karte.
Ich dont haben eine Lösung auf Ihre Frage, aber fand dies interessant. +1.
Danke für die +1. Ich habe versucht, hinzufügen von ein js-event kaufen, habe nicht bekommen, etwas zu arbeiten. Jemand da draußen wissen, was Los ist.
wenn Sie möchten, ein Beispiel: jsfiddle.net/RASG/vA4eQ

InformationsquelleAutor Jeremy Flaugher | 2012-10-24

20

Gab es tatsächlich ein paar Probleme mit Ihrem source-code.
- Die initialize() - Funktion erstellt wurde, aber nie aufgerufen
- Die $(document).ready sollte aufgerufen werden, nachdem jQuery uns geladen
- Die map sollte eine Globale variable (so wie @Cristiano Fontes gesagt) und nicht eine var map
- (Wichtig) Die click event nie aufgerufen wird. Sie versuchen, die beiden Methoden kombinieren Offenbaren von Zurb bietet, um ein Dialogfenster zu öffnen (mit JS, nur mit HTML). Sie müssen verwenden Sie nur die JS-Methode.
- Du bist mit der falschen ID (#myModal1 nie gelegen im HTML-Code).
Und jetzt: Laden Sie die Lösung (Bitte geben Sie uns eine download - /JSFiddle nächsten Zeit, so brauchen wir nicht zu erstellen, diese selbst).

Hoffe, es half!

Ich danke Ihnen sehr für Ihre Zeit und sehr detaillierte arbeiten Beispiel @MarcoK. Du triffst alles auf den Kopf und mein problem ist jetzt behoben. Ich werde mich erinnern, um eine jsfiddle nächste Zeit bin ich hier. Nochmals vielen Dank!!
Hm, die Lösung ist jetzt vorbei... wäre toll gewesen, diese auf JSFiddle...
plus1 "Karte sollte eine Globale variable", shanks Mann.

InformationsquelleAutor MarcoK
11

Nur hinzufügen, dass es hier
```
<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  google.maps.event.trigger(map, 'resize');
       });
          });
 </script>
```
ABER Sie brauchen, um die Karte wie eine Globale variable, so verlieren die var hier
```
<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>
```
Danke für Eure Antworten, auch wenn ich konnte nicht bekommen es funktioniert. Ich habe meinen code so, wie Sie sagte. Ich bin noch immer nur ein Drittel der Karte.
Noch nicht dazu gekommen dies herausgefunden. Grrrrrrrrrr
Ich sehe, es ist ein Fehler mit deinem Jquery, schauen Uncaught ReferenceError: $ is not defined und es gibt auch eine ; fehlt after (map, 'resize')
Ja, für etwas, das sein soll Ausschneiden und einfügen, die ich sicher haben Chaos das heck aus es alle. Sie haben zu Recht über Ihre ganze Antwort, ich wusste einfach nicht, wie Sie sich richtig zu ändern, und legen Sie die Korrekturen. Dank hilfreicher Menschen wie Sie selbst, JS-noobs wie mich zu lernen und Hände auf. Stackoverflow.com ist ein Stirn-saver! Vielen Dank für Ihre Zeit und Mühe @Crisiano Fontes!
+1, das Q & Eine nur mich gerettet eine MENGE Zeit! Danke!!!

InformationsquelleAutor Cristiano Fontes

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

InformationsquelleAutor Mir Shakeel Hussain

Nicht gefunden, wie man einen Kommentar für die Letzte Antwort, aber +1 für Cristiano Fontes Hilfe! Es arbeitete. In meinem Fall:

<script type="text/javascript">    

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

</script>

InformationsquelleAutor Andrey Davis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.