Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.
Code Samples
AI-generated Key Takeaways
This page provides a comprehensive list of sample applications showcasing the features of the Maps JavaScript API.
These samples cover a wide range of topics including basic map manipulation, event handling, customization, drawing tools, layers, services and more.
The samples are categorized for easy navigation and include links to detailed documentation and tutorials.
Users can explore examples for specific functionalities like adding markers, drawing shapes, using layers, and integrating with various Google Maps services.
The page also includes links to sample code for libraries such as Drawing and Geometry, and experimental features like 3D maps.
Sample apps demonstrating the features of the Maps JavaScript API are listed below for quick reference. For samples that include step-by-step walkthoughs, see ourtutorials.
Basics
- Simple Map
- Showing Pixel and Tile Coordinates
- Geolocation
- Localizing the Map
- Right-to-Left Languages
- Custom Map Projections
- Lat/Lng Object Literal
Events
- Simple Click Events
- Using Closures in Event Listeners
- Accessing Arguments in UI Events
- Getting Properties With Event Handlers
- Getting Lat/Lng from a Click Event
- Listening to DOM Events
- POI Click Events
Controls and Interaction
- Default Controls
- Disabling the Default UI
- Adding Controls to the Map
- Control Options
- Control Positioning
- Custom Controls
- Adding State to Controls
- Cooperative Gesture Handling
Customize a Map
- Styled Map - map ID
- Marker Collision Management
- Styled Maps - Night Mode
- Styled Map Types
- Hiding Map Features With Styling
- Styled Map Selection
Data-driven styling for boundaries
Web Components
- Add a Map Web Component
- Add a Map with Markers using Web Components
- Add a Map Web Component with Events
Add markers to the Map
Advanced Markers
- Simple Advanced Markers
- Basic Marker Customization
- Create Markers with Graphics
- Create Markers using HTML and CSS
- Create Interactive Markers using HTML and CSS
- Animate Markers using CSS
- Control Marker Collision Behavior
- Set Marker Altitude
- Control Marker Visibility by Zoom Level
- Make Markers Clickable and Accessible
- Make Markers Draggable
Markers (Legacy)
- Simple Markers
- Marker Labels
- Removing Markers
- Simple Marker Icons
- Complex Marker Icons
- Markers with SVG and Font
- Marker Accessibility
- Marker Animations
- Marker Animations With setTimeout()
Draw on the Map
- Info Windows
- Info Windows With maxWidth
- Custom Popups
- Simple Polylines
- Removing Polylines
- Deleting a Vertex
- Complex Polylines
- Simple Polygons
- Polygon Arrays
- Polygon Auto-Completion
- Polygon With Hole
- Circles
- Rectangles
- Rectangle Zoom
- User-Editable Shapes
- Draggable Polygons
- Listening to Events
- Ground Overlays
- Removing Overlays
- Custom Overlays
- Predefined Symbols (Marker)
- Custom Symbols (Marker)
- Animating Symbols
- Arrow Symbols (Polyline)
- Custom Symbols (Polyline)
- Dashed Line Symbols (Polyline)
- Draw on a map using Terra Draw
Layers
- KML Layers
- KML Feature Details
- Data Layer: Polygon
- Data Layer: Simple
- Data Layer: Styling
- Data Layer: Event Handling
- Data Layer: Dynamic Styling
- Data Layer: Drag and Drop GeoJSON
- Data Layer: Earthquakes
- Heatmaps
- GeoRSS Layers
- Traffic Layer
- Transit Layer
- Bicycle Layer
- deck.gl ArcLayer
- deck.gl ScatterPlot GeoJsonLayer
Vector Map Features
3D Maps (Experimental)
MapTypes
- Basic Map Types
- Overlay Map Types
- Image Map Types
- Overlaying Image Map Types
- 45° Imagery
- Rotating 45° Imagery
Services
- Geocoding Service
- Reverse Geocoding
- Reverse Geocoding by Place ID
- Geocoding Component Restriction
- Region Code Biasing (ES)
- Region Code Biasing (US)
- Directions Service
- Displaying Text Directions With setPanel()
- Directions Service (Complex)
- Travel Modes in Directions
- Waypoints in Directions
- Draggable Directions
- Distance Matrix Service
- Elevation Service
- Showing Elevation Along a Path
- Street View Containers
- Street View Side-By-Side
- Overlays Within Street View
- Street View Events
- Street View Controls
- Directly Accessing Street View Data
- Custom Street View Panoramas
- Custom Street View Panorama Tiles
- Maximum Zoom Imagery Service
Libraries: Drawing
Libraries: Geometry
Address Validation
Places (New)
- Text Search (New)
- Nearby Search (New)
- Place Details
- Place Photos
- Place Autocomplete Widget
- Place Autocomplete Element
- Place Autocomplete Data API (simple)
- Place Autocomplete Data API (session)
- Place Autocomplete Address Form
Places Service (Legacy)
- Place Searches
- Place Details
- Place Photos
- Place Search Pagination
- Place Autocomplete
- Place Autocomplete Hotel Search
- Restricting Place Autocomplete to Multiple Countries
- Places Search Box
- Retrieving Autocomplete Predictions
- Finding a Place ID
- Locating a Place ID With Reverse Geocoding
React Google Maps Library
Fun
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-11-21 UTC.