谷歌地图api加载地图按钮单击

Question

我试图在一个简单的按钮点击初始化地图加载但没有运气.此外,javascript控制台中不会抛出任何错误.

如果我把它改成它就可以google.maps.event.addDomListener(window, 'load', initialize);了.

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

#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地图事件处理程序,但最好还是使用jQuery.另外,我认为SebastiánRojas对使用提出了很好的建议window.onload.

这是小提琴.与原始代码的唯一变化是:

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

此代码等待直到document加载,然后它将事件侦听器分配给按钮(#show-map),以便initialize在单击时执行.

Answer 2

您无法替换初始化事件,因为窗口加载和Google Maps API也很重要.所以,相反,将dom监听器保留为文档建议,当事件被触发时,将事件监听器附加到按钮单击以显示地图

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

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