中文 | English

【物聯網開發系列】視覺化位置呈現 (Google Map 服務設定篇)

上幾篇文章:【物聯網開發系列】視覺化資料呈現(GOOGLE CHART篇),【物聯網開發系列】視覺化呈現連續資料(GOOGLE LINE CHART 篇,筆者提到了Google Map 視覺化呈現的技巧,如下圖所示:

圖 1 使用地圖描點的視覺化Google Map

由於 Google Developer 對於 Google Map 雲端服務已經取消免費的優惠,進而需要開發者取得開發資格,才能使用 Google Map 雲端服務,所以本文將介紹如何開啟 Google Map 雲端服務的 Google Developer 身分。

Google Cloud Platform 介紹

首先,我們接續著上篇文章的網址:https://developers.google.com/maps/documentation/javascript/adding-a-google-map,可以看到下圖,請點選下圖左邊紅框處:

我們點選上圖紅框處,進到網址:https://developers.google.com/maps/documentation/javascript/get-api-key,如下圖所示:

圖 3需要取得API_Key

如下圖所示,我們點選Google Cloud Platform Console,進入網址:https://console.developers.google.com/apis/dashboard?project=prgbruce&authuser=1&hl=zh-Tw&duration=PT1H,我們見到如下圖所示之畫面:

圖 4 Google Cloud Platform Console主頁

Google Map Platform 介紹

由於Google Developer對於Google Map雲端服務已經取消免費的優惠,進而需要開發者取得開發資格,才能使用Google Map雲端服務,所以接下來將介紹如何開啟Google Map雲端服務的Google Developer身分。

我們Google Cloud Platform雲端資源:Google Cloud Platform,網址:https://console.developers.google.com/?hl=zh-Tw,登入Google 帳號,我們可以看到下圖: Google Cloud Platform雲端資源 (Google_Cloud_Platform, 2018)。

圖 5 Google Cloud Platform Console主頁

啟用api

如下圖所示,我們點許下圖紅框處,啟動api與服務。

圖 6啟用api

接下來我們切換到網址:https://developers.google.com/maps/documentation/javascript/tutorial,如下圖所示,我們開始來教讀者如何使用Google Map雲端資源。

圖 7 開啟新版api

如下圖所示,我們點選 javascript_api 功能。

圖 8 點選 javascript_api 功能

如下圖所示,我們啟用 Maps JavaScript API 功能。

圖 9 啟用Maps JavaScript API

如下圖所示,我們完成啟用 Maps JavaScript API 功能。

圖 10 已啟用 Maps JavaScript API

建立帳單資訊

如下圖所示,我們發現 Google Maps Platform Support 還未建立,由於目前Google Maps JavaScript API 需要付費,所以我們必須建立帳單資訊。

圖 11 解決帳單問題

如下圖所示,我們仍缺乏帳號帳單資訊,必須先完成帳號帳單資訊方能啟用 Maps JavaScript API 功能。

圖 12 缺乏帳號資訊

如下圖所示,我們必須建立帳單帳戶。

如下圖所示,我們先行同意建立帳號。

圖 14 步驟二之一

如下圖所示,我們根據自己的資訊,完整建立個人或公司型態的資訊。

圖 15 步驟二之二

建立專案

如下圖所示,我們已建立帳單帳號之後回到 Google Maps Platform ,我們回到管理畫面。

如下圖所示為專案管理畫面,如何建立新專案,點選下圖右方紅框處『新增專案』建立新專案。

圖 17 建立新專案

如下圖所示我們輸入新專案所需資訊後,點選下方紅框處建立專案。

圖 18 輸入新專案資訊

如下圖所示為新專案管理畫面。

圖 19 已建立新專案

建立 API KEY

如下圖所示,我們到Google Maps Platform ,網址:https://cloud.google.com/maps-platform/?authuser=1。

圖 20 探索產品

如下圖所示,我們開始使用。

圖 21 開始使用

如下圖所示,我們建立 MAP API KEY。

圖 22 建立 MAP API

如下圖所示,我們選擇一個專案。

圖 23選擇一個專案

如下圖所示,我們啟用您的 API。

圖 24 啟用您的API

如下圖所示,我們啟用 google 地圖平台

圖 25 啟用 google 地圖平台

如下圖所示,我們取得 MAP API KEY。

圖 26 取得 key

如上圖所示,我們看到『AIzaSyBY671MA9AVH6RkT8gqnFdp7Pn2u6aKJ7s』就是我們建立的 Google Map Api Key,只要將這個key填入看HTML程式碼,這樣的程式碼可以轉化成下圖所示之視覺化地圖標示。

表 1 視覺化地圖描點標示之 HTML程式碼

視覺化地圖描點標示之HTML程式碼

<!DOCTYPE html>

<html>

  <head>

    <style>

       /* Set the size of the div element that contains the map */

      #map {

        height: 400px;  /* The height is 400 pixels */

        width: 100%;  /* The width is the width of the web page */

       }

    </style>

  </head>

  <body>

    <h3>My Google Maps Demo</h3>

    <!–The div element for the map –>

    <div id=”map”></div>

    <script>

// Initialize and add the map

function initMap() {

  // The location of Uluru

  var uluru = {lat: -25.344, lng: 131.036};

  // The map, centered at Uluru

  var map = new google.maps.Map(

      document.getElementById(‘map’), {zoom: 4, center: uluru});

  // The marker, positioned at Uluru

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

}

    </script>

    <!–Load the API from the specified URL

    * The async attribute allows the browser to render the page while the API loads

    * The key parameter will contain your own API key (which is not needed for this tutorial)

    * The callback parameter executes the initMap() function

    –>

    <script async defer

    src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyBY671MA9AVH6RkT8gqnFdp7Pn2u6aKJ7s&callback=initMap”>

    </script>

  </body>

</html>

程式下載:https://developers.google.com/maps/documentation/javascript/adding-a-google-map(Google_Inc., 2018)

由上表之 HTML 程式碼,透過網站與瀏覽器轉譯之後,如下圖所示,我們可以看到使用地圖描點的視覺化 Google Map 之 HTML 程式碼之網頁畫面。

圖 27 使用地圖描點的視覺化 Google Map

到此,我們已經完成介紹開啟 Google Map 雲端服務會員資料,並且已經介紹如何取得 Google Map API KEY,相信上述一步一步的設定步驟,讀者可以開始使用 Google Map 雲端服務。

後續

本篇是「物聯網開發系列」系列中的第十篇:視覺化位置呈現 (Google Map服務設定篇),主要告訴讀者,如何啟動Google Map雲端服務,使用視覺化方式即時地圖資訊,下篇將介紹讀者,如何整合資料表示與Google Map雲端服務,請讀者拭目以待。

後續筆者還會繼續發表「物聯網開發」系列的文章,在未來我們可以創造出更優質,更具未來性的物聯網 (Internet of Thing:IOT)產品開發相關技術。

敬請期待更多的文章。

作者介紹

曹永忠 (Yung-Chung Tsao):目前為自由作家,專注於軟體工程、軟體開發與設計、物件導向程式設計、物聯網系統開發、Arduino 開發、嵌入式系統開發,商品攝影及人像攝影。長期投入資訊系統設計與開發、企業應用系統開發、軟體工程、物聯網系統開發、軟硬體技術整合等領域,並持續發表作品及相關專業著作。

Email:prgbruce@gmail.com/Line ID:dr.brucetsao/作者網頁臉書社群(Arduino.Taiwan)Github 網站Youtube

參考文獻:

分享到社群

曹永忠

曹永忠 (Yung-Chung Tsao) ,目前為自由作家暨專業Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。 Email:prgbruce@gmail.com Line ID:dr.brucetsao 作者網站:https://www.cs.pu.edu.tw/~yctsao/ 臉書社群(Arduino.Taiwan):https://www.facebook.com/groups/Arduino.Taiwan/ Github網站:https://github.com/brucetsao/ Youtube:https://www.youtube.com/channel/UCcYG2yY_u0m1aotcA4hrRgQ