顯示谷歌地圖，點擊按鈕

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

你有一個錯字

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

額外)是問題

Fixed it here.

Answer 2

如果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 3

我懷疑問題是您需要Google地圖的API密鑰。您的小提琴代碼不包括密鑰（也不應該給它公開可見）

w3schools詳細解釋了這一點。