# Google Maps

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FYBntsY3ERVVZ4uWWWia4%2FScreen%20Shot%202021-10-14%20at%2021.09.12.png?alt=media\&token=88f9d90f-4c25-4e58-b00e-ad34c07922ff)

A great way to show your nearest store address when customers want to do offline shopping.

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Google map.**
3. **Save.**
   {% endhint %}

For the maps to display correctly, remember to get its API key in theme settings, see [Get API key](https://developers.google.com/maps/documentation/javascript/get-api-key).

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fqi4jCKI3F4OxHLMBV1iq%2FScreen%20Shot%202021-10-14%20at%2021.15.37.png?alt=media\&token=8a217e24-325a-443d-98e7-6bbc0df70304)

After getting the API key, you can now modify the coordinates respectively. Set up a reasonable height for the map section.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FSwIGrgiLjLrd3yxF8aUq%2Fimage.png?alt=media&#x26;token=46ad1608-c47a-4e6d-ae99-f1511f82a3bf" alt=""><figcaption></figcaption></figure>

The map zoom is between 10 and 20. Simply tweak the toggle to change the value.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FXoK6vU4Gsj0hKpD7CK5V%2Fimage.png?alt=media&#x26;token=427bde2a-6547-45d0-9aba-89c431ab49d0" alt=""><figcaption></figcaption></figure>

After adding the **Map text**, you can show more information to your Google Maps about your brand's name, address, working hours, etc., and even add call-to-action buttons here.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FVGfAGU10FpytXDz6IY9i%2Fimage.png?alt=media&#x26;token=f4f61e25-0f7a-4265-82d6-e51c615b55c9" alt=""><figcaption></figcaption></figure>

You can decide on the **content position** and **content alignment** in **Map settings**.&#x20;

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FESZ2R3cMN5lnH2ymlpli%2Fimage.png?alt=media&#x26;token=963f24a9-ec8b-4c00-85a1-3bc069e820fa" alt=""><figcaption></figcaption></figure>

To add content to your Google Maps, click **Add block** and select suitable blocks that meet your needs.&#x20;

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fxci2Yr3q33VnzqkXg8B5%2Fimage.png?alt=media&#x26;token=6d670481-f0f7-4ef4-9703-2defb8828df5" alt=""><figcaption></figcaption></figure>
