google maps api loading map on button click

Question

Я пытаюсь инициализировать загрузку карты простым нажатием кнопки, но не повезло. Кроме того, в javascript-консоли отсутствуют ошибки.

Если я изменю его на google.maps.event.addDomListener(window, 'load', initialize);, он отлично работает.

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

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

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

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

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

Answer 1

Вместо того, чтобы использовать google.maps.event обработчики для кнопок , используйте прослушиватель событий jQuery. Хотя для остальных DOM можно использовать обработчики событий Google maps, лучше использовать JQuery для этого. Кроме того, я думаю, что Себастьян Рохас сделал хорошее предложение об использовании window.onload.

Вот Fiddle. Единственное изменение от исходного кода:

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

Этот код ожидает, пока не будет загружен document, а затем назначает слушателя событий для кнопки (#show-map), чтобы сделать initialize при щелчке.

Answer 2

Вы не можете заменить событие инициализации, так важно, что загружается окно и Google Maps API также. Таким образом, вместо того, оставить Dóm слушателя, как Документации предложить, и когда событие вызывается прикрепить прослушиватель событий к кнопке мыши, чтобы показать карту

function initialize() { 
 

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

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

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

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

Answer 3

В быстрых решений, это будет работать:

var map = document.getElementById('show-map') 
google.maps.event.addDomListener(map, 'click', initialize);