2007年9月24日

Google Maps API 實作範例

　　本篇文章介紹如何利用 Google Maps API 來把 Google 所提供的地圖服務內嵌到你的網頁中，並且將座標定至你所要標記的地點。

步驟1：先申請一組 Google Maps API Key
  1. [ 按此進入 ] Google Maps API Key申請頁面。

  2. 將核取控制項打勾，並將欲申請Google Mass API的網址填入(例如：http://my-web-design.blogspot.com/)。

  3. 按 "Generate API Key" 取得 Key。

  4. 最後會出現三個方塊，分別是你取得的 Key，你指定的 URL，以及一個範例。

    範例中會有如下的片段：

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAsYV7UusYC8W-CUCDLpFQYRREFBcOGxpqCCUdK6ZnJW0Tb_Kj_BRWDfzZYc6lwJiQloNiuOKFThoUBQ"
    type="text/javascript"></script>

    紅字的部份就是你的 Google 地圖 key，此段JavaScript需放至<head></head>之間。

步驟2：取得欲標記的地點的經緯座標值

  1. [ 按此進入 ] Google Maps搜尋頁面。

  2. 輸入欲標記的地點的地址或名稱，並按"搜尋地圖"(例如：台南火車站)。

  3. 確認搜尋結果無誤後，請按"連結至此網頁"，取得地圖的連結。

    連結如下：

    http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E5%8F%B0%E5%8D%
    97%E7%81%AB%E8%BB%8A%E7%AB%99&sll=22.996733,120.212465
    &sspn=0.00721,0.014462&ie=UTF8&ll=22.997686,120.212467&spn=0.00721,0.014462
    &z=16&iwloc=addr&om=1

    紅字的部份分別是經度及緯度。


步驟3：將以下範例程式片段copy到<body></body>之間：
<!--Google Map 顯示的位置，可自由決定大小-->
<div id="mymap" style="width: 500px; height: 500px"></div>

<!--以下為控制Google Maps的JavaScript-->
<script type="text/javascript">

//<![CDATA[
var map = new GMap(document.getElementById("mymap"));

//設定要顯示的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//決定你 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(22.996733, 120.212465), 16);

//標記在 Google 地圖上的經緯度
var point = new GLatLng(22.996733, 120.212465);
var marker = new GMarker(point);
map.addOverlay(marker);

//在地圖上放置標點說明
var html = "台南火車站";
map.openInfoWindowHtml (map.getCenter(), html);

//]]>
</script>



詳細說明：
//設定要顯示的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Google Maps API 內建四種控制項：

  1. GLargeMapControl : 適合給大型地圖的控制項。

  2. GSmallMapControl : 適合給小型地圖的控制項。

  3. GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。

  4. GMapTypeControl : 顯示地圖型態切換的控制項。

//決定你 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(22.996733, 120.212465), 16);

設定 Google 地圖的中心點位置和縮放大小：

  • setCenter(GLatLng(經度, 緯度), [+ 放大(近)] -> [- 縮小(遠)]);

//標記在 Google 地圖上的經緯度
var point = new GLatLng(22.996733, 120.212465);
var marker = new GMarker(point);
map.addOverlay(marker);

//在此標記所要顯示的資訊
var html = "台南火車站";
map.openInfoWindowHtml (map.getCenter(), html);

在地圖上標記地點：

  1. 設定座標值：
    var point = new GLatLng(22.996733, 120.212465);
    var marker = new GMarker(point);

  2. 在地圖上放置標點 :
    map.addOverlay(marker);

  3. 在地圖上放置標點說明 :
    var html = "台南火車站";
    map.openInfoWindowHtml (map.getCenter(), html);

關鍵字