Google Maps API 測試

要在網頁中顯示一張 Google 地圖, 首先需匯入 Google Maps API :

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

這裡 sensor=false 表示此為一般電腦, 不是行動裝置,  不使用感應器. 

其次, 必須在網頁中放置一個 DIV 元素當作畫布, 並指定畫布大小 :

<div id="canvas" style="width:500px; height:400px"></div>

為了以 Javascript 操控地圖的繪製, 必須給予獨一的 id, 此處我們使用 jQuery 來操作畫布元素. 

var canvas=$("#canvas")[0];

注意, $("#canvas") 所取得的是畫布的 jQuery 包裹物件, 必須呼叫 get() 或用陣列元素 0 取得其 DOM 物件才能為 Google Maps API 所用. 

要繪製谷歌地圖必須先建立地圖中心點的座標物件與地圖物件. 首先傳入緯度與經度給 Goolge Maps API 的 LatLng() 方法來建立座標物件 :

var latlng=new google.maps.LatLng(22.66, 120.35);

這裡傳入的參數是高雄澄清湖中心的經緯度 : 北緯 22 度 66 秒, 東經 120 度 35 秒. 第一個參數為緯度, 第二個參數為經度.

其次是呼叫 Goolge Maps API 的 Map() 方法建立地圖物件, 此方法須傳入網頁中的畫布物件, 以及一個選項物件當參數 :

var opt={zoom:14, center:latlng, mapTypeId:"roadmap"};

這個選項物件實體主要指定了地圖的放大倍數 zoom 為 14 倍, 中心點座標 center 為所建立之座標物件, 以及地圖類型為道路地圖 "roadmap" (API 中定義了一個字串常數 google.maps.MapTypeId.ROADMAP, 事實上其值為一個字串 "roadmap", 即道路地圖). 

這樣就可以呼叫 Map() 方法建立地圖物件了 :

var map=new google.maps.Map(canvas, opt);

最後, 將座標物件與地圖物件傳給 Marker() 方法就會繪製地圖了 :

var marker=new google.maps.Marker({position:latlng, map:map});



其他更多詳細教學內容請到原始文章閱讀