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);