javascript - 通过单击按钮显示 Google 地图

Question

我试图将一个脚本放在一起，该脚本在单击按钮时显示谷歌地图，然后从两个输入字段中读取坐标。

这是我写的代码：http: //jsfiddle.net/spadez/2r9tC/3/

// MAP DISPLAY CODE
function mapDisplay() {

var latval = $('input[id=lat]').val();
var lngval = $('input[id=lng]').val();    

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(latval, lngval),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
});

// 
$(function() {
    $('#action').click(mapDisplay);
});

我真的没有运气，所以我想知道是否有人可以告诉我哪里出错了。

谢谢你。

Answer 1

如果map_canvasdiv 在文档加载时隐藏，则修改您的代码，如下所示：

function mapDisplay() {

var latval = $('input[id=lat]').val();
var lngval = $('input[id=lng]').val();    

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(latval, lngval),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}


    $('#action').click(function(){
        $( "#map_canvas" ).show();
    });

或者，如果您也想调用该函数：

    $('#action').click(function(){
        mapDisplay();
        $( "#map_canvas" ).show();
    });

Answer 2

我怀疑问题在于您需要一个用于谷歌地图的 API 密钥。您的小提琴代码不包含密钥（也不应该因为它是公开可见的）

w3schools详细解释了这一点。

Answer 3

你有一个错字

function mapDisplay() {
    // ...
}); <--

额外)的问题是

在这里修复它。