This add Google Maps to WordPress tutorial skips the usual iframe copy-paste. Type in an address and the map already shows streets, pins, and the surrounding neighborhood, styled to match the rest of your site.
Set up the API key
In Mosaic’s settings, scroll to Integrations and paste in your API key. This is a one-time setup, every map on the site uses it from here on.
Add and configure the map
From the Add panel, drop a Google Maps element wherever you want the map to appear.
In the Settings panel, type an address into the Address field. The map jumps straight there, with streets, landmarks, and the surrounding area already visible.
Set the Zoom level to control how close the map starts, lower for a wider view, higher to zoom in on the building itself.
Switch Map type between Road map and Satellite, depending on whether you want a standard view or an aerial one.
Switch Map type between Road map and Satellite, depending on whether you want a standard view or an aerial one.
Keep Lazy load enabled so the map only loads once a visitor scrolls down to it, instead of loading with the rest of the page. This speeds up the initial load and skips wasting a map request on visitors who never scroll that far.
Style the map
In the Style panel, set a max height for the map so it doesn’t take up more space than the rest of the page.
Set Overflow to Hidden and add a border radius, using a style variable to keep it consistent with the rest of your site.
Result
The map now sits exactly where visitors expect to find you, styled to match the page, and it only loads once someone scrolls down to it.