如何申請Google Map 開發者金鑰並啟用付費

-

如何申請Google Map 開發者金鑰並啟用付費

最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦

創建API Key

1.先到 Google雲端後台 . Google Cloud Platform Console
accept.jpg
2.請先選擇一個專案 (如果沒有請按建立)
accept.jpg
3.啟用API,這邊以Map JavaScript 為例 (選擇自己需要的API)
accept.jpg
accept.jpg
  1. 先到憑證,並建立API KEY
    accept.jpg
    accept.jpg
    certificatedone.jpg
5.再到 Google雲端後台 . Google Cloud Platform Console 並選則憑證
go-cert-page.jpg
這邊可以看之前申請的Key,也可以複製金鑰

啟用付費

以Map JavaScript API 為例,如果不啟用付費,很多功能都無法使用(ex Directions API,Maps Elevation API…)
不過不用擔心,基本上google 每個月都有一定的Quota,沒超過是不用付費的,已開發來說很夠了
Google Map Api 定價 https://cloud.google.com/maps-platform/pricing
  1. 先到google後台 啟用付費 —> https://console.cloud.google.com/project/_/billing/enable
go-cert-page.jpg
2 . 如果沒有付費帳號請先建立
go-cert-page.jpg
go-cert-page.jpg
  1. 連結付費帳號
    go-cert-page.jpg
4.這樣就啟用成功了
done-enable-pay.jpg






md code

留言

張貼留言

這個網誌中的熱門文章

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點   : 終點 點擊後可以看到 海拔 / 該路段距離/ 坡度 等資訊 點擊 Open Gmap : 開啟該點位在google map 
閱讀完整內容

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return
閱讀完整內容