Google Map API 使用筆記-產生地圖。

在網頁上你可以透過 google 的 map API

繪製很多種類型的資料地圖。

但首先你要會使用他。

1. https://developers.google.com/maps/documentation/javascript/?hl=zh-tw

先到這網頁。

找到快速入門。從這裡取得你開發人員的身分與建立一個新的專案。

供你的新頁面使用。

同時也取得你的新應用要使用的金鑰。

這些並非這邊討論的重點，所以就此帶過。

從地圖的指南，你也可以看到他有很多範本。

這裡講述一下要在你的網頁中建構一個MAP最基本要有那些東西。

首先網頁內容裡必須引用GOOGLE API

。

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

如上。

中間的KEY = 後面必須接上你的API 金鑰。

接著建立地圖

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

getElementById後面接的可以是你的DVI的ID。

如此地圖就會建立在你指定的DVI標籤之中。

設定中心點與初始縮放大小。後就可以產生地圖。

當然預設的是最普通的米黃色地圖。你也可以透過其他指令去指定你要產生的地圖種類。

在ZOOM下面加上一行。

mapTypeId: google.maps.MapTypeId.ROADMAP

就可以指定其他種類的地圖類型。

至此應該就可以順利的將地圖加入你的網站了。

後續可以在將你的資料標註上去。