步驟1：先申請一組 Google Maps API Key
- [ 按此進入 ] Google Maps API Key申請頁面。
- 將核取控制項打勾，並將欲申請Google Mass API的網址填入(例如：http://my-web-design.blogspot.com/)。
- 按 "Generate API Key" 取得 Key。
- 最後會出現三個方塊，分別是你取得的 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：取得欲標記的地點的經緯座標值
- [ 按此進入 ] Google Maps搜尋頁面。
- 輸入欲標記的地點的地址或名稱，並按"搜尋地圖"(例如：台南火車站)。
- 確認搜尋結果無誤後，請按"連結至此網頁"，取得地圖的連結。
連結如下：
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 內建四種控制項：
- GLargeMapControl : 適合給大型地圖的控制項。
- GSmallMapControl : 適合給小型地圖的控制項。
- GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。
- 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); |
在地圖上標記地點：
- 設定座標值：
var point = new GLatLng(22.996733, 120.212465);
var marker = new GMarker(point); - 在地圖上放置標點 :
map.addOverlay(marker); - 在地圖上放置標點說明 :
var html = "台南火車站";
map.openInfoWindowHtml (map.getCenter(), html);
全站熱搜
留言列表
