Google Maps
How to integrate and customize Google Maps on your Madra website.
How is the map displayed on my site?
If you provided a business address in your order form, your Madra website includes an embedded Google Maps widget. The map is typically displayed on the Contact page, either above or below the contact form, and shows your exact business location with a pin marker.
The map is interactive: visitors can zoom in and out, switch between map and satellite views, and click the marker to get directions from their current location. On mobile devices, the map supports touch gestures like pinch-to-zoom.
The embedded map loads using Google's official Maps Embed API, which ensures reliability, fast performance, and compatibility with all modern browsers.
How do I change the address on the map?
If your business moves or you need to display a different location, you can update the address at any time. Here is how:
Send a message through your dashboard or email hello@madra.io with the new address you want displayed.
Our team replaces the map embed with the new location. This usually takes less than a few hours.
Check your live site to confirm the map shows the correct location. If anything looks off, let us know and we will adjust it.
If you have multiple locations (for example, two offices or a shop and a warehouse), we can add multiple maps or a single map with several pins.
Can I customize the map appearance?
Yes. While the default Google Maps embed works well for most businesses, you have several customization options:
- Zoom level — choose how zoomed in or out the map appears by default. A closer zoom is better for precise street-level directions, while a wider view is useful if your business covers a larger area.
- Map type — display the standard roadmap, satellite imagery, or a hybrid of both.
- Size and layout — the map can span the full width of the page, sit in a column beside your contact form, or appear as a smaller element within a section.
- Dark mode — if your website uses a dark color scheme, we can apply a dark-styled map that blends seamlessly with your design.
Let us know your preferences and we will configure the map to match your site's look and feel.
Is Google Maps included in all plans?
Yes. The Google Maps integration is included at no extra cost in every Madra plan, from Starter to Pro. There are no usage fees or API costs on your side — Madra handles the technical setup and hosting of the map embed.
The integration uses Google's free Maps Embed API tier, which provides unlimited map views for embedded maps. You will never be charged by Google for displaying the map on your website.
Does the map work on mobile devices?
The Google Maps embed is fully responsive and adapts to any screen size. On mobile devices, visitors can interact with the map using standard touch gestures:
- Pinch to zoom — use two fingers to zoom in or out.
- Drag to pan — slide one finger to move around the map.
- Tap the marker — opens a popup with your business name and address.
- Get directions — tapping the directions link opens the Google Maps app (if installed) or the mobile browser version.
The map container automatically resizes to fit the screen width while maintaining a usable height. On very small screens, the map remains functional and never overflows or breaks the page layout.