Google自訂地圖 & Google Map API

- 11月 07, 2019

最近研究了Google My Maps
這是一個可以加標記、路線、測量距離的地圖工具，而且可以和他人協作！
也可以用來作行程規劃 (旅行、商務之類的)
我目前是把它用來標註我家附近曾經開過的商店XD (懷舊派)

測試用的自訂地圖

不過當我需要用到圓形的範圍圖時
卻無法在自訂地圖上叫出
(為了製作另一個小工具「範圍內通勤時間能接受的工作地點」)

於是我就找到了Google Map相關的API
目前Google主要是放在Google Maps Platform裡

後來到Maps JavaScript API裡面的Shapes找到了circle的程式碼
把它改編然後去增加相關金鑰(Key)後
執行時出現錯誤...

此時開Chrome的開發人員工具
發現Console上寫說「You must enable Billing on the Google Cloud」

於是我就到Google Cloud Platform上使用VISA卡開通了享有300美金額度的權限

(額度用完的話就要真正花錢啦！)

開通後用了新的金鑰執行我的程式就變成了以下的結果
(終於成功啦！)

程式碼為 (「*yourKey*」部分記得改成自己的金鑰)：

<!DOCTYPE html>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->

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

<style type="text/css">
/* 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>

<script>
// This example creates circles on the map
// First, create an object containing LatLng.
 var citymap = {
   test: {
  center: {lat: 25.0459, lng: 121.5452},
  population: 8405837
   },
 };

 function initMap() {
   // Create the map.
   var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 13,
  center: {lat: 25.0459, lng: 121.5452},
  mapTypeId: 'terrain'
   });

   // Construct the circle for each value in citymap.
   for (var city in citymap) {
  // Add the circle for this city to the map.
  var cityCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: citymap[city].center,
    radius: 6000, // meter
    draggable: true
  });
   }
 }
</script>

draggable可以改成false
這樣圖形就不能拖移了~

搜尋此網誌

bongbonggun's Blog〝★

Latest

英文、中文 / 諺語、片語、成語、口語對照 (2025.08.25 更新)