# Google Maps

![](https://docs-assets.foxecom.app/megamog-theme/Screen%20Shot%202021-10-14%20at%2021.09.12_f4c2c8Lr.png)

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

<Hint type="success">

Steps

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

</Hint>

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).

![image](https://docs-assets.foxecom.app/megamog-theme/image_ssPuNw5R.png)

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

![image](https://docs-assets.foxecom.app/megamog-theme/image_q8oyV9jp.png)

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

Check the corresponding option to display the content in container box

![image](https://docs-assets.foxecom.app/megamog-theme/image_isFrWRFn.png)

## 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.

![image](https://docs-assets.foxecom.app/megamog-theme/image_TORCMfXK.png)

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

![image](https://docs-assets.foxecom.app/megamog-theme/image_I63nbq2B.png)