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
沒有留言:
張貼留言