javascript 谷歌地图api在按钮点击时加载地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30984557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps api loading map on button click
提问by Mr.Smithyyy
I am trying to initialize the map load on a simple button click but with no luck. Also no errors being thrown in the javascript console.
我试图通过简单的按钮点击初始化地图加载，但没有运气。在 javascript 控制台中也没有抛出错误。
If I change it to google.maps.event.addDomListener(window, 'load', initialize);it works fine.
如果我把它改成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>回答by bcdan
Instead of using google.maps.eventhandlers for buttons, use a jQuery event listener. Even though it is possible to use Google maps event handlers for the rest of the DOM, it is better practice to use jQuery for this. Also, I think that Sebastián Rojas made a good suggestion about using window.onload.
不使用google.maps.event按钮处理程序，而是使用 jQuery 事件侦听器。尽管可以对 DOM 的其余部分使用 Google 地图事件处理程序，但最好为此使用 jQuery。此外，我认为 Sebastián Rojas 提出了关于使用window.onload.
Here is the Fiddle. The only change from the original code is:
这是小提琴。与原始代码的唯一变化是：
$(document).ready(function(){
$('#show-map').on('click',initialize)
});
This code waits until the documentis loaded, and then it assigns the event listener to the button (#show-map), to do initializewhen it is clicked.
这段代码一直等到document加载完毕，然后将事件侦听器分配给按钮 ( #show-map)，以initialize在单击它时执行。
回答by Sebastián Rojas
You can't replace the event of initialization, because is important that the window is loaded and Google Maps API also. So, instead, leave the dom listener as documentations suggest, and when the event is fired attach an event listener to the button click to show the map
您不能替换初始化事件，因为加载窗口和 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>回答by Mario Peusschers
As a quick-fix, this will work:
作为快速修复，这将起作用：
var map = document.getElementById('show-map')
google.maps.event.addDomListener(map, 'click', initialize);
