Google Maps Block | Carrot Help Center

Looking for a simple way to add an interactive map of a property or location to your website? We’ve made it easier than ever with our new Google Maps block.

This new feature lets you embed a map without having to deal with tricky scripts or clunky shortcodes. The best part? This block is built to perform. If you’ve previously used shortcodes or scripts to embed a map, we recommend replacing those maps with the new Google Maps block to improve page load speed significantly.

Improving Site Speed with Carrot’s NEW Google Map Feature

Carrot’s new Google Maps block initially loads as a lightweight image, and only becomes an interactive map when a visitor hovers or clicks on it. This on-demand loading prevents your website from slowing down, which not only keeps your visitors happy (better UX) but also helps you rank higher in search results (improved SEO). And because a faster, more user-friendly site can lead to more leads and conversions, this block is a powerful tool for your business.

Let’s walk through the simple steps to add the Google Maps block to your site.

Step 1: Edit Your Page and Add the Block

In your site dashboard, edit the page you wish to add a map to. Then in the editor:

Click the + button to add a block
Then search for the Google Map block (you can type “map” into the search)
Click on the Google Maps block to add it to the page

Step 2: Enter Your Address

Once the map block is added to the page, enter your address into the address field. Once you start typing your address, a dropdown will appear with a list of addresses that match the content you enter. Go ahead and select your address from the list.

Once you select your address, the map will display:

Step 3 (Optional): Change the Settings to Your Liking

The Google Maps block has a few settings that you will find in the block settings pane on the right. Here’s a breakdown of what each of them does:

Height: Sets the height of the map
Zoom: Sets how zoomed in or out the map is by default
Image only (Toggle): Sets the map to display as an image instead of an interactive map

Step 4: Save

Once you have your map dialed in the way you want it, go ahead and click the Save button in the top right and you’re finished!

Conclusion

That’s it! In just 4 simple steps, you now have a Google Map embed with great performance and customization options!

This method of adding Google Maps is recommended because it improves page speed by just loading an image when the page initially loads, then making it interactive when a visitor hovers or clicks. On top of that, it is much easier to implement than using the shortcode method.

ℹ️ NOTE: The map shortcode still works and existing maps set up with the shortcode are unaffected. However, we recommend updating any embedded maps with this new Google Maps block version to improve your page load speed significantly! To learn about the map shortcode, or any other shortcodes, please refer to our guide on shortcodes.

You can even take it a step further by adding the Google Maps block to a custom block pattern, making it even easier to add your map to multiple pages!

To learn more about customizing your site, please check out the guides below!