我在我的网站上集成了谷歌地图，但是当我打开时，检查元素地图将起作用，当我关闭时，地图将消失。请让我知道问题出在哪里
before 
打开后检查元素。
代码在这里
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = -25.363882;
var longitude = 131.044922;
var zoom = 7;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
initialize();
</script>
</body>
</html>
在创建标记或加载地图后放置此代码：
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
});
idle当地图在平移或缩放后变得空闲时，会触发该事件。
我们正在使用resize地图空闲后调用该方法表示全部加载完成。因此，代码等待地图空闲事件（当地图上的所有处理都停止时）发生，然后执行resize方法，这会将地图重新绘制到正确的尺寸。