[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 的範例 這篇寫的很棒很簡單，也感謝主人一下。