第一个Google map 的数据地图
Google Maps API - 第一個範例在網頁嵌入 Google Map
在生成 Google Maps API Key 的頁面會看到 Google Maps API 的第一個範例，如下︰
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6
7 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
8
9 <title>Google Maps JavaScript API Example</title>
10
11 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w" type="text/javascript"></script>
12
13 <script type="text/javascript">
14
15 //<![CDATA[
16
17
18
19 function load() {
20
21 if (GBrowserIsCompatible()) {
22
23 var map = new GMap2(document.getElementById("map"));
24
25 map.setCenter(new GLatLng(37.4419, -122.1419), 13);
26
27 }
28
29 }
30
31
32
33 //]]>
34
35 </script>
36
37 </head>
38
39 <body onload="load()" onunload="GUnload()">
40
41 <div id="map" style="width: 500px; height: 300px"></div>
42
43 </body>
44
45 </html>
http://maps.google.com/maps?file=api&v=2&key=XXXXXX 其中 key= 後面就是你所取得的 Google Maps API Key。
<div id="map" style="width: 500px; height: 300px"></div> 用來擺置 Google Map，其中 style="width: 300px; height:300px" 則是指定地圖區塊大小。
GBrowserIsCompatible() 判斷 Google Maps API 是否可用於當前的瀏覽器中，如當前瀏覽器支援 Google Maps API 則回傳 true。
var map = new GMap2(document.getElementById("map")); 宣告一個 GMap 物件，其中 "map" 就是先前用來擺置 Google Map 所宣告 div 標籤的 id。
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 將地圖的中心點設定在經度 37.4419 和緯度 -122.1419，而 Zoom Level 在這範例中設成 13（1 為最大，數字越大 Zoom Level 越小）。在這或許會有個疑問，要怎麼知道某個地點的經緯度？可以利用 Google Map 找到要的地點固定在中間，然後按下『連結至此網頁』 URL 上就有該點的經緯度了，例如 http://maps.google.com/maps?ie=UTF8&ll=25.08532,121.561498&spn=0.291039,0.6427&z=11 紅字部分就是該點的經緯度。在往後的教學中會再介紹如何運用 Google Maps API 取得經緯度。
<body onload="load()" onunload="GUnload()"> 釋放 Google Maps API，在這要注意的是應在頁面的 unload 事件處理程序中使用此函數，不可在 Google Maps API 執行中使用。
