Set up the Maps JavaScript API | Google for Developers

Skip to main content

Maps Platform

Overview Products Pricing Documentation

Get Started
Get Started with Google Maps Platform
API Picker
Pricing & Billing
Security & Compliance
Reporting & Monitoring
FAQ
Support and Resources
Customer Care
Incident Management

Maps
Maps JavaScript API
Maps SDK for Android
Maps SDK for iOS
Google Maps for Flutter
Maps Embed API
Maps Static API
Imagery Insights
Street View Static API
Maps URLs
Aerial View API
Elevation API
Map Tiles API
Maps Datasets API
Web Components

Routes
Routes API
Navigation SDK for Android
Navigation SDK for iOS
Navigation for Flutter
Navigation for React Native
Roads API
Route Optimization API

Solutions
Resources for AI
Industry solutions
Mobility services

Places
Places API
Places SDK for Android
Places SDK for iOS
Places Library, Maps JavaScript API
Geocoding API
Geolocation API
Address Validation API
Time Zone API
Places Aggregate API

Environment
Air Quality API
Pollen API
Solar API
Weather API

Additional Resources
API Security Best Practices
Digital Signature Guide
Map Coverage Details
Optimization Guide
Mobile OS and software support
Launch stages
Legacy products
Deprecations
Asset Tracking Plan
URL Encoding
WordPress Users

Blog Community

GitHub
YouTube
LinkedIn
Discord
Innovators
Issue Tracker

/

English
Deutsch
Español
Español – América Latina
Français
Indonesia
Italiano
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어

Sign in

Web
Maps JavaScript API

Get Started Contact sales

Guides Reference Samples Resources Legacy

Maps Platform

Overview
Products
Pricing
Documentation
- More
- Guides
- Reference
- Samples
- Resources
- Legacy
Blog
Community
- More

Maps JavaScript API
Overview
Set up the JavaScript API
Use App Check to Secure Your API Key
Load the Maps JavaScript API
Error Handling
Troubleshooting
Tutorials
Add a Google Map with markers using HTML
Add a Google Map with a marker using JavaScript
Add a Google Map to a React app
Show current location
Cluster markers
Concepts
Versioning
Localization
Best practices
TypeScript
Promises
Base map
Add a Google Map to a web page
Map events
Map controls
Control zoom and pan
Rendering type (raster and vector)
Map types
Map color scheme
Map and tile coordinates
Customize maps
- Overview
- Manage map IDs
  - Map ID overview
  - Create map IDs
- Cloud-based maps styling
  - Overview
  - Get Started
    Get started and set up
    Tutorial - Highlight a road network
    Verify an auto-migrated map style
    Map feature changes
  - Create and use map styles
    Create and use map styles
    
    Use JSON with map styles
    Use JSON with cloud-based maps styling
    JSON reference for cloud-based maps styling
    Style maps based on context
    Test map style updates
    Style zoom levels
    Work with map style versions
    What you can style on a map
    Understand map style inheritance and hierarchy
    Manage styles that overlap
  - Modify map settings
    Control the density of Points of interest
    Filter which map features to display
    Change the style of buildings
    Change the style of landmarks
    Change the app background color
  - Style examples and guidelines
    Style examples
    Design checklist
  - Troubleshoot
- JSON styling
  - JSON styling overview
  - JSON style reference
Work with 3D maps (Preview)
Overview
Get started
Base 3D map
Markers
Draw on the map
Resources
- Support
- Coverage
Markers
Overview
Get started
Add a marker to a map
Basic marker customization
Create markers with graphics
Create markers with HTML and CSS
Control collision behavior, altitude, and visibility
Make markers clickable and accessible
Make markers draggable
Migrate to advanced markers
Markers (Legacy)
Work with Places
Overview
Places (New)
Places UI Kit
Places Guides
Work with Routes
Overview
Get started
Try the demo
Route class
- Overview
- Get a route
Route Matrix class
- Overview
- Get a route matrix
Migration guides
Address Validation
Overview
Try the demo
Get started
Validate an address
Understand a basic response
Handle the validation response
Handle United States addresses
Country and region coverage
Draw on the map
Overview
Info windows
Shapes and lines
Symbols
WebGL Features
Deck.gl data visualizations
Ground overlays
Custom overlays
Display data
Overview
Data-driven styling for datasets
Data-driven styling for boundaries
KML
- KML and GeoRSS
- Display KML data
JSON
Data layer
Heatmap
Traffic, Transit, and Bicycling Layers
Grounding with Google Maps
Maps grounding widget
Services
Elevation
Geocoding
Maximum Zoom Imagery
Street View
Additional Libraries
Overview
Air Quality Meter Widget (Experimental)
Drawing Library (Deprecated)
Geometry Library
Visualization Library
Open Source Libraries
More Guides
Google Loader Migration Guide
Place Field Migration (open_now, utc_offset)
Upgrading from v2 to v3