Tutorials
Common map implementations
- Add a Google map with a marker to a website
- Add a Google map to a React app
- Show the user's current location on a map
- Use marker clustering
- Integrate with Firebase for realtime collaborative mapping
Show data on a map
- Display KML on a map
- Import GeoJSON data to a map
- Visualize JSON on a map
- Combine JSON data on a map
Sample apps
Sample apps demonstrating the features of theMaps JavaScript API are listed below for quick reference.
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)
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
Places
- Place Searches
- Place Details
- Place Search Pagination
- Place Autocomplete
- Place Autocomplete Address Form
- 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