要如何將google地圖添加到我們的網站之中? 今天將會以google map api 當中的Maps JavaScript API作為範例。我們只需要簡單的在網頁中透過javascript搭配google map提供的api就能夠輕鬆地將google地圖添加到我們的網站，下一篇將會說如何替我們的地圖添加標記。
建立空白HTML頁面
首先，我們先建立一個基本架構的HTML頁面。
<!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>
編寫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 css
到剛剛那邊，我們程式腳本的部分就已經寫完了。假如你已經有偷偷的測試過，會發現到網頁是一片空白。原因在於我們沒有設定css
所以 <div id="map"></div> 的高度為0，渲染出來的地圖高度也是0，因此我們在網頁上看不到任何的東西。
在head 的部份，添加下面的css，其中的高度或寬度可以自行調整，改完重新整理網頁就能看到地圖了。
<style>
#map {
height: 600px;
width: 100%;
}
</style>實際範例
完整原始碼
<!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
若有業務合作需求，可寫信至： [email protected]
創業、網站經營相關內容未來將發布在 小易創業筆記