Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/overview.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/overview.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/overview.md.txt "View this page for the JavaScript platform docs.") <iframe src="https://maps-docs-team.web.app/samples/advanced-markers-simple/dist/" allow="fullscreen; "></iframe>

The Maps JavaScript API is a client-side web API that lets you create maps to
show locations anywhere in the world, add your own custom graphics, animations, and interactive
custom data layers, and create location-aware features by using the Places API in the
Maps JavaScript API. With the Maps JavaScript API, you can:

- Create 2D and 3D maps to show locations anywhere in the world.
- Add customizable markers to indicate locations on a map.
- Use the Places library to get location data for over 200 million places.
- Customize the map's style and colors.
- Add your own interactive custom data layers.
- Display administrative boundaries and make them interactive.
- Add custom 2D and 3D graphics and animated content to your maps.

## Choose the right API for your use case

The following examples show which Google Maps Platform products and
libraries to use for common web application scenarios:

- **Website contact map and directions:** To embed a business location map or directions link without writing custom JavaScript, use the [Maps
  Embed API](https://developers.google.com/maps/documentation/embed/get-started) or [Maps
  URLs](https://developers.google.com/maps/documentation/urls/get-started).
- **Live location and asset tracking:** To display live GPS coordinates and travel paths from your own database or real-time stream (such as Cloud Firestore or WebSockets), use the Maps JavaScript API with [Advanced Markers](https://developers.google.com/maps/documentation/javascript/advanced-markers/overview.md.txt) ([`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElement) reference) and [polylines](https://developers.google.com/maps/documentation/javascript/shapes.md.txt#polylines) ([`Polyline`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polyline) reference). Reserve [Fleet
  Engine](https://developers.google.com/maps/documentation/mobility/fleet-engine/essentials) for ridesharing and scheduled delivery fleets that integrate the mobile Driver SDK and backend OAuth or JSON Web Tokens (JWTs).
- **Route planning and dispatch:** Use the [Routes
  library](https://developers.google.com/maps/documentation/javascript/routes/overview).
  - To calculate a route with stops, travel time, distance, and tolls, and draw it on a map, use [`Route.computeRoutes()`](https://developers.google.com/maps/documentation/javascript/reference/route.md.txt#Route.computeRoutes).
  - To find the nearest driver, vehicle, or warehouse across several origins and destinations, use [`RouteMatrix.computeRouteMatrix()`](https://developers.google.com/maps/documentation/javascript/reference/route-matrix.md.txt#RouteMatrix.computeRouteMatrix).
  - To schedule multiple vehicles with time windows on your server, use the [Route
    Optimization API](https://developers.google.com/maps/documentation/route-optimization/overview).
- **Store locators and venue maps:** To show stores, venues, or branches on a map with custom pins and filters, use [Advanced Markers](https://developers.google.com/maps/documentation/javascript/advanced-markers/overview.md.txt) ([`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElement) reference) with the [Places library](https://developers.google.com/maps/documentation/javascript/place.md.txt) to find places and load their details.
- **Geofence and safe-zone radius on a map:** To draw circular or polygonal perimeters and test whether coordinates fall inside them (see [Geofences and safe-zone boundaries](https://developers.google.com/maps/documentation/javascript/shapes.md.txt#geofences)), use [circles](https://developers.google.com/maps/documentation/javascript/shapes.md.txt#circles) ([`Circle`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Circle) reference), [polygons](https://developers.google.com/maps/documentation/javascript/shapes.md.txt#polygons) ([`Polygon`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polygon) reference), and the [Geometry library](https://developers.google.com/maps/documentation/javascript/geometry.md.txt) ([`containsLocation()`](https://developers.google.com/maps/documentation/javascript/reference/geometry.md.txt#poly.containsLocation) for containment and [`computeDistanceBetween()`](https://developers.google.com/maps/documentation/javascript/reference/geometry.md.txt#spherical.computeDistanceBetween) for distance in meters).

#### Legacy APIs and their replacements

- [`DirectionsService`](https://developers.google.com/maps/documentation/javascript/reference/directions.md.txt#DirectionsService) and [`DistanceMatrixService`](https://developers.google.com/maps/documentation/javascript/reference/distance-matrix.md.txt#DistanceMatrixService) are deprecated as of February 25, 2026. Use [`Route`](https://developers.google.com/maps/documentation/javascript/reference/route.md.txt#Route) and [`RouteMatrix`](https://developers.google.com/maps/documentation/javascript/reference/route-matrix.md.txt#RouteMatrix) instead.
- [`google.maps.Marker`](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#Marker) is deprecated as of February 21, 2024. Use [`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers.md.txt#AdvancedMarkerElement) instead.
- [`PlacesService`](https://developers.google.com/maps/documentation/javascript/reference/places-service.md.txt#PlacesService) isn't available to new customers as of March 1, 2025. Use the [`Place`](https://developers.google.com/maps/documentation/javascript/reference/place.md.txt#Place) class instead.

## What's next

**Set up and create a map**
- [Set up your Google Cloud project](https://developers.google.com/maps/documentation/javascript/cloud-setup)
- [Use API keys](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt)
- [Load the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/load-maps-js-api.md.txt)
- [Add a Google Map to a Web Page](https://developers.google.com/maps/documentation/javascript/add-google-map.md.txt)
- [Add a 3D map to a web page](https://developers.google.com/maps/documentation/javascript/3d-maps-overview)
**Use Maps JavaScript API features**
- [Add markers to a map](https://developers.google.com/maps/documentation/javascript/advanced-markers/overview.md.txt)
- [Add shapes,
  lines, and geofences to a map](https://developers.google.com/maps/documentation/javascript/shapes)
- [Use the Places library to get location data](https://developers.google.com/maps/documentation/javascript/place.md.txt)
- [Calculate and display routes and route matrixes](https://developers.google.com/maps/documentation/javascript/routes/overview.md.txt)
- [Customize the map's style and colors](https://developers.google.com/maps/documentation/javascript/cloud-customization.md.txt)
- [Add interactive data layers](https://developers.google.com/maps/documentation/javascript/dds-datasets/overview.md.txt)
- [Display administrative boundaries](https://developers.google.com/maps/documentation/javascript/dds-boundaries/overview.md.txt)
- [Add a WebGL graphic overlay](https://developers.google.com/maps/documentation/javascript/webgl/webgl-overlay-view.md.txt)
**Work with Maps JavaScript API services**
- [Elevation](https://developers.google.com/maps/documentation/javascript/elevation.md.txt)
- [Geocoding](https://developers.google.com/maps/documentation/javascript/geocoding.md.txt)
- [Maximum Zoom Imagery](https://developers.google.com/maps/documentation/javascript/maxzoom.md.txt)
- [Street View](https://developers.google.com/maps/documentation/javascript/streetview.md.txt)
**Work with Maps JavaScript API libraries**
- [Routes library](https://developers.google.com/maps/documentation/javascript/routes/overview.md.txt)
- [Geometry library](https://developers.google.com/maps/documentation/javascript/geometry.md.txt)
- [Visualization library](https://developers.google.com/maps/documentation/javascript/visualization)
- [Open source libraries](https://developers.google.com/maps/documentation/javascript/libraries-open-source.md.txt)
- [Drawing library](https://developers.google.com/maps/documentation/javascript/drawinglayer) (Deprecated)

[**See example code for Maps features**](https://developers.google.com/maps/documentation/javascript/examples.md.txt)