Google 地圖API 實作範例 (教你回何將Google地圖放到網頁中.)

作者:admin 日期:2008-07-14

字體大小: 小中大

今天興致來朝玩了一下Google的Map，覺得還真的不錯，尤其開放了API之後，受益最多的應該是牽涉到旅遊、休閒..等涉及地圖服務相關網站，真的挺方便的喔！小弟就簡單的介紹一下如何利用Google所提供之 Maps API 將 Google 地圖服務內嵌到你的網頁中，並且將座標定至你所要標記的地點。

步驟1：先至 Google Maps 申請一組 API Key (網址：http://www.google.com/apis/maps/signup.html)

1. 將核取控制項打勾(I have read and agree with the terms and conditions的那個按鈕)，並將欲申請Google Maps API的網址填入(例如像本站就輸入：http://www.pro-soho.com )。

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

3. 最後會出現三個方塊，分別是你取得的 Key (Your key is)，你設定之URL(This key is good for all URLs in this directory:)，以及一個範例(Here is an example web page to get you started on your way to mapping glory)。

範例中會有如下的片段：

程序代碼

此段中(key=ABQIAAAAU42K6cZiPBspSseDAjgVrxRepqq5VEHxc05H62box0rt476kmhQ0nk6V2K6RWEv9xHr3ovELZDXswA)
等於後面的這串ABQ......swA就是你的key，整段JavaScript需放至HTML中之<head></head>之間。

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

1. 進入 Google Maps搜尋頁面：http://maps.google.com/maps/ms?ie=UTF8&hl=zh-TW&msa=2
2. 輸入欲標記的地點的地址或名稱，並按"搜尋地圖"(例如：桃園大飯店)。
3. 確認搜尋結果無誤後，請按"連結至此網頁"，取得地圖的連結。
連結如下：

程序代碼

http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E6%A1%83%E5%9C%92%E5%A4%A7%E9%A3%AF%E5%BA%97&ie=UTF8&ll=24.853419,121.231384&spn=0.255451,0.422974&z=11

步驟3：將以下範例程式片段copy到<body></body>之間：

程序代碼

<div id="mymap" style="width: 500px; height: 500px"></div>


<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(24.853419,121.231384), 16);

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

//在地圖上放置標點說明
var html = "桃園大飯店";
map.openInfoWindowHtml (map.getCenter(), html);

//]]>
</script>

範例網址：http://www.pro-soho.com/Blog/GoogleMap.htm

相關參數說明：

程序代碼

//設定要顯示的控制項
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(24.853419,121.231384), 16);

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

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

程序代碼

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

//在此標記所要顯示的資訊
var html = "桃園大飯店";
map.openInfoWindowHtml (map.getCenter(), html);

在地圖上標記地點：

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

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

3. 在地圖上放置標點說明 :
var html = "桃園大飯店";
map.openInfoWindowHtml (map.getCenter(), html

[本日誌由 admin 於 2008-07-14 11:20 PM 編輯]