在這個 AI 快速發展的時代，你可能已經熟悉 ChatGPT、Google Gemini、Anthropic Claude、v0、Google AI Studio、Canva 等先進的 AI 工具。這些人工智慧平台不再只是回答問題，它們現在已具備撰寫程式碼的能力，能夠透過「自然語言」理解你的需求並自動生成相對應的程式碼。
換句話說，你只需要用你熟悉的語言，像是在和朋友聊天一樣，向 AI 下達指令，AI 就能幫你完成大部分程式設計的工作，甚至包含 API 串接與錯誤排除！本篇教學將帶你實作一個實用的專案：透過 Google 提供的 Google Maps API Key，自製一個專屬的地圖服務：附近地點探索器。
如果你已有 Google 地圖的 API Key，透過以下的指令來建立互動網頁。要注意：程式必須要指引使用者讓瀏覽器可以讀取位置資訊，這個程式才能正確執行。
指令：建立一個附近地點查詢的互動平台。在頁面上讓使用者可以輸入Google地圖API Key(以連續*顯示)，允許瀏覽器存取位置權限，然後再輸入想要查詢的景點類型(例如：超商、加油站、景點、美食、...)，根據使用者所在的位置在地圖上標示這些景點，並條列顯示附近景的名稱、地址。以明亮而色彩豐富的視覺化設計呈現，並盡量增加網頁互動性。
以下使用二個不同的服務來設計：（你也可以使用 Gemini、Claude、Canva）
v0.dev
結果：https://v0-nearby-location-finder.vercel.app/
將你個人的 API Key 貼至方塊中：
在此即可搜尋你所有位置附近的便利商店、加油站、餐廳、景點、醫院、銀行、藥局、購物中心等，也可以自行輸入想要的地點。
Google AI Studio
連線：https://aistudio.google.com/
先輸入 API Key，再點選：取得我的位置。
接著，就可以使用多種查詢了。
申請 Google 地圖的 API Key 的流程如下（以台灣使用者為例）：
🔑 步驟一：前往 Google Cloud Platform (GCP)
.打開網址：https://console.cloud.google.com/
2.使用你的 Google 帳號登入。
📁 步驟二：建立專案（Project）
1.點擊上方「專案」的下拉選單。
2.點選「新增專案」。
3.輸入專案名稱，選擇結算帳戶（若已有），然後按「建立」。
💳 步驟三：啟用結算（Billing）
1.Google Maps API 需要綁定信用卡才能啟用，即使只是使用免費額度。
2.點選左側選單中的「結算」。
3.若尚未建立帳戶，請依照指示綁定信用卡。
⚠️ 每月有 $200 美元的免費額度，對多數中小型專案已足夠。
📦 步驟四：啟用 Google Maps API
1.進入左側選單「API 與服務」>「啟用 API 與服務」。
2.搜尋你需要的 API（例如 Maps JavaScript API、Geocoding API、Places API 等）。
3.點進去後按下「啟用」。
🛠️ 步驟五：建立 API 金鑰
1.左側選單選擇「API 與服務」>「認證」。
2.點選「建立認證」> 選擇「API 金鑰」。
3.系統會產生一組金鑰，請妥善保存。
4.建議立刻設定限制。
🔒 建議設定 API Key 限制
點選剛產生的 API Key，進入詳細設定：
＊應用程式限制：
＊網站：可設定允許存取的網域，例如 https://example.com/*
＊IP 限制（伺服器端用）：只允許特定 IP 使用
＊API 限制：
＊僅允許使用你所需的 API（避免被濫用）
留言列表