6.1 Google MAP API
Google MAP API
Google Map API實作時,常常必須用到部分API,在使用時也有部分事情必須注意到,像是Google所提供的某些API必須先申請一個API Key才能使用,否則是取不到資料的,所以在開始實作前,先針對我們的網域申請一組可以使用的Key這樣會比較好開發,申請完畢取得一串Key後,就可以開始實作Mashup了。
在開始使用google map api之前,最好先申請api金鑰
因為如果要在自己的網頁上使用api就一定要有自己的key
所以先說申請的流程,還蠻簡單的,如下
1.先進到這個頁面
2.
3.
Google Map
在MAP的部分首先可以利用JavaScript來顯示出我們想要的地圖,透過以下的JavaScript Code來顯示出一開始的地圖。
透過這樣的Code就可以很簡單的得到第一個地圖了(圖一),只要透過滑鼠即可簡單容易的操作MAP,再來該如何增加操作按鈕像是放大縮小的功能,甚至一開始預設的地點之類的,Google提供很容易的方式來設定,透過JavaScript就可以達到這些功能了,以下用幾行簡單的程式碼做到這些。

Map預設地點
在先前的Code裡面可以找到一行程式碼如下
map.setCenter(new GLatLng(37.4419,-122.1419),13);
這就是預設初始地圖中央的經緯度,
可以透過改變這個數值指定出想要的地點,這邊改成輔大的經緯度(25.032650095205543, 121.4339017868042), 另外程式碼中經緯度後方的數字則是預設地圖要拉多遠,數字越大則越近這邊改成16,顯示會比較清楚。 map.setCenter(new GLatLng(25.032650095205543, 121.4339017868042),16);
- 遠近操作按鈕
map.addControl(new GSmallMapControl());
- 地圖類型操作按鈕
map.addControl(new GMapTypeControl());
藉由以上的方法便可以在地圖中加入操作的按鈕了,接著新增一個地標(Marker)以及新增說明到地標,同樣的可以透過一些簡單的方式來設定。
新增地標(Marker)
var marker = new GMarker(new GLatLng(25.032650095205543, 121.4339017868042));
map.addOverlay(marker);
新增地標說明
marker.openInfoWindowHtml("Hello World!");
藉由以上的方式,這個地標新增了一個”Hello World”的說明,
若是覺得一個Tab不夠,還可以新增一個Tab來顯示地標的資訊。
可拖曳的Marker
我們在Google map上看到紅紅的marker通常可以按,會顯示一些資訊,但是不能夠拖曳,Google也提供了可以拖曳的功能,以Google提供的code來看:
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);
只要把draggable後面設定為true就可以在地圖上把marker拖曳到你想要的地方,如果
要取消這項功能,便設定為false
Tab說明視窗var infoTabs = [ new GInfoWindowTab("English", "Hello Wordl!"), new GInfoWindowTab("Chinse", "Oop...") ];
marker.openInfoWindowTabsHtml(infoTabs);

新增地標及說明後
若地圖有用到Google Maps JavaScript API 的話也是要用到key map裡面可以與其他服務的API結合,例如:Google AJAX feed API 基本地圖顯示的型態最常用的有三種:一般道路圖、衛星空照圖、道路空照混合 跟別對應到的參數為:G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP 若沒有設定地圖顯示的型態的話,預設是 G_NORMAL_MAP,就是一般道路圖 用法為 map.setMapType(地圖型態參數);
也可以新增自訂的地圖類型 如果只要特定的地圖型態的話可以用removeMapType()
或addMapType()
來修改,例如:
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
就是把利用removeMapType()
把G_HYBRID_MAP去除掉,所以在地圖上只能切換G_NORMAL_MAP和
G_SATELLITE_MAP這兩種。
此外google map 似乎還有尚未提出的API
更換marker圖
一開始的預設都是G_DEFAULT_ICON,也就是地圖上看到的紅色的marker,使用者也可以自行更換。
//創造一個圖像物件 圖為預設圖檔
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfile/ms/micons/blue-dot.png";
//更換預設圖 ""內放想要更換的圖檔名稱或是URL
blueIcon.image = "arrow_0010.gif"; //更換預設陰影圖 ""內放想要更換的圖檔名稱或是URL
blueIcon.shadow = "a.gif"; //設定圖檔大小
blueIcon.iconSize = new GSize(30, 30); //設定陰影大小
blueIcon.shadowSize = new GSize(37, 34); //設置 GMarkerOptions 對象
markerOptions = { icon:blueIcon };
增加google serch bar 在地圖上
var map2 = new GMap2(document.getElementById("mymap2"));//宣告地圖物件
map2.setUIToDefault();//
map2.enableGoogleBar();//產生goole 搜尋bar 就可在map上,下面產生出google serch bar 可搜尋地點
增加google serch bar 在地圖上
var map2 = new GMap2(document.getElementById("mymap2"));//宣告地圖物件 map2.setUIToDefault();// map2.enableGoogleBar();//產生goole 搜尋bar
就可在map上,下面產生出google serch bar 可搜尋地點
啟用使用滑鼠滾輪進行縮放
要使用滑鼠滾輪去縮放其實很簡單
只要有new出GMap2的物件之後
假設我new出的物件名稱是map
只要在initialize()的function中加入
map.enableScrollWheelZoom();即可
點兩下縮放
在google map上點兩下通常可以放大,如果要取消這項功能的話,
和滾輪縮放的寫法差不多,在initialize() 的function中加入
map.disableDoubleClickZoom(),就可以停止點兩下縮放。
路線規畫範例 用出中文
http://code.google.com/apis/ajax/playground/?exp=maps#map_directions_adv...
此範例中有提供英文,日文等等的語言
function initialize()
{
if (GBrowserIsCompatible())
{ map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));//路線規畫的
function GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors); setDirections("X", "Y", "zh-TW");//此處X為設定起始點,Y是目的地點 第三個傳入的?數是語言,zh-TW為繁體中文
}
}
function setDirections(fromAddress, toAddress, locale)
{
gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
}
下面下拉式選單 <option value="zh-TW">中文</option>
就能選中文了
地圖事件
- 事件接聽程式
「Google 地圖 API」中的事件,是使用 GEvent 命名空間中公用程式函式註冊事件接聽程式的方式進行處理。每個「地圖 API」物件匯出一系列具名的事件。例如,GMap2 物件匯出 click、dblclick 和 move 事件,其他物件也會產生類似事件。每個事件會在指定情境中發生,而且可以傳送識別該情境的引數。例如,如果使用者在地圖物件中移動滑鼠,並傳送滑鼠所在之地理位置的 GLatLng,就會引發 mousemove 事件。
範例:
var map = new GMap2(document.getElementById("map"));
//new一個map
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
//指定地圖起始座標
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
//新增事件,click是點擊地圖的事件,function這次是執行alert後面是顯示的內容
- 在事件中使用傳送的引數
「地圖 API」事件系統中的很多事件,在事件觸發時,都會傳送引數。如果在地圖的疊加層發生點擊的話,則 GMap2
「按一下」事件會傳送 overlay
和 overlaylatlng
;否則它會傳送地圖座標的 latlng
。您可以將指定的符號直接傳送給事件接聽程式中的函式,以使用這些引數。
在下列範例中,我們先進行測試,以確認「按一下」是位於地圖方塊上 (檢查是否已定義 latlng
引數);如果是的話,我們會在按一下的座標上方開啟資訊視窗,顯示轉換為像素空間與縮放等級的座標。
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
//new map 跟 設座標
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
//加入事件當點及地圖時會回傳座標
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
參考資料
map example
Google MAP API使用介紹部分撰寫 by up2ustar