# Google Maps

![](https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/8qjnj3nOMploYUAxucnm/Screen%20Shot%202021-10-14%20at%2021.09.12.png)

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 %}

In order for the maps to display correctly, remember to get its API key in Theme settings > Integration, see [Get API key](https://developers.google.com/maps/documentation/javascript/get-api-key).

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FSj5otnSSwgzalROgmzT3%2Fimage.png?alt=media&#x26;token=53533700-02af-4de6-b325-728e6b2cd5e5" alt=""><figcaption></figcaption></figure>

After getting the API key, you can now customize the section settings.

## Section settings

### Map settings

* **Height** of the map: Small/Medium/Large;
* **Map style**: Standard/silver/Retro/Dark/Night/Aubergine;
* Set an **image** to show when the map is not loaded;
* **Map zoom**: The map zoom is between 12 and 20. Simply tweak the toggle to change the value;
* **Map address**: Insert your full address.

### Content settings

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FyOkPiavbiDwbw9OSfRuD%2Fimage.png?alt=media&#x26;token=8be0ef27-b2d2-413f-a531-8178a617963f" alt=""><figcaption></figcaption></figure>

You can decide on the **Content position** and **Content alignment.**

Check the corresponding option to display the content in container box

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FfTz7g4ohdUG5LtpxWcez%2Fimage.png?alt=media&#x26;token=a4fe65b6-3cf2-4346-a589-6e58eb4820a4" alt=""><figcaption></figcaption></figure>

## Block settings

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://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FKzA8ri5MaoqW93kCvALb%2Fimage.png?alt=media&#x26;token=bbb5b65c-0825-4174-9ecb-cd3190a9b271" 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://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F242QMHY4INanasYo6Guc%2Fimage.png?alt=media&#x26;token=52f4b95f-15e9-4c3c-811f-0d82f797d102" alt=""><figcaption></figcaption></figure>