🎯 Purpose
The Google Maps widget lets you effortlessly embed an interactive map into your page—ideal for contact, location, itinerary pages, or showcasing multiple sites.
🔑 Setup Requirements
Obtain a Google Maps API key, with billing and the Embed Maps API enabled.
Add the key under Elementor’s integration settings to activate the map feature.
⛳ Content Settings
Location Field: Type the address or place name to center the map.
Zoom Level: Use a slider to control how close or broad the initial view is.
Height: Adjust the map’s vertical size using a slider for fitting the layout.
🎨 Style & Appearance
Use custom CSS filters in both normal and hover states to adjust:
Blur
Brightness
Contrast
Saturation
Hue
Also control transition duration for smooth hover effects.
⚙️ Advanced Options
Height Control: Set consistent map size across devices.
Hover Styles: Apply distinct visual effects when users hover.
Advanced Tab: Use typical layout options like margin, padding, positioning, custom attributes, and motion or entrance animations.
âś… Best Practices
Always test on mobile and desktop to confirm map visibility and interactivity.
Use CSS filters and transitions to create engaging hover effects that align with your design.
Adjust height and zoom to focus attention on the key map area relevant to your audience.
The Google Maps widget offers a flexible and styled way to integrate maps into Elementor pages—combining location focus, design effects, and layout control.
