google-maps-api laden der map auf den button klicken

Ich versuche zu initialisieren die Karte laden, die auf einem einfachen button-Klick, aber ohne Glück. Auch keine Fehler geworfen wird, in der javascript-Konsole.

Wenn ich es ändern zu google.maps.event.addDomListener(window, 'load', initialize); es funktioniert gut.

JS:

var showMap = $('#show-map');

function initialize() {
    var mapOptions = {
	    center: { lat: 0, lng: 0 },
	    zoom: 8
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(showMap, 'click', initialize);

CSS:

#map-canvas {
  height: 30em;
  width: 30em;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>

<button id="show-map">Show Map</button>

<div id="map-canvas"></div>

InformationsquelleAutor Mr.Smithyyy | 2015-06-22
  1. 6

    Anstatt google.maps.event Handler für Schaltflächen, verwenden Sie ein jQuery-event-listener. Obwohl es möglich ist, die Verwendung von Google maps event-Handler für den rest der DOM, es ist besser der Praxis zu verwenden jQuery für diese. Außerdem denke ich, dass Sebastián Rojas machte einen guten Vorschlag über die Verwendung window.onload.

    Hier ist die Fiddle. Die einzige Veränderung, die aus dem ursprünglichen code ist:

    $(document).ready(function(){
    $('#show-map').on('click',initialize)
});

    Dieser code wartet, bis die document geladen wird, und dann tritt das Ereignis-listener auf die Schaltfläche (#show-map), zu tun initialize wenn darauf geklickt wird.

    • "Google Maps Zuhörer sind spezifisch für map-Elemente" - streng genommen nicht richtig. addListener() ist, aber Sie können auch addDomListener(). Siehe Hören von DOM-Ereignissen in der Dokumentation
    • Danke für, die. Ich passe meine Antwort.
    InformationsquelleAutor bcdan
  2. 5

    Kann man nicht ersetzen, das Ereignis der Initialisierung, weil wichtig ist, dass das Fenster geladen ist und die Google Maps API auch. Also, lassen Sie stattdessen die dom-listener als Dokumentationen vorschlagen, und wenn das Ereignis ausgelöst wird, fügen Sie einen Ereignis-listener auf die Schaltfläche klicken Sie auf die Karte

    JS:

    function initialize() {

    //Add the event listener after Google Mpas and window is loaded
    $('#show-map').click(function () {
         var mapOptions = {
	    center: { lat: 0, lng: 0 },
	    zoom: 8
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

    CSS:

    #map-canvas {
  height: 30em;
  width: 30em;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgxY6DqJ4TxnRfKjlZR8SfLSQRtOSTxEU"></script>

<button id="show-map">Show Map</button>

<div id="map-canvas"></div>

    • Danke. Ich konnte nicht scheinen, um finden es in der Dokumentation. Ich sah nur ein Beispiel von Ihnen anbringen ein Alarm-Ereignis auf Karte anzeigen klicken Sie mit der Methode ich habe versucht, so dachte ich, es könnte geklappt haben mit der Karte laden.
    • developers.google.com/maps/documentation/javascript/... Meine aswers, was Sie brauchen?
    InformationsquelleAutor Sebastián Rojas
  3. 0

    Als quick-fix, das wird auch funktionieren:

    var map = document.getElementById('show-map')
google.maps.event.addDomListener(map, 'click', initialize);
    InformationsquelleAutor Mario Peusschers
Schreibe einen Kommentar