中文 | English | 網址轉FACEBOOK專頁服務
極光創意程式設計公司

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


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

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

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

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的語法如下:<a href='map.aspx?address=%e9%ab%98%e9%9b%84%e7%b8%a3%e9%b3%b3%e5%b1%b1%e5%b8%82%e5%85%89%e5%be%a9%e8%b7%af%e4%ba%8c%e6%ae%b5132%e8%99%9f' target='_blank'>,address 後方帶的地址看起來像亂碼,其實是為了確保中文地址可以在URL上正確的傳遞,我們在傳遞時使用Server.UrlEncode的方法來Encode我們的地址(Server.UrlEncode的使用方法及說明請參閱http://msdn.microsoft.com/en-us/library/axc6fkkb.aspx),我們map.aspx程式如下:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}

function codeAddress() {
var address = '<%=Request.QueryString["address"] %>'
if (geocoder) {
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>

<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:90%"></div>
</body>
</html>

我們首先看以上範例,最重要就是剛開始有提到的loading API的<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>之後我們來看我們主要的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會限制其使用的次數。

回上一頁