Google Maps API - 網頁載入地圖( 起手式)

Google Maps API 是我一直以來都很想研究的主題，在手機、行車記錄器與網路、GPS 發達的年代，每個人應該都有用過Google Map，接下來想花些時間，好好的把Google Maps ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere GoogleMapsAPI-網頁載入地圖(起手式) GoogleMapsAPI是我一直以來都很想研究的主題，在手機、行車記錄器與網路、GPS發達的年代，每個人應該都有用過GoogleMap，接下來想花些時間，好好的把GoogleMapsAPI學習學習，搞不好之後會很常用到也說不定。

啟用GoogleMapsEmbedAPI 如果要更近一步的操作地圖，必須使用GoogleMapsAPI來實現，要使用對應的API，則是要用Google帳號登入GoogleAPIConsole，裡面包含了各式各樣的服務，每種服務都有提供一個以上的API。

參考：GoogleAPIConsole 一開始，最基本要啟用的是GoogleMapsEmbedAPI，點選GoogleMapsEmbedAPI並且啟用就可以，啟用後，在專案的資訊主頁裡，就會看到出現對應的API。

建立憑證 在使用GoogleMap服務的時候，都必須先申請憑證才能使用，點選「憑證」，接著點選「建立憑證」，選擇API金鑰，就可以開始建立專屬的金鑰key。

API金鑰就是一段很長的代碼，這段代碼可以讓Google識別是哪個使用者在用對應的服務，並且根據使用者權限和使用的服務，提供對應的功能和限制。

建立金鑰之後最重要的事情，就是限制金鑰，限制金鑰也就是保護金鑰，避免金鑰外流造成別人也能用(假設這個金鑰一天只能用100次，外流之後別人用了99次，你就只能用1次)，限制的方法有以下幾種：HTTP參照網址、IP位址、Android應用程式與iOS應用程式，舉例來說如果我將我申請的金鑰限制設定為HTTP參照網址，並且輸入我的domainname作為規則，這組金鑰就只能在我的部落格使用，別的網站就無法使用。

網頁嵌入地圖 記下剛剛申請的金鑰，就可以來把地圖放到網頁裡，放進去的語法只是用個iframe表現，填入金鑰以及地點，執行後就會看到網頁出現地圖，並且按照標示我們輸入的地址或地點，網址src的URL，須按照GoogleMapsEmbedAPI的要求撰寫： https://www.google.com/maps/embed/v1/模式?key=你的金鑰&參數 先看到模式，模式分成下列五種： place地點模式 模式使用place，就可以定義一個位置或地址，使用place時，後方會用q參數定義要在地圖上著重展示的地點，如果有遇到「空格」，可用+號表示，舉例來說，將q等於「高雄市政府」，打開網頁之後就會看到高雄市政府所在地出現標記。

範例：demo01.html directions路線規劃模式 路線規劃模式有幾個參數可以選擇，分別是： origin路線起點(必須) destination路線終點(必須) waypoints路線中間的點，可使用|符號分隔。

mode旅行方式，包含driving、walking、bicycling、transit和flying。

avoid避開一些特殊線，包含tolls、ferries和highways，可使用|符號分隔。

。

units單位，包含metric或imperial。

舉例來說，下方的程式將會在地圖上，標記出從台北市政府前往台北小巨蛋的路線，路線沿途會經過台北101與國父紀念館。

範例：demo02.html Search搜尋模式 搜尋模式有三個參數： q：搜尋的關鍵詞(必須)。

zoom：地圖的縮放大小，範圍從0到21。

center：中心點經緯度。

以下面的例子來說，將會標記出台北101周圍的711位置。

範例：demo03.html View檢視模式 在view的模式下，會傳回沒有標記或路線的地圖，而這個模式有幾個參數： center：中心點經緯度(必須)。

zoom：地圖縮放大小，範圍從0到21。

maptype：定義載入的地圖方塊類型，包含roadmap和satellite(衛星空照)。

language：定義UI元素以及地圖方塊上顯示的標籤要使用的語言。

region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

以下面的例子來說，將會使用衛星空照圖，以台北101為中心顯示。

範例：demo04.html streetview街景服務模式 街景模式能提供一個可將全景轉譯為球體的檢視器，而相機將位於球體的正中間，提供單一位置的完整360度檢視。

影像包含360度的水平檢視（全方位環繞）以及180度垂直檢視（垂直上下），這個模式有以下幾個參數： location：經緯度，以逗號分隔(必須)。

pano：特定的全景ID，如果沒有location一定要有這個參數。

heading：從北方順時針旋轉的角度指出相機指南針所指的方向(-180~360)。

pitch：指定相機往上或往下的角度，預設為0(-90~90)。

fov：影像的水平視野，數字越大視野越廣，預設為90(10~100)。

language：定義UI元素以及地圖方塊上顯示的標籤要使用的語言。

region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

以下面的例子來說，會顯示完整的台北101街景圖。

範例：demo05.html 小結 以上就是透過最基本的GoogleMapsEmbedAPI所實現的地圖做法，這個做法雖然陽春，但也能滿足部分的地圖需求，接下來會在繼續把Google地圖的用法做個完整的練習。

BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO