中文 | English
國內消息曹永忠：智慧家庭最新消息

【物聯網開發系列】視覺化位置呈現(Google Map基本篇)

0

上幾篇文章：【物聯網開發系列】視覺化資料呈現（GOOGLE CHART篇）、【物聯網開發系列】視覺化呈現連續資料（GOOGLE LINE CHART 篇），筆者提到了視覺化呈現的技巧，如下圖所示：


圖 1  視覺化呈現的技巧

在此篇文中，作者將應用Google 雲端資源：Chart Gallery 的雲端服務功能，介紹 google GUAGE 與 Line Chart 來呈現溫濕度資源。
本篇文章，作者將介紹 Google 雲端資源中，最具代表性的 Google Map 功能。

Google Map 介紹

我們進到 Google 雲端資源：Google Map Platform 的雲端服務功能中，我們可以看到下圖： Google Developer Chart 雲端服務功能。

圖 2 Google Map Platform

Google Map Platform 介紹

我們進到 Google Map Platform  雲端資源的雲端服務功能中，我們可以看到下圖：瞭解運作方式。

 

圖 3 瞭解運作方式

 

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

如下表所示，我們先看看原來HTML程式碼，這樣的程式碼可以轉化成下圖所示之視覺化地圖標示。

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

視覺化地圖標示之HTML程式碼
<!DOCTYPE html> <html>   <head>     <title>Simple Map</title>     <meta name=”viewport” content=”initial-scale=1.0″>     <meta charset=”utf-8″>     <style>       /* Always set the map height explicitly to define the size of the div        * element that contains the map. */       #map {         height: 100%;       }       /* Optional: Makes the sample page fill the window. */       html, body {         height: 100%;         margin: 0;         padding: 0;       }     </style>   </head>   <body>     <div id=”map”></div>     <script>       var map;       function initMap() {         map = new google.maps.Map(document.getElementById(‘map’), {           center: {lat: -34.397, lng: 150.644},           zoom: 8         });       }     </script>     <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”     async defer></script>   </body> </html>

程式下載：https://developers.google.com/maps/documentation/javascript/tutorial

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

圖 4 顯示Google_Map

逐一解說HTML碼

如下表所示，我們必須先行宣告 Google Map 網頁格式。

   <style>       /* Always set the map height explicitly to define the size of the div        * element that contains the map. */       #map {         height: 100%;       }       /* Optional: Makes the sample page fill the window. */       html, body {         height: 100%;         margin: 0;         padding: 0;       }     </style>

如下表所示，載入 Google Map 地圖資料。

  <body>     <div id=”map”></div>     <script>       var map;       function initMap() {         map = new google.maps.Map(document.getElementById(‘map’), {           center: {lat: -34.397, lng: 150.644},           zoom: 8         });       }     </script>     <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”     async defer></script>   </body>

如下表所示，載入 Chart 繪圖參數。

參數資料定義如下：

  • var map;:產生地圖物件變數
  • initMap(): 產生地圖的初始化函數
  • new google.maps.Map(document.getElementById(‘map’):實際產生Google Map物件
  • center: {lat: -34.397, lng: 150.644}：定義產生地圖之中心位置
  • <script src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap async defer></script> ：在此需要輸入Google Map服務金鑰（下文會教各位讀者如何產生金鑰）

加入 Google Map 顯示地圖描點

接下來我們切換到網址：https://developers.google.com/maps/documentation/javascript/adding-a-google-map，開始來教讀者，如下圖所示，如何在 Google Map 的服務之中，加入地圖描點。

圖 5地圖描點之官方代表圖

如下表所示，我們先看看原來HTML程式碼，這樣的程式碼可以轉化成下圖所示之視覺化地圖標示。

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

視覺化地圖描點標示之HTML程式碼
<!DOCTYPE html> <html>   <head>     <style>        /* Set the size of the div element that contains the map */       #map {         height: 600px;  /* 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=YOUR_API_KEY&callback=initMap”>     </script>   </body> </html>

程式下載：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

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

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

逐一解說HTML碼

如下表所示，我們必須先行宣告 Google Map 網頁格式，產生地圖的大小為高度：600 像數，寬度與瀏覽器同寬。

     <style>        /* Set the size of the div element that contains the map */       #map {         height: 600px;  /* The height is 400 pixels */         width: 100%;  /* The width is the width of the web page */        }     </style>  

如下表所示，顯示文字：My Google Maps Demo。

    <h3>My Google Maps Demo</h3>

如下表所示，顯示 Google Map。

        <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>

如下表所示，載入 Chart 繪圖參數。

參數資料定義如下：

  • var uluru = {lat: -25.344, lng: 131.036};:產生地圖描點座標
  • initMap(): 產生地圖的初始化函數
  • new google.maps.Map(document.getElementById(‘map’):實際產生Google Map物件
  • zoom: 4：顯示地圖之大小為4
  • center: uluru：定義產生地圖之中心位置
  • var marker = new google.maps.Marker({position: uluru, map: map});：加入uluru座標的
  • <script src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap async defer></script> ：在此需要輸入Google Map服務金鑰 (下文會教各位讀者如何產生金鑰)

最後我們看到如下圖所示之 Google Map 地圖，我們可以在上面標示任何位置的描點了。


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

到此，我們已經完成介紹 Google Map 雲端服務的介紹，相信上述一步一步的設定步驟，讀者可以開始使用 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.