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

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