Google Maps
Embedded interactive map
LocationMap - Help Customers Find You
Interactive Google Maps embed with a directions button. Customers can explore, zoom, and navigate to your location with one click.
Help Customers Find You
The LocationMap component embeds Google Maps showing your business location. Visitors can interact with the map, and the "Get Directions" button opens navigation in Google Maps (or the Maps app on mobile).
Default Map (400px Height)
Best for: Contact pages, location pages, about sections
Standard map with "Get Directions" button. Works on all devices.
Loading map...
Show Code
<LocationMap />Custom Height
Best for: Hero sections, featured locations
Taller map (600px) for more prominent display.
Loading map...
Show Code
<LocationMap height="600px" />Compact Map (Without Directions Button)
Best for: Footers, sidebars, multi-location pages
Smaller map (300px) without directions button for space-constrained layouts.
Loading map...
Show Code
<LocationMap height="300px" showDirections={false} />Configuration
Add Your Business Coordinates
Edit src/config/business.js:
export default {
coordinates: {
lat: 37.7749, // Your latitude
lng: -122.4194 // Your longitude
},
// ... other config
};How to Find Your Coordinates:
- Go to Google Maps (maps.google.com)
- Right-click on your business location
- Click the coordinates to copy them
- Paste into business.js config
LocationMap Features
Get Directions
Direct link to navigation
Mobile-Friendly
Opens Maps app on mobile devices
Configurable
Custom height and options
Add Map to Your Site
Show customers exactly where to find you. Interactive map with one-click directions.