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_canvas div，则修改您的代码，如下所示：

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() {
    // ...
}); <--

额外)是问题

Fixed it here.

通过单击按钮显示Google地图

3 个答案: