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就可以達到這些功能了,以下用幾行簡單的程式碼做到這些。

 

圖一 Google MAP↑

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_advanced

此範例中有提供英文,日文等等的語言

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 物件匯出 clickdblclick 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後面是顯示的內容

 

檢視範例 (event-simple.html)

 

  • 在事件中使用傳送的引數

「地圖 API」事件系統中的很多事件,在事件觸發時,都會傳送引數。如果在地圖的疊加層發生點擊的話,則 GMap2「按一下」事件會傳送 overlayoverlaylatlng;否則它會傳送地圖座標的 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());

 

檢視範例 (event-arguments.html)

 

參考資料
map example 

map api中文同步檔  

reference

map的class function介紹 

google maps的API reference

我的範例

 

Google MAP API使用介紹部分撰寫 by up2ustar