因為自己的練習作品中需要用到Google map,所以就自己來學習怎麼用。
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}"></script>
</head>
2. 在HTML 的<body>內 用上一個 <div class = "map"></div>的元件,要設定個大小給這個map,不然他不知道跑出來的地圖要多大
<body>
<div style="height:50vh" id="map"></div>
</body>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
initMap()
基本上都是先創建一個MAP為先
new google.maps.Map("HTML的DIV元件", 一些參數)
map 的基本參數有很多但是基本上就幾個
{
center: {lat: -34.397,lng: 150.644},
zoom: 8
});
這些就是基本的載入囉 !