How to Add Google Maps to Your Website

Published on January 15, 2025 • 10 min read

Want to add an interactive Google Map to your website but not sure how? This comprehensive guide covers every major website platform, with step-by-step instructions for WordPress, Wix, Squarespace, Shopify, Webflow, and more.

Jump to Your Platform

Before You Start

No matter which platform you use, you'll need to generate your map embed code first. Here's how:

  1. Go to the Maps Generator tool
  2. Enter your complete address
  3. Customize the size, zoom level, and map type
  4. Click "Generate Map"
  5. Click "Copy" to copy the embed code

Now you're ready to add it to your website. Follow the instructions for your specific platform below.

WordPress

Difficulty: Easy

For Block Editor (Gutenberg):

  1. Edit the page or post where you want to add the map
  2. Click the + button to add a new block
  3. Search for "Custom HTML" and select it
  4. Paste your map embed code into the HTML block
  5. Click "Preview" to see your map
  6. Click "Update" or "Publish" to save

For Classic Editor:

  1. Switch to the Text tab (not Visual)
  2. Paste your map embed code where you want it to appear
  3. Switch back to Visual to preview
  4. Update or publish your page
WordPress Tip: If you're adding a map to your footer or sidebar, go to Appearance → Widgets, add an HTML widget, and paste your code there.

Wix

Difficulty: Easy
  1. Open your Wix editor
  2. Click the + button on the left sidebar
  3. Select Embed Code (or search for "Embed")
  4. Choose Embed HTML
  5. Click Enter Code
  6. Paste your map embed code
  7. Click Update
  8. Drag and resize the embed element to position it
  9. Click Publish to make it live
Wix Tip: You can also use the built-in Google Maps element from the "Map" section, but custom embed codes give you more control over styling and features.

Squarespace

Difficulty: Easy

Squarespace 7.1 (Current Version):

  1. Edit the page where you want to add the map
  2. Click an Insert Point (the + icon)
  3. Search for and select Code
  4. Paste your map embed code
  5. Click Apply
  6. Click Save in the top left

Squarespace 7.0 (Legacy):

  1. Edit the page where you want to add the map
  2. Click Edit on the page
  3. Hover where you want the map and click Insert Point
  4. Select Code from the menu
  5. Paste your embed code
  6. Click Apply, then Save
Note: Squarespace also has a built-in Map Block, but it may not work in all countries. Custom embed codes work everywhere.

Shopify

Difficulty: Medium

For Pages:

  1. From your Shopify admin, go to Online Store → Pages
  2. Select the page you want to edit (or create a new one)
  3. Click Show HTML (the <> icon)
  4. Paste your map embed code where you want it
  5. Click Show HTML again to preview
  6. Click Save

For Your Contact Page (Theme Settings):

  1. Go to Online Store → Themes
  2. Click Customize on your active theme
  3. Navigate to your Contact page in the preview
  4. Add a Custom Liquid or HTML section
  5. Paste your map embed code
  6. Click Save
Shopify Tip: Some themes have built-in map sections. Check your theme documentation first, but custom embeds usually offer more flexibility.

Webflow

Difficulty: Easy
  1. Open the Webflow Designer
  2. Navigate to the page where you want to add the map
  3. From the Add Elements panel, drag an Embed element onto your page
  4. Double-click the embed element or click the Settings icon
  5. Paste your map embed code into the code editor
  6. Click Save & Close
  7. Resize and position the embed element as needed
  8. Click Publish when ready
Webflow Tip: You can add custom CSS to style the container around your map for even better design control.

Weebly

Difficulty: Easy
  1. Open the Weebly editor for your site
  2. Drag the Embed Code element from the left sidebar onto your page
  3. Click Edit Custom HTML
  4. Paste your map embed code
  5. Click outside the box to close the editor
  6. Drag and resize the element to fit your design
  7. Click Publish when ready

GoDaddy Website Builder

Difficulty: Easy
  1. Open your GoDaddy Website Builder
  2. Navigate to the page where you want to add the map
  3. Click Add Section
  4. Select HTML from the options
  5. Paste your map embed code
  6. Click outside the HTML box to save
  7. Adjust the section size as needed
  8. Click Publish to make it live

Custom HTML Websites

Difficulty: Easy
  1. Open your HTML file in a code editor
  2. Find the section where you want to add the map
  3. Paste your embed code directly into the HTML
  4. Optionally, wrap it in a container div for styling:
<div class="map-container">
  <!-- Paste your map embed code here -->
  <iframe width="600" height="450"...></iframe>
</div>
  1. Save your file and upload to your server
HTML Tip: Add CSS to make your map responsive:
iframe { max-width: 100%; height: auto; }

Troubleshooting Common Issues

Map Not Showing

Map Too Small or Too Large

Map Not Responsive on Mobile

Wrong Location Showing

Best Practices for Website Maps

1. Size Your Map Appropriately

For most websites, 600x450px works well. For full-width sections, consider 800x500px or larger. Match your site's content width for the best appearance.

2. Place Maps Strategically

3. Choose the Right Map Type

4. Set an Appropriate Zoom Level

Zoom level 13-15 works best for most locations. Too close (16+) can be confusing; too far (10-) lacks useful detail.

5. Test on Mobile Devices

Over 60% of website traffic is mobile. Always preview your map on phones and tablets to ensure it displays correctly.

Platform Comparison

Platform Difficulty Steps
WordPress Easy 5-6 steps
Wix Easy 6 steps
Squarespace Easy 5 steps
Shopify Medium 6-7 steps
Webflow Easy 6 steps
Weebly Easy 5 steps

Next Steps

Now that you know how to add maps to your website, here are some ideas to get the most out of them:

Pro Tip: Maps improve local SEO. Having an embedded Google Map on your website helps search engines understand your location and can improve your rankings for "near me" searches.
Create Your Map Embed Code