Ian 懶惰蟲筆記: Google Maps API - 第一個範例在網頁嵌入 Google Map

在生成 Google Maps API Key 的頁面會看到 Google Maps API 的第一個範例，如下︰
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /> <head> <br /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <br /> <title>Google Maps JavaScript API Example</title> <br /> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAG_4i2swR3KOd-nGYrlrt8RTkyS8SRe_kYPTAbwTumvAqao01PRRUcCtCzTBnNH2kRURGR8RhQQoZ3w" type="text/javascript"></script> <br /> <script type="text/javascript"> <br /> //<![CDATA[ <br /> <br /> function load() { <br /> if (GBrowserIsCompatible()) { <br /> var map = new GMap2(document.getElementById("map")); <br /> map.setCenter(new GLatLng(37.4419, -122.1419), 13); <br /> } <br /> } <br /> <br /> //]]> <br /> </script> <br /> </head> <br /> <body onload="load()" onunload="GUnload()"> <br /> <div id="map" style="width: 500px; height: 300px"></div> <br /> </body> <br /></html> <br />
看範例所呈現的結果

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 執行中使用。

參考︰
‧class GMap2︰setCenter(center, zoom?, type?)
‧function GBrowserIsCompatible
‧function GUnload

更多教學文件在此︰Google Maps API - 前言及目錄