首先是基於Google Maps JavaScript API v3
要創建 API 密鑰，請執行以下操作：
- 訪問 API 控制檯（網址爲 https://code.google.com/apis/console）並使用您的 Google 帳戶登錄。
- 點擊左側菜單中的服務鏈接。
- 激活 Google Maps API v3 服務。
- 點擊左側菜單中的 API 訪問鏈接。您可以從 API 訪問頁上的簡單 API 訪問部分獲取 API 密鑰。Maps API 應用會使用適用於瀏覽器應用的密鑰。
默認情況下，密鑰可在任何網站上使用。強烈建議您將自己的密鑰限制爲在您所管理的域中使用，以防止未授權的網站使用該密鑰。針對您的密鑰點擊修改允許的引用者... 鏈接，即可指定要允許哪些域使用該 API 密鑰。
Hello, World
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>查看示例 (map-simple.html)
儘管此示例較爲簡單，也請注意以下事項：
-
在此示例中，使用
<!DOCTYPE html>聲明將應用聲明爲 HTML5。 -
使用
script標記加入 Maps API JavaScript。 -
創建一個名爲“map_canvas”的
div元素以存儲該地圖。 - 創建 Javascript 對象常量以存儲若干地圖屬性。
- 編寫 JavaScript 函數以創建“map”對象。
-
通過
body標記的onload事件初始化該地圖對象。
下面對這些步驟進行了說明。
將您的應用聲明爲 HTML5
建議您在自己的網絡應用內聲明一個真實的DOCTYPE。在本文的示例中，我們使用簡單的
HTML5 DOCTYPE 將應用聲明爲
HTML5，如下所示：<!DOCTYPE html>
當前的大多數瀏覽器會以“標準模式”呈現使用此 DOCTYPE 聲明的內容，這意味着您的應用應具有更強的跨瀏覽器適應能力。DOCTYPE 還設計爲可適度降級；無法理解該聲明的瀏覽器會將其忽略，並使用“兼容模式”來顯示其內容。
請注意，某些在兼容模式下工作的 CSS 在標準模式中是無效的。具體地說，所有以百分比表示的大小必須繼承自父塊元素，而如果這些父元素中的某個父元素沒有指定大小，則系統會將其大小假定爲 0x0 像素。因此，我們加入了以下 <style> 聲明：
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>加載 Google Maps API
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
script 標記中包含指向 JavaScript 文件所處位置的網址，該 JavaScript 文件可加載使用 Google Maps API 所需的所有符號和定義。script 爲必填標記。
key 參數包含您應用的 API 密鑰。有關詳情，請參閱獲取
API 密鑰。請注意，此密鑰不適用於 v2 API，且必須通過 API 控制檯生成。
網址的 sensor 參數（必須添加）用於表示應用是否會使用 GPS 定位器等傳感器來確定用戶的位置。在此示例中，我們將該參數設爲變量“set_to_true_or_false”，用於強調您必須將該值明確設爲 true 或 false。