Google Maps Integration
Integrate interactive maps with markers, geocoding, and places search
This live demo uses the real Google Maps JavaScript API. Explore the interactive map below — click on markers to see location info, switch between Map and Satellite views, zoom in/out, or use the location button to find your current position. The map displays popular landmarks in Bangkok as sample markers.
This is a real Google Maps API integration using @react-google-maps/api. Features include custom markers, InfoWindows, map type switching, zoom controls, and geolocation. You could use Mapbox or Leaflet as alternatives — the React state management patterns apply to any mapping library.
How it works
# 1. Install @react-google-maps/api
npm install @react-google-maps/api
# 2. Add your API key to .env.local
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here
# 3. Configure Google Cloud Console:
# - Enable Maps JavaScript API
# - Set HTTP referrer restrictions for security
# - Set API quotas to prevent abuse
# Key Point: NEXT_PUBLIC_ prefix is required because
# Google Maps JavaScript API runs in the browserMarkers
Custom markers with info windows.
Directions
Route planning and navigation.
Map Types
Roadmap, satellite, and terrain views.
Geolocation
Current location and geocoding.
Key Features
- •Interactive maps with custom markers
- •Geocoding API for address lookup
- •Places Autocomplete integration
- •Custom map styling and controls
- •Responsive map containers