2014年11月26日 星期三

Google Map Api V3 入門

Hello, World

要瞭解 Google Maps API，最簡單的方法就是查看簡單的範例。以下網頁會顯示將中心鎖定在台灣101的地圖。

<!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: 0; padding: 0 }
                #map_canvas { height: 100% }
            </style>
            <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
            </script>
            <script type="text/javascript">
                function initialize() {
                    var mapOptions = {
                        center: new google.maps.LatLng(25.033807,121.564759),
                        zoom: 17,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
                }
            </script>
        </head>
        <body onload="initialize()">
            <div id="map_canvas" style="width:100%; height:100%"></div>
        </body>
</html>


1.          透過 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5。
2.          使用 script 標記來加入 Maps API JavaScript。
3.          建立 div 元素 (名稱為「map_canvas」) 來容納「地圖」。
4.          建立 JavaScript 物件常值以存放多個地圖屬性。
5.          撰寫 JavaScript 函式以建立「地圖」物件。
6.          從 body 標記的 onload 事件初始化地圖物件。



將應用程式宣告為 HTML5

<!DOCTYPE html>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

載入 Google Maps API 

 key=YOUR_API_KEY以這版本來說除非你是地圖載入量非常大的才需要管制的，平常可直接拿掉。
sensor=SET_TO_TRUE_OR_FALSE 決定要不要使用感應器，像是GPS定位等等。
<html>
<head>
<script type="text/javascript"   src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

HTTPS

 如果應用程式是 HTTPS 應用程式，可能會希望改為透過 HTTPS 載入 Google Maps JavaScript 
API：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>
SSL 應用程式必須透過 HTTPS 載入 Maps API，才能避免在多數瀏覽器中收到安全性警告。此外，對於要求中含有敏感使用者資料 (如使用者位置等) 的應用程式，也建議採取這種做法。

以非同步方式載入 API


 下列程式碼會指示應用程式在網頁完全載入之後再載入 Maps API (使用 window.onload)，並且將 Maps JavaScript API 寫入網頁的 <script> 標記內。此外，還會傳遞 callback=initialize 給 Maps API 開機要求，指示其在 API 完全載入之後，才執行 initialize() 函式：

function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

地圖 DOM 元素 

<div id="map_canvas" style="width: 100%; height: 100%"></div>
名稱為「map_canvas」的 <div>，使用樣式屬性來設定它的大小。請注意，這個大小設定為「100%」，表示它會展開到適合行動裝置的螢幕大小。需要根據瀏覽器的螢幕大小和邊框間距調整這些值。

地圖選項

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
為了初始化地圖，會先建立 Map options 物件以納入地圖初始化變數。不會建構這個物件，而會以物件常值形式建立這個物件。
var mapOptions = {};

 緯度和經度

 要將地圖中心 center 放置在特定的點上，建立了 LatLng 物件，然後按照 {經度, 緯度} 的順序傳送位置的座標，以存放這個位置：
center = new google.maps.LatLng(-34.397, 150.644)

縮放等級 

 可設定 zoom 屬性，指定地圖顯示的起始解析度，而其中縮放等級 0 代表完全縮小的地球地圖，而較高的縮放等級會以較高的解析度放大地圖。
zoom: 8

地圖類型 

此時您也必須明確設定初始地圖類型。

mapTypeId: google.maps.MapTypeId.ROADMAP
支援的地圖類型如下：

ROADMAP 顯示 Google 地圖的正常、預設 2D 地圖方塊。
SATELLITE 可顯示攝影地圖方塊。
HYBRID 可顯示混合攝影地圖方塊與重要地圖項 (道路、城市名稱) 的地圖方塊圖層。
TERRAIN 可顯示實際起伏的地圖方塊，以呈現海拔高度和水域圖徵 (山嶽、河流等)。

地圖物件 

 建立新的地圖實例時，必須在網頁中指定 HTML 元素 <div> 做為地圖的容器。HTML 節點是 JavaScript document 物件的子項，而我們可以透過 document.getElementById() 方法來取得此元素的參照。
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

載入地圖 

為了確保網頁完全載入之後地圖才會放到網頁上，只有在 HTML 網頁的 <body> 元素收到 onload 事件時，才會執行建構 Map 物件的函式。這樣做可以避免無法預期的行為，並更能控制繪製地圖的方式和時機。
  <body onload="initialize()">



如果您喜歡我的文章，請在文章最末按5下Like!
我將得到LikeCoin的回饋:)

回饋由LikeCoin基金會出資，您只要註冊/登入帳號(FB、Google帳號都可以註冊，流程超快)，按L五次左鍵，可以贊助我的文章且完全不會花到錢！
支持創作，正向交流:)
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)