中文 | English
曹永忠：智慧家庭物聯網

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

0

上幾篇文章：【物聯網開發系列】視覺化資料呈現（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

© Copyright vMaker. All rights reserved.

This site or product includes IP2Location LITE data available from https://lite.ip2location.com.