Browse by Topic

Adding a Google Map to a Web Page

Displaying a Google Map of your store's physical location is a convenient way for site visitors to readily locate your store. Users can not only see your store's location but get directions and other benefits that Google Maps provides. Putting a Google Map on your store requires pasting code into a webpage.

1. Pull up your business's address in Google Maps.

2. Click the Menu icon in the upper left of the screen, then click Share or embed map.

Share or embed map in the Settings menu in Google Maps

3. Click Embed map. Choose a size from the drop-down, then copy the <iframe> code.

Embed map screen includes an option for size, a preview of the map, and the iframe code to be copied

4. In your BigCommerce control panel, go to Storefront Content Web Pages. Create a web page, or edit an existing one.

5. Scroll down to Page Content, and click the HTML button in the WYSIWYG Editor.

HTML button in the WYSIWYG editor

6. Paste the code you copied from Step 3 into the source of the page.

Example of code pasted into the HTML Source Editor

7. Click Update, then Save & Exit.

 Example of how an embedded Google map may look on a web content page

If you are not familiar with HTML, we recommend pasting the code before or after any existing code in the HTML Source Editor or using the "Ask a Design Partner" Community Group.

Was this article helpful?