How to Add Google Maps to Wix

 Note: We now offer a FREE wizard that does this all for you. 
Click here to configure it and add to your WIX website in seconds. 

In this tutorial you will learn how to add Google Maps to Wix. You can use Google Maps with all Wix accounts – both free and paid. Adding a Google Map on your Wix website has a number of benefits:

• Location: A Google Map helps your customer find your physical business. You can offer directions and even interactivity to your users.
• Authenticity: Advertising your physical location lends authenticity and credibility to your website. It lets your audience know that you are not a fly-by-night, who exists only in cyberspace.
• Convenience: Not all site visitors have the skill or patience to find your address on Google Maps themselves. Providing a map on your Wix site bypasses the need for this.

The Wix editor provides out-of-the-box support for simple Google Maps. The built-in function gives you a lot of choice when it comes to style and visual appearance, but does not offer all the features available for Google Maps.

If you need more advanced functionality, you can embed a Google Map on your Wix page. To do this, you create the map on the Google Maps site and then paste the code onto your Wix website page.

Contents

Adding a simple Google Map in the Wix editor 1

Accessing your site in the Wix editor 1

Adding a Google map in the Wix editor 3

Setting your address in the Google Map 4

Setting the Google Map behaviour 5

Troubleshooting the Google Map address 6

Making your Google Map responsive 7

Embedding a Google Map in a Wix page 9

Creating a map on Google Maps 9

Embedding the Google Map code on a Wix page 10

Adding a simple Google Map in the Wix editor

Follow our step-by-step guide to adding Google Maps to your Wix website. It only takes a few clicks to display a map.

Accessing your site in the Wix editor

To access your site in the Wix editor:

1. Login to your Wix account.
2. Select the site you want to work on, if necessary.
3. Click Manage & Edit Site.

1. In Site Manager click Edit Site.

1. Your site opens in the Wix editor.

Adding a Google map in the Wix editor

To add a Google map:

1. Select a page.
   
2. Click a page area to select it.
3. Click Add > Contact and then scroll to the Google Maps section of the Add a Contact Tool.
4. Click the map style you want and drag it onto the page.
   
5. Use the handlebars to resize the map to suit your page design.
   

Setting your address in the Google Map

The address of the Wix office is used by default when you add the map.

To set your address:

1. Click on the map to display the controls.
2. Click Change Address.
3. In Google Maps Settings:
   • What’s your location?: Enter your address or the location you want users to find and then press Enter. If Google Maps recognizes the address, a green tick displays to indicate this. If you experience difficulties, please see Troubleshooting the Google Map address below.
   • Want to show a description?: Optionally enter a description. This text displays in a callout pointing to the red pin. You can ignore this field if you like.

Setting the Google Map behaviour

There are a number of options to control what your visitors see and what they can do when interacting with the Google Map.

To set the behaviour:

1. Click the map to activate the controls.
2. Click the setting icon.
   <controls-settings.png>
   
3. In Google Maps Settings click the toggle buttons to enable and disable options:
   • Show map and satellite views: Displays the Map | Satellite links that allow visitors to switch views.
   • Show zoom control: Displays the + and – icons that allow visitors to zoom in and out.
   • Show Street View control: Displays the street view icon that allows visitors to use Google Street View.<street-view-icon.png>
   • Allow dragging: Allows visitors to move around the map by clicking and dragging.
   • What language is the button in?: Click the down arrow and select your language from the dropdown, if necessary.

Troubleshooting the Google Map address

If Google Maps does not recognize your address or show your address correctly, you can use your coordinates instead of the physical address in the What is your location field?.

To find your coordinates:

1. Go to Google Maps at https://maps.google.co.uk (or your country equivalent).
2. Enter your address into the search box.
3. Right-click the pinned location on the map and click What’s here?
4. Copy the coordinates that appear in the pop up.
5. On your Wix page, click the Google Map in the editor to activate the controls.
6. Click the settings icon
7. Paste the coordinates your copied in the What’s your location? field.
   <coordinates.png>
   

Making your Google Map responsive

Simple Google Maps are static by default. You can test this by progressively narrowing and widening your browser window while observing the map’s behaviour.

To make your Google Map responsive:

1. Click your map to activate the controls.
2. Click the stretch icon.
   <controls-stretch.png>
   
3. In Stretch Map:
   • Stretch to full width: Click on the toggle button to enable this. The map will stretch to cover the full width of the page.
   • Margins: Use the slider to set margins on the left and right of the map. You can use pixels or percentage. Maximum settings are 80px or 5%.
     <stretch-map-dialog.png>
     
4. There are many available tools to test responsiveness. This is how our map displays on an iPad Pro in Google Chrome’s Responsive tool. Go to More Tools > Developer Tools in Chrome to access this tool.
   <map-ipadpro.png>
   

<select-full-width-map.png>

Embedding a Google Map in a Wix page

While the simple Google Maps available out-of-the box in the Wix editor offer a great solution for most websites, they do not provide the full functionality that is possible when you create a custom map on the Google Maps site.

Limitations of the out-of-the box Wix solution include:

• You can only mark a single location.
• You cannot render a Street View image.

To get the full power of Google Maps you need to create your map on the Google Maps site and then embed the code on a page of your Wix site.

Creating a map on Google Maps

The first step is to create a map on the Google Maps site.

To create a map on Google Maps:

1. Open Google Maps at www.maps.google.co.uk (or your country’s equivalent).
2. Make sure the map, Street View image, or directions you’d like to embed show up on the map.
3. In the top left corner, click the menu icon <google-maps-menu-icon.png> .
4. Click Share or embed map.
   <google-maps-share-embed.png>
   
5. Select the Embed map tab, and then select the size you want and copy the HTML embed code.
   <copy-embed-code.png>
   
6. Paste the code into Notepad or a similar program for now. We will use it to display the embedded map in our Wix site.

Embedding the Google Map code on a Wix page

The next step is to paste the embed code copied from Google Maps on a page.

To display an embedded Google Map on your Wix website:

1. Select a page and go to Add > More > Embeds.
   
2. Drag HTML Code onto the page. This allows you to add custom HTML code on your page. < html-code-icon.png>
3. Click Enter Code.
   
4. Paste the code you copied from Google Maps into the Add your code here box. Wix will verify the code and indicate that it is valid with a green tick.
5. Click Apply.
   
6. The embedded map renders on the page. You may have to resize the element to suit your page and the size of the Google Map.
   

We hope you have enjoyed this tutorial on how to add Google Maps to your Wix website!

May lots of new customers find you and make your business boom.