Google Maps API 學習筆記- 1：地圖、標記、客製樣式 - Let's ...

一、原來Google Maps API 有每個月的免費額度 · 二、申請Google Maps API Key · 三、開始使用Maps Javascript API · 四、放置多個標記 · 五、標記（Marker）客 ... 跳至主要內容GoogleMapsAPI學習筆記–1：地圖、標記、客製樣式2021-08-242019-08-02/August本篇大綱一、原來GoogleMapsAPI有每個月的免費額度二、申請GoogleMapsAPIKey三、開始使用MapsJavascriptAPI四、放置多個標記五、標記（Marker）客製化Google預設的4種圖案直接讀一個圖檔marker的另外2個參數六、InfoWindows七、客製化地圖樣式nightmode地圖2個重要的連結隱藏地圖上其他商家八、隱藏地圖上UI九、本篇原始檔下載GoogleMapsAPI學習筆記系列一、原來GoogleMapsAPI有每個月的免費額度之前聽到GoogleMapsAPI要錢，就一直沒想碰這塊，最近朋友在問，回頭去看了一下定價後，才發現官網上面寫每個月有200美金的免費額度。

照免費的額度表上看，因為這篇會用到的是「MapsJavaScriptAPI」，是屬於「DynamicMaps」這個，每個月可以載入28,000次，超過才開始計價。

28,000次耶，一般頁面正常使用，那個流量都可以放個廣告了吧。

覺得自己平常在玩的小頁面不會到這個量，就想來學一下。

GoogleMapAPI定價表：https://cloud.google.com/maps-platform/pricing/sheet/?hl=zh-tw這篇筆記主要想寫的，是文件上從「GetanAPIKey」，一直看到「InteractingwiththeMap」這邊的學習記錄，一邊看一邊實作。

因為想要記下的是以後會常用到的功能，所以想看所有GoogleMapsAPI的話，可以直接看官方文件。

本篇參考、使用資源如下：官網MapsJavascriptAPI文件JSframework：Vue.jsCSSframework：Bootstrap4icon：EvaIcons二、申請GoogleMapsAPIKeyAPIKey要從GoogleCloudPlatform（GCP）的後台申請。

這邊新開一個專案來用，填寫完專案名稱後按確認，GCP就會執行開新專案的動作。

GCP上建立新專案建立完後，點選剛新增的專案，就會列出跟map相關的一堆API：這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝map相關API這邊用的是MapsJavascriptAPI，點進去後再點啟用，GCP就可以看到了：確認MapsJavaScriptAPI是啟用的確認完要用的API是啟用狀態後，接著生成一組APIKey，以及對這組APIKey設定限制，防止有人看到你的APIKey後，拿去偷用。

直接點啟用API那邊的項目，再點憑證，或是直接進入GCP憑證頁面後，就會看見要申請的區塊：點選API金鑰點選API金鑰，會出現一個金鑰的Key，把值copy下來，之後頁面在引用JavaScript時，就是這樣： 取得APIKey後，點選「限制金鑰」GCP很貼心的提醒要為金鑰增加限制，點選「限制金鑰」後，會看見4種限制方式：APIKey的4種限制方式要用哪一種就看各人了。

官方文件連結：GetanAPIKey三、開始使用MapsJavascriptAPI新增一個HTML的頁面，引用MapJS：這邊因為有用Vue.js，所以會把後面的「callback=initMap」刪掉，改成windowload完後再執行initMap()。

這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝以下寫的code，很偷懶的直接用ES6，如果要支援度高一點的話，請自行編譯成ES5初始化地圖（initMap）的function，做2件事：建立地圖，設定地圖中心點放置標記（marker）HTML如下（CSSframework：Bootstrap4）： JavaScript如下：開啟頁面後，就會看到如下：基本GoogleMap對，看起來就跟一般我們在用GoogleMap差不多，畢竟只用了基本功能，想有些不一樣就要再加一些code。

四、放置多個標記要放多個標記前，當然可以直接在頁面上加一個陣列，然後資料全寫在裡面。

但Google文件上在這部份用了比較好的做法，就是把資料收集在一個檔案上，然後GET進來。

之所以會寫這點，是因為他的檔案不是常見的xxx.json，而是xxx.geojson。

看了文件後才知道有geojson這格式，維基百科上寫是拿來記錄地理訊息的JSON。

參考Google文件的範例，把幾個點的位置存成了map.geojson，如下：geometry裡的經緯度必填。

properties，看示範時很像是可以填自己客製的東西，就拿來填名稱跟地址，之後在infowindows時會用到。

有了各地點的檔案後，就是用回圈把每個地點設成marker，JS如下：開啟頁面後，看到如下：多個標記的GoogleMap對，看上去也跟用 MyMap 的功能一樣，沒什麼厲害的。

畢竟這也只是在基本的地圖上，多放了幾個標記而已。

接下來再加上可以用的參數，看上去就會不一樣了。

五、標記（Marker）客製化對網頁上要放GoogleMap來說，最會被企畫問到的問題就是：「標記的圖案可以改嗎？」、「標記可以改成公司的logo嗎？」GoogleMapsAPI有提供修改標記的參數，主要有2個可以用：用Google預設的4種圖案直接讀一個圖檔Google預設的4種圖案使用的方式很簡單，在JS裡，marker的部份改成以下：varmarker=newgoogle.maps.Marker({ position:latLng, icon:{ path:google.maps.SymbolPath.CIRCLE, scale:10 }, map:map });icon.path，有4種可用，顯示出來的樣式如Google提供的圖表：https://developers.google.com/maps/documentation/javascript/symbols?hl=zh-tw#predefined直接讀一個圖檔直接讀一個圖檔，是更能達成企畫需求的方式，code如下：varmarker=newgoogle.maps.Marker({ position:latLng, icon:'圖檔的絕對路徑.png', map:map });code很簡單，icon的值直接寫入圖檔路徑就行。

這邊直接在EvaIcons上抓一張圖來用，code如下：marker的另外2個參數「標記」除了自定icon，還有另外2個參數可以用：可否拖拉動態效果可否拖拉的參數是「draggable」，動態效果是「animation」：letmarker=newgoogle.maps.Marker({ position:latLng, map:this.map, animation:google.maps.Animation.DROP,//DROP掉下來、BOUNCE一直彈跳 draggable:false//true、false可否拖拉 });這一階段會看到的結果如下：標記（Marker）客製化六、InfoWindows在標記上，還有一個很特別的功能，是要用API才會有的，就是InfoWindows，資訊小視窗，樣式如下：GoogleMapinfowindow官方文件中，infowindows有專門的一頁在介紹，這邊就直接製作一個範例出來。

（infoWindows官方文件）在用回圈寫入marker時，就要把infoWindows加進去，並監聽click事件。

這邊的範例再特別寫入一個，由外面的按鈕讓marker上的infowindows被打開，而不是一定要點到marker才會打開。

HTML用v-for為每個地點加入一個按鈕，並加上@click事件： {{f.properties.name}} JavaScript部份如下：看到的頁面截圖如下：GoogleMapinfowindows七、客製化地圖樣式API除了可以做出客製標記（marker）、infowindows外，還可以做一個直接用GoogleMap做不到的事，就是客製化地圖樣式。

這邊直接參考文件的示範，寫一個nightmode的地圖，跟隱藏商家的地圖。

nightmode地圖在一開始建立地圖，也就是以下這段的時候：this.map=newgoogle.maps.Map(document.getElementById('map'),{ center:location, zoom:16, mapTypeId:'terrain', styles:[/*...*/]//這邊可加入客製style });就可以加入一個「styles」的參數，把想要的樣式給加進去了。

當然，加的規則必須照著文件上的寫。

（StartStylingyourMap官方文件）這邊寫一個可以用toggle按鈕，切換日間/夜間地圖的範例：以下是頁面截圖：GoogleMapnightmodedemo2個重要的連結這邊附上2個重要連結：1每一個feature、element的說明：https://developers.google.com/maps/documentation/javascript/style-reference?hl=zh-tw#style-features2styles生成器：https://mapstyle.withgoogle.com/有了以上這2個連結，想用一些自訂的模式就比較容易了。

隱藏地圖上其他商家以下附上隱藏商家的Demo，主要是覺得會有企畫提出「地圖上東西太多太干擾了想隱藏掉」、「地圖上出現其他同業了啦要刪掉」這種需求。

其實會了上面的nightmode以後，隱藏商家就容易了，設定的styles比夜間模式還少，styles上改成以下就行：hideStyle:[{ featureType:'poi.business', stylers:[{ visibility:'off' }] }]頁面的截圖如下：GoogleMaphidebusiness拿掉商家後，地圖一整個乾淨很多。

八、隱藏地圖上UIGoogleMap上有一些預設的UI，如下圖紅框：GoogleMap預設顯示的UIGoogleMapAPI有提供參數去隱藏/顯示它們，如下：zoomControl:booleanmapTypeControl:booleanscaleControl:booleanstreetViewControl:booleanrotateControl:booleanfullscreenControl:boolean要使用時，只要在建立地圖上加上這些參數就行了，例如：this.map=newgoogle.maps.Map(document.getElementById('map'),{ center:location, zoom:16, mapTypeId:'terrain', mapTypeControl:false });九、本篇原始檔下載GoogleMapsAPI的官方文件有好幾頁，有很多東西可以玩，這篇是看到現在的第一階段筆記，記錄一下覺得以後會遇到的需求。

上面的原始碼整理在GitHub上了，歡迎使用：https://github.com/letswritetw/letswrite-google-map-api-1GoogleMapsAPI學習筆記系列地圖、標記、客製樣式在地圖上畫個日本結界用熱圖（HeatMap）製作全台12小時雨量分佈圖PlaceAPI自動完成地址、地點評論摘要抓目前位置、計算到各點距離畫新冠肺炎分佈圖收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印SummaryArticleNameGoogleMapsAPI學習筆記-1：地圖、標記、客製樣式Description本篇大綱：原來googlemapsapi有每個月的免費額度、申請GoogleMapsAPIKey、開始使用MapsJavascriptAPI、放置多個標記、InfoWindows、客製化地圖樣式、隱藏地圖上其他商家、隱藏地圖上UI、本篇原始檔下載AugustusAugustusLet'sWriteLet'sWritehttps://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg隨選筆記文WordPressWordPress：SiteKitbyGoogle介紹及使用Google,GoogleAnalytics,外掛BotLINELINEBot：X-Line-Signature簽名驗證範例AJAX,API,Node.js,WebhookFront-EndFileAPI客製上傳檔案按鈕/inputfileAPI,HTML,input,JavaScript,Label,資料AnalyticsGoogleGA報表：電子商務內部宣傳報表GoogleAnalytics,Track,事件,報表,資料GoogleOthers用GCP建立CloudFunctionsCloud,Functions,GCPFront-End滿版圖片背景、影音背景Background,CodePen,VideoFirebaseGoogleFirebaseRealtimeDatabase常用功能筆記AJAX,API,JavaScript,RealtimeDatabase,資料Front-EndMarkdown常用語法筆記Markdown,圖片Front-End從使用者輸入網址，到瀏覽器呈現出來，經過了哪些過程？PerformanceFront-End如何使用Vivus.js製作輕量快速SVG動畫AJAX,GitHub,JavaScript,SVG,Vivus,動畫以下是留言，但關於留言的部份必需先讓你們知道：本站的文章都是August因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，Sorry~除非那修改是August也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。

😎另外，公開信箱是為了讓金流驗證用，因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

因此決定不再回覆信件，有疑問就利用留言功能囉。

搜尋關鍵字:Translate简体中文繁體中文English日本語最新文章用GoogleSheets紀錄表單資料GA4事件：GA3事件轉移，及如何查看完整事件報表用GoogleSheets取得電子報中點擊回覆結果改變iframesrc時不增加瀏覽歷史紀錄FirebaseCloudFirestoreV9常用功能筆記CustomEvent客製一個addEventListener用Day.js把秒數轉換為時間前端POST檔案後，用Node.js把檔案傳上FTP大家都在看WebSocket基本介紹及使用筆記Google表單，提交後系統自動寄送回覆通知emailVue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期GoogleMapsAPI學習筆記-1：地圖、標記、客製樣式MacBook用隨身碟執行Windows10：WindowsToGo、WinToUSBGoogle表單，輸入ID後自動帶入其它欄位資料Word、Excel合併列印功能使用筆記LIFFv2基本使用筆記及範例請作者一杯咖啡？寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:)請喝咖啡（台灣）Buymeacoffee（Foreign）M**L**ce**tT***gH**l*yHe**y小*瓜ki*******37A**yS**Y**C**R****_L**I**nM******C**uR***y曾*M**L**O放個廣告賺點養主機的$$，謝謝Let’sWrite來訪人數位大大相挺，謝謝。

（如何製作來訪人數？）訂閱新文章通知直接加入Telegram的頻道，有最新文章時會收到廣播通知：DMCAProtection放個廣告賺點養主機的$$，謝謝Let'sWrite前端工程師August的學習筆記—solvingproblems,insimpleways.APIFront-EndGoogleBotVuePWAWordPressFollowusFBTelegramGitHubIGTwitter網站地圖隱私權政策[email protected]（金流驗證用）請喝咖啡（台灣）Buymeacoffee（Foreign）傳送到電子郵件地址你的姓名你的電子郵件地址取消文章未送出─請檢查你的電子郵件地址！電子郵件地址檢查失敗，請再試一次抱歉，你的網誌無法透過電子郵件分享