要如何將google地圖添加到我們的網站之中? 今天將會以google map api 當中的Maps JavaScript API作為範例。我們只需要簡單的在網頁中透過javascript搭配google map提供的api就能夠輕鬆地將google地圖添加到我們的網站,下一篇將會說如何替我們的地圖添加標記

建立空白HTML頁面

首先,我們先建立一個基本架構的HTML頁面。

01.JPG

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- https:blog.aidec.tw -->
    <title>Google Map 範例 - byAidec</title>
</head>
<body>

</body>
</html>

添加一個Map div

body的地方添加一個div,用來做為產生Google Map的容器。

<div id="map"></div>

02.JPG

編寫google map javascript

在body的底部,寫一段初始化google 地圖的function,在下面這段代碼裡,使用 new google.maps.Map 建立一個地圖物件。

第一個參數值是告訴它地圖要渲染在哪裡,第二個參數則是配置地圖的設定,例如:顯示的地點(經緯度),縮放比例....

<script>
      var map;
      //用來找id="map"
      var myMap = document.getElementById('map');
      //初始化地圖
      function initMap() {
        map = new google.maps.Map(myMap, {
          //地圖中心位置
          center: {
          //緯度
            lat: 24.1784573,
            //經度
            lng: 120.6162033
          },
          //縮放比
          zoom: 16
        });
      }
 </script>

載入 google map api js

接著我們要把google map api 給引入進來,這邊帶了兩個參數。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"  async defer></script>

key 這邊要輸入你的 google map api key。沒有使用特別的功能的話,其實key不是必填的,所以可以把它刪掉。

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"  async defer></script>

callback 這個則是必要的,當載入google map api完畢後,會去執行callback指定的function,這樣就能自動初始化地圖了。

google map api js

添加google map css

到剛剛那邊,我們程式腳本的部分就已經寫完了。假如你已經有偷偷的測試過,會發現到網頁是一片空白。原因在於我們沒有設定css

所以 <div id="map"></div> 的高度為0,渲染出來的地圖高度也是0,因此我們在網頁上看不到任何的東西。

head 的部份,添加下面的css,其中的高度或寬度可以自行調整,改完重新整理網頁就能看到地圖了。

<style>
      #map {
        height: 600px;
        width: 100%;
      } 
 </style>

實際範例

google map

完整原始碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https:blog.aidec.tw -->
<title>Google Map 範例 - byAidec</title>
<style>
      #map {
        height: 600px;
        width: 100%;
      } 
    </style>
</head>
<body>
<div id="map"></div>
<script>
      var map;
      var myMap = document.getElementById('map');
      //初始化地圖
      function initMap() {
        map = new google.maps.Map(myMap, {
          //地圖中心位置
          center: {
           //緯度
            lat: 24.1784573,
            //經度
            lng: 120.6162033
          },
          //縮放比
          zoom: 16
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>

這篇是說明如何產生google地圖,下一篇將會說明如何在地圖中產生自訂的mark標記


文章轉載或引用,請先告知並保留原文出處與連結!!(單純分享或非營利的只需保留原文出處,不用告知)

原文連結:
https://blog.aidec.tw/post/google-map-api-javascript-generator