2012年4月24日 星期二

Google Map API 入門教學(一):將 Google Map 放入網頁

Google Map API 目前已經是 v3 版本了,不需要特別申請 API,不過規定跟之前一樣,不能將 Google Map API 用在需要付費的地方。

Google 官方文件其實已經有蠻不錯的入門教學,不過說明個人覺得稍微少了點
所以自己在學習的同時也順便來記錄一下!

要在網頁上顯示 Google Map,最基礎需要的就是一個 HTML 網頁
然後網頁中去執行 Google 提供的 JavaScript API 在網頁上顯示地圖。
網頁的部份其實後續很少在改,因為動作幾乎都是靠 JavaScript 在做的。


網頁部分的 HTML 語法如下:

index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
  </style>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="index.init.js"></script>
</body>
</html>

這裡就很簡單在 body 中放一個要容納 Google Map 的 div 元素,元素的 id 是「map_canvas」
然後指定它的長跟寬都是視窗的 100%(也就是佔滿畫面 XD)。
最重要的是這裡匯入了一個 index.init.js 檔案,初始化 Google Map 的 JavaScript 就都寫在那裡。
另外由於我習慣用 jQuery 來寫 JavaScript,所以也匯入了 jQuery 的套件 XD。

接著就是 JavaScript 的部分了:

index.init.js
var currentMap;

$(function(){
  initialize();
});

function initialize() {
  // Define a location
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  // Define an option of map
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  // Create a map
  currentMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

JavaScript 的內容很簡單,就是網頁讀取完畢之後呼叫 initialize() 函式
initialize() 函式先建立一個 Google Map 的座標物件
接著產生一個 Google Map 的設定
建立 Google Map 時就把設定餵給它,並且指定要顯示在 id="map_cancas" 的這個元素上。
這樣就可以產生一個 Google Map 的畫面,並且指定預設的顯示位置了。

其中,JavaScript 當中的特殊參數的意義如下:
  • google.maps.LatLng:這是 Google Map API 中代表一個經緯度的座標物件,在 Google Map API 中要表達一個位置都要用這個物件來表達。
  • zoom:建立 Google Map 時需要輸入的選項,表示地圖要顯示的精細等級,允許範圍是 1~20,越大表示越精細(視野越小、道路與建築物資訊越精細)。
  • center:指定 Google Map 的中心點的座標。
  • mapTypeId:指定 Google Map 顯示的方式,可以輸入四種值,RoadMap(道路地圖)、Satellite(衛星地圖)、Hybrid(衛星地圖加上道路資訊)、Terain(地形圖)。

參考資料:
1、Google 官方的教學文件
2、Google Map API 實作 Part I

沒有留言: