簡易Google地圖教學(Google Maps JavaScript API V3)

從Google的官方網站中已知Version 3的版本在下載速度上已比Version 2快很多，尤其在Android平台的行動裝置上更能展現其效能，對開發者來說最高興的莫非是此版本已不需要申請API keys，這件事情實在對開發者來說比速度快個零點幾秒鐘來說還令人 感到興奮，開發當中任何可以簡單的事情都是王道，所以在此文章我們也分享我們用來用去最常用的使用Google地圖的做法，雖然簡單，但是真的是在一般案子中可以一用再用。

我們所要做的就是從db裡loop出來一堆地址，再從地址旁點選小圖來展開google地圖，首先我們先來說如何loading新的Google Maps JavaScript API：

 

V3變的很簡單，只須簡單的使用上方Javascript的src指向http://maps.google.com/maps/api/js 即可，但後方參數sensor為必要的，當sensor=true時指你要使用sensor來定位(如GPS裝置)，因為我們的例子只是用於網頁程式，所以我們將sensor設為false， 現在我們用ASP.NET簡易的從db中叫出要使用地圖的地址(可點選地圖試試)：

高雄縣鳳山市光復路二段132號
台北市和平東路三段5號
東京都豊島区東池袋3-1-5

上方我們用ASP.NET GridView來從db把地址抓出來，最重要的是我們在產生"地圖"的小icon時把連結的link後方帶入地址的參數，用另開視窗的方式來打開地圖，我們link的語法如下：，address 後方帶的地址看起來像亂碼，其實是為了確保中文地址可以在URL上正確的傳遞，我們在傳遞時使用Server.UrlEncode的方法來Encode我們的地址(Server.UrlEncode的使用方法及說明請參閱http://msdn.microsoft.com/en-us/library/axc6fkkb.aspx)，我們map.aspx程式如下：

我們首先看以上範例，最重要就是剛開始有提到的loading API的之後我們來看我們主要的JAVASCRIPT程式，在主要的script內有宣告兩個物件變數：geocoder及map，之後 我們在function initialize()中來產生他們的instance，geocoder = new google.maps.Geocoder();就是我們去new一個geocoder instance的方法，geocoder主要的目的主要是去將實體的地址轉變成google map能定位的經緯度，至於產生新的map instance方式就為map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 在construct google.maps.Map時須帶2個參數，第一就是在網頁地圖上要顯示的div id的名稱，目的就是要google.maps.Map知道顯示在哪裡，第二就是帶入要google.maps.Map產生的起始型態，如zoom的大小或是地圖要產生的形態，initializ function只是初始化geocoder物件，最後再codeAddress()中用Request.QueryString["address"]將地址接收傳至geocoder的geocode中， 目前這種方法最大的好處是可以直接將地址轉換成地圖，而不須用經緯度的方式，但Google會限制其使用的次數。
資料來源