6.1 Google MAP API

Submitted by sky03300 on 四, 2008-08-14 16:06

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_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後面是顯示的內容

 

檢視範例 (event-simple.html)

 

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

「地圖 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());

 

檢視範例 (event-arguments.html)

 

參考資料
map example 

map api中文同步檔  

reference

map的class function介紹 

google maps的API reference

我的範例

 

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