谷歌地图不显示jQuery答案

【问题标题】：Google map display none jQuery谷歌地图不显示jQuery
【发布时间】：2013-10-27 15:51:43
【问题描述】：

我有两个 js 文件。第一个定义了一个谷歌地图，如：lat、lon、mapOptions、marker 等。这里是：

function initialize() {

var myLatlng = new google.maps.LatLng(settings.custom_contact.lat, settings.custom_contact.lng);

var mapOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '';

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: ''
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);

第二个包含一些显示#map-canvas 容器的操作。 map-canvas 的默认状态是 display: none。它在单击特定元素后显示。现在，我读到了显示隐藏地图的常见问题，我应该输入这行代码：

google.maps.event.trigger(map, 'resize');

当我单击使带有地图的容器可见的元素时。但是当我输入这段代码时，萤火虫告诉我：“ReferenceError: map is not defined”。这是正确的，因为它在不同的文件中。我无法合并这两个文件。我该如何管理？

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

把map变量放到全局范围内：

var map = null;
function initialize() {

var myLatlng = new google.maps.LatLng(settings.custom_contact.lat, settings.custom_contact.lng);

var mapOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '';

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: ''
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);

【讨论】：