javascript - 单击以在 Javascript 中显示谷歌地图 - 不工作

Question

这是我工作的代码：http: //jsfiddle.net/X9SkK/

这是javascript：

function showmap() {
     var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }
}​

我想拥有它，以便当我单击按钮时地图会加载，但是由于某种原因它不起作用。我确信它很简单，但我无法确定它。

Answer 1

实际创建地图的代码被包装在一个名为 的函数中initialize，该函数未被调用。删除它，你会没事的：

function showmap() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}​

此外，请务必400px为您的#map_canvas元素指定一个固定的高度（例如 ），否则它将在您的 jsFiddle 中不可见。

Answer 2

这是你可以做的：

<!-- Display Map -->
function showmap() {
     var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }
initialize();
}

初始化（）；从未调用过负责创建地图的函数。您必须在 showmap 函数中调用它。

演示