Overview

Page Summary

• The Maps JavaScript API lets you create interactive, customizable maps for websites, incorporating 2D and 3D views, markers, and custom data.

• Developers can leverage the Places Library for location data, style maps to their liking, and display administrative boundaries.

• A suite of services such as Directions, Distance Matrix, and Street View, along with libraries like Drawing and Geometry, further enhance functionality.

• Users can easily set up their projects using provided guides on Cloud project setup, API keys, loading the API, and adding maps to web pages.

• Google provides comprehensive documentation with tutorials, examples, and resources for various features, services, and libraries.

Select platform: Android iOS JavaScript

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 or Maps URLs.
• 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 (AdvancedMarkerElement reference) and polylines (Polyline reference). Reserve Fleet Engine 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.
  • To calculate a route with stops, travel time, distance, and tolls, and draw it on a map, use Route.computeRoutes().
  • To find the nearest driver, vehicle, or warehouse across several origins and destinations, use RouteMatrix.computeRouteMatrix().
  • To schedule multiple vehicles with time windows on your server, use the Route Optimization API.
• Store locators and venue maps: To show stores, venues, or branches on a map with custom pins and filters, use Advanced Markers (AdvancedMarkerElement reference) with the Places library 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), use circles (Circle reference), polygons (Polygon reference), and the Geometry library (containsLocation() for containment and computeDistanceBetween() for distance in meters).

Legacy APIs and their replacements

• DirectionsService and DistanceMatrixService are deprecated as of February 25, 2026. Use Route and RouteMatrix instead.
• google.maps.Marker is deprecated as of February 21, 2024. Use AdvancedMarkerElement instead.
• PlacesService isn't available to new customers as of March 1, 2025. Use the Place class instead.

What's next

Set up and create a map

• Set up your Google Cloud project
• Use API keys
• Load the Maps JavaScript API
• Add a Google Map to a Web Page
• Add a 3D map to a web page

Use Maps JavaScript API features

• Add markers to a map
• Add shapes, lines, and geofences to a map
• Use the Places library to get location data
• Calculate and display routes and route matrixes
• Customize the map's style and colors
• Add interactive data layers
• Display administrative boundaries
• Add a WebGL graphic overlay

Work with Maps JavaScript API services

• Elevation
• Geocoding
• Maximum Zoom Imagery
• Street View

Work with Maps JavaScript API libraries

• Routes library
• Geometry library
• Visualization library
• Open source libraries
• Drawing library (Deprecated)

See example code for Maps features