Page Summary
-
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 our tutorials.
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
- Style a boundary polygon
- Make a choropleth map
- Handle click events
- Search for boundaries by name or Place ID
Data-driven styling for datasets
- Style point data features
- Style polygon data features
- Handle click events on a polygon
- Style polygon data features using colors
- Style polyline data features
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
Services
- Geocoding Service
- Reverse Geocoding
- Reverse Geocoding by Place ID
- Geocoding Component Restriction
- Region Code Biasing (ES)
- Region Code Biasing (US)
- 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
Directions (Legacy)
- Directions Service
- Displaying Text Directions With setPanel()
- Directions Service (Complex)
- Travel Modes in Directions
- Waypoints in Directions
- Draggable Directions
Distance Matrix (Legacy)
Libraries: Drawing
Libraries: Geometry
Address Validation
Places (New)
- Text Search (New)
- Nearby Search (New)
- Place Details
- Place Photos
- Place Reviews
- AI-powered summaries
- AI-powered summaries (simplified)
- Place Autocomplete Widget
- Place Autocomplete Element
- Place Autocomplete Data API (simple)
- Place Autocomplete Data API (session)
- Place Autocomplete Address Form
Places UI Kit
- Basic Place Autocomplete Map
- UI Kit Place Details
- UI Kit Place Details Compact
- UI Kit Place Search Nearby
- UI Kit Place Text Search
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