總覽
bookmark_border
bookmark
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Maps JavaScript API 是用戶端網頁 API，可讓您建立地圖來顯示世界各地的位置、加入自訂圖像、動畫和互動式自訂資料層，以及在 Maps JavaScript API 中使用 Places API 建立位置感知功能。使用 Maps JavaScript API，您可以：
- 製作 2D 和 3D 地圖，顯示世界各地的位置。
- 在地圖上新增可自訂的標記，指出特定位置。
- 使用 Places Library 取得超過 2 億個地點的位置資料。
- 自訂地圖樣式和顏色。
- 新增自己的互動式自訂資料層。
- 顯示行政界線，並提供互動功能。
- 在地圖中加入自訂 2D 和 3D 圖形及動畫內容。
後續步驟
使用 Maps JavaScript API 功能arrow_drop_down
使用 Maps JavaScript API 服務arrow_drop_down
使用 Maps JavaScript API 程式庫arrow_drop_down
查看地圖功能範例程式碼
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-08-10 (世界標準時間)。
[null,null,["上次更新時間：2025-08-10 (世界標準時間)。"],[[["\u003cp\u003eThe Maps JavaScript API lets you create interactive, customizable maps for websites, incorporating 2D and 3D views, markers, and custom data.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can leverage the Places Library for location data, style maps to their liking, and display administrative boundaries.\u003c/p\u003e\n"],["\u003cp\u003eA suite of services such as Directions, Distance Matrix, and Street View, along with libraries like Drawing and Geometry, further enhance functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can easily set up their projects using provided guides on Cloud project setup, API keys, loading the API, and adding maps to web pages.\u003c/p\u003e\n"],["\u003cp\u003eGoogle provides comprehensive documentation with tutorials, examples, and resources for various features, services, and libraries.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/overview \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/overview \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/overview \"View this page for the JavaScript platform docs.\")\n\nThe Maps JavaScript API is a client-side web API that lets you create maps to\nshow locations anywhere in the world, add your own custom graphics, animations, and interactive\ncustom data layers, and create location-aware features by using the Places API in the\nMaps JavaScript API. With the Maps JavaScript API, you can:\n\n- Create 2D and 3D maps to show locations anywhere in the world.\n- Add customizable markers to indicate locations on a map.\n- Use the Places library to get location data for over 200 million places.\n- Customize the map's style and colors.\n- Add your own interactive custom data layers.\n- Display administrative boundaries and make them interactive.\n- Add custom 2D and 3D graphics and animated content to your maps.\n\nWhat's next \n**Set up and create a maparrow_drop_down**\n- [Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup)\n- [Use API keys](/maps/documentation/javascript/get-api-key)\n- [Load the Maps JavaScript API](/maps/documentation/javascript/load-maps-js-api)\n- [Add a Google Map to a Web Page](/maps/documentation/javascript/add-google-map)\n- [Add a 3D map to a web page](/maps/documentation/javascript/3d-maps-overview)\n- [Tutorials for adding a map (and more)](/maps/documentation/javascript/tutorials) \n**Use Maps JavaScript API featuresarrow_drop_down**\n- [Add markers to a map](/maps/documentation/javascript/advanced-markers/overview)\n- [Use the Places library to get location data](/maps/documentation/javascript/place)\n- [Customize the map's style and colors](/maps/documentation/javascript/cloud-customization)\n- [Add interactive data layers](/maps/documentation/javascript/dds-datasets/overview)\n- [Display administrative boundaries](/maps/documentation/javascript/dds-boundaries/overview)\n- [Add a WebGL graphic overlay](/maps/documentation/javascript/webgl/webgl-overlay-view) \n**Work with Maps JavaScript API servicesarrow_drop_down**\n- [Elevation](/maps/documentation/javascript/elevation)\n- [Geocoding](/maps/documentation/javascript/geocoding)\n- [Maximum Zoom Imagery](/maps/documentation/javascript/maxzoom)\n- [Street View](/maps/documentation/javascript/streetview) \n**Work with Maps JavaScript API librariesarrow_drop_down**\n- [Drawing Library](/maps/documentation/javascript/drawinglayer)\n- [Geometry Library](/maps/documentation/javascript/geometry)\n- [Visualization Library](/maps/documentation/javascript/visualization)\n- [Open Source Libraries](/maps/documentation/javascript/libraries-open-source)\n\n[**See example code for Maps features**](/maps/documentation/javascript/examples)"]]
