Overview

Page Summary

outlined_flag

• 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.

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

Before you write code, choose the Google Maps Platform product that matches your web application requirements:

• 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).
• 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).

What's next

See example code for Maps features