2011/05/19

[Google] Google Map API v3 範例

其實應該看過 Google 官方網頁說明 就好了,就不用再寫什麼筆記來說明怎麼寫一個 Google Map API 了。

不過,因為 Google Map API v2 跟 V3 的差別不小,所以還是寫一個筆記來說明一下。

0. 不用申請 api key 了。
1. 要 Detect User Location ,就要用 v3。 (就是抓瀏覽網頁的這個使用者的位置)
2. 要用滑鼠滾輪,請用 v3 。(v2 我不知道用什麼方法可以,不過預設就不行,所以我就改 v3 了)
3. div 的位置有改變,所以 v3 比較好用。 v2 的 division 要放在 body 這個標籤之中,會有 js 載入的先後之類的問題, v3 變作一個 function 去呼叫,這樣使用比較方便。


好,廢話說完了,開始說明,怎麼使用:

1. 需要 load 兩隻 js 進來:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>

2. 使用時呼叫 function init 就可以 (範例是在 body onload 時呼叫)
function init()
{
var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
var pos = new google.maps.LatLng(40.69847032728747, -73.9514422416687);

map.setCenter(pos);
infowindow.setContent("my comment");
infowindow.setPosition(pos);
infowindow.open(map);
}


3. 你想秀地圖的地方,就是用一個 div 包起來, id 我這邊取叫 "mymap"。
4. 參數說明:
zoom 的部份可以微調。數字愈小就看得東西愈多,愈大就愈精細。
經緯度的部份是在這一行:
pos = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
要再自已去 google map 找一下地點,然後看一下 ll 等於多少,再自已加進來。

步驟就是這樣而已,其實很簡單吧?

--
Google 官方網頁說明
Google Map API v 2 的範例 這篇寫的很棒很簡單,也感謝主人一下。
張貼留言

[Windows] 好用的小工具: AutoHotKey

做為一個 Linux 的愛好者,轉移到 Windows 上面的時候,往往難以適應 Windows 調整快捷鍵的方式,所以 google 了一下,結果發現很多人愛用的 "Auto Hot key"。不多說,就來給一個範例說明如何使用 Auto Hot key 來...