# Maps

The <img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FIFujNW2w7vGBWle7QUxI%2Ffavicon-black%20(1).png?alt=media&#x26;token=7217d37c-7da0-48b5-a775-e14b6e5de2f4" alt="" data-size="line"> `maps` block allows you to add a map to any post or page on your site.

<figure><img src="https://lh5.googleusercontent.com/hqoBCYyPz-Z9SOhcjxB_BGlUTIDNDjuG4JnXvkwNtj5dzCIgQu2hofZFIxRCoA1pgF_n3uPux5l0CCzCCoGNQACf86Q9tHN2esmSRq-gtQZiWRegT4i5r5c_4vVdl79Kp6Fmzl_7kk3y-s9KDXh-tyk5aKYjqXgCuB1Gog521zpdPMnGNzGswzuwQY4rlg" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
For it to work in the Editor, be sure to add your API key in the [Cwicly Settings](https://docs.cwicly.com/settings/google-maps-api).
{% endhint %}

<figure><img src="https://lh3.googleusercontent.com/qFjQCn83L6rSHHgstQiDP71mbBeWy9S_Mk1xfxAY5U9P8NHk_ojrTTFT2qkYCvE3h_qkcQstCvneM5wRK0R6atNaOFFkrUMX5Ntt1-IMXTmWj0beMPtPwi00UuvunVI_uthhrHD_pWS21SCqitHKwHq5ZGaWaSMpnR2RL4TimIPn3mthOOlCdl3_4ye_Dg" alt=""><figcaption></figcaption></figure>

## Basics

<figure><img src="https://lh3.googleusercontent.com/NclQNlcc7bKp4_ni0RgI_IogpexgwVB_EKGpIPHalqjXbKgwMkub5Hy2CQLK8UawPA81k9s_-BxElEgEQFHz-GPoJLLf7BmatPk6AU8eyerg_o5WjrzSNyoFUDkp5HebVm2nntHIrzmY5Rf6lZiZj8O-ck2kKvnInSImdcm3j92kAnZrEM2f0YaYIGukOw" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The `maps` block acts like a simple `div` block, allowing you to add any block desired.
{% endhint %}

{% embed url="<https://youtu.be/7J3WaIbOAMY>" %}
Getting Started - Maps Block
{% endembed %}

## Settings

Allows you to specify the `maps` block in more detail.

<figure><img src="https://lh3.googleusercontent.com/RS7XNqDzR7ZzdrR8wNYIL62olYVkIx_84iuASg4ONaCWLI32oeXQ00AIX7TKJgTKU3RHmzy0vPpBCilCrIDthsOS_aZFeZT2ZrhtKchcrWcmc8HoKC9jYLllNE6Fd7NPRIzoLulNEHKO43oUwP4MWPQMwhYvuQiOpyBagHGSOWzzqCO604hBDFH2MIWPXQ" alt=""><figcaption></figcaption></figure>

{% content-ref url="maps/settings" %}
[settings](https://docs.cwicly.com/blocks/maps/settings)
{% endcontent-ref %}

### Search Places

{% content-ref url="maps/settings" %}
[settings](https://docs.cwicly.com/blocks/maps/settings)
{% endcontent-ref %}

### Name

Allows you to add the name of your shop, business, office etc.

![](https://lh6.googleusercontent.com/lwnXexs7q83E7DrQAaEr7-Q7IhuPobyHty8hS9t1V3L-830oF3M6WSgh1k_2znqrqH_35Biee1gCEzslTxQSSLV8q31B94NPaP_sZ4xRyEYcbDMMh233X6HlhPLqIgZeqRLHVCKLVtctLekAEXjbO8yZj14-W0jNTinZA6UnsxZsPK7yR5HHZoPXXZH0RQ)

### Zoom

Allows you to zoom in or out.

![](https://lh5.googleusercontent.com/sxhSjGN0eEObhBAptDP4KWQbmOaWBJA5UDs4pq1R5EzwKR39iJBshJD7KXGMFXmjSV977o0pXguIzEnToIAMI1W6QQ_ZaVd5sMoa9DhRqxqYPmEVkGvJxmAdmaVToMS7l22FV4wk1CiSItqr5H-G7JTvu65EvabDb-nlKOyg-ijBQIp9FLAffpsz5qHDbw)

### Fullscreen

Adds the Fullscreen option to the `maps` block, allowing the maps to be fullscreen if desired.

<figure><img src="https://lh5.googleusercontent.com/tUX76rRVF0bR1Hit5dSUKk4toJrkLOn8LbxKD9DNm0dwL5XOUi96sp8Wt5pUjOQwlRxD4f8YYeCHbVQSghlzqtvcBXfzQyCNeFmI8Dtv4zMnYs3J3a5dl_0sjzd7Ev1sPC_d3pg9QQigxgBZkEC1JYytElLvVu0rXikUFB-PbRYxnjVadr1IcIj-JPkRBQ" alt=""><figcaption></figcaption></figure>

### Map Types

Adds the map types option to the `maps` block, allowing to view the `maps` block at either a plan or satellite view.

<figure><img src="https://lh4.googleusercontent.com/O1s6B75k4bVBNt3zQVdk6E7p2m4OuXTfURKAeVcsI56EgECPvNJNUS2XkOKbdCPdaspM_OEw3QBImhZxTOITdwrM2UkrXKRxx0bSqq3v91Z6ZsboZhc7iSzMT2COaGisBW9ho7Oxv3jvhY9Zlzxo6IX_jPImsYEyA6bI2oEjqIfrbiCXKRwIcxLg6AgqLw" alt=""><figcaption></figcaption></figure>

### Zoom

Adds the zoom and de-zoom buttons to the `maps` block.

<figure><img src="https://lh3.googleusercontent.com/ZX5KPob6-XkSMbVeno08GkTB3abVbJDhPT6ay4_OsAFcxUI6fGbwtOgAkb5erCt111t2D939P_6SyfUZ0ZNOhQldNO01S1M_o5sitZ3hJF8dLlRjsXpv5RPrcA73D1c15iSSgMt0-4Ge8mQ8Fgrh3xQcy2_zChX-VY0RsDJr9RnB1INyLBGDBV5-TucKZA" alt=""><figcaption></figcaption></figure>

### Scale

Adds a scale measurement to the `maps` block.&#x20;

<figure><img src="https://lh3.googleusercontent.com/vPZPqpoxiAkG1Hhnp7GqeA9_4Rlb2M85-7aD01xUYHF5Lpjtz5ffSTSflLBRPbPapoWR33VWcGoVP87R6fBwAxfO2ZofSOr-H_pI09hzbqXx5APUvnFQNePfA04FyTAUXDWN7vzsitRxIReFRCjnYG14Oco9XKEjXYJ2fN_I7h_90QI46Y8dXODNPlFczA" alt=""><figcaption></figcaption></figure>

### Street View

Adds the street view parameter, allowing to view the `maps` block from street view.

![](https://lh6.googleusercontent.com/Fzd5oZQafycdEKQpYa_NPA3NM3LD5efDUODJtv43sZ6PRjL6qti6f403qwhUs8-ha7ZxejAxPgv5xRJwk-hifPeUs8kdbunMo0osWMW830GGjJft2BRD1PVFUeOSU1R0z8qYUVI1ar0jRI2mvazH4_2LUb_ElMEACF-gbZz9BY-lKH4PM2H7qL93DBXwfA)

### Rotate

Adds the rotate parameter to the `maps` block.

![](https://lh6.googleusercontent.com/uOIyPhsZ4Zn_OdSigrlvmr3pBkG1tqrWVZYDjiY_e_--92Fh6lvUZiNav-YBR4Aa1AvLH_7qCz0l0Uy9j7OgedPSp1kDJZ-UKvV71G6_WxMQiazOt_xqaQ5JaufIK0dMK946ITkbpvHAtg6B-2pop9a6jixvqOZBLgFygkGt0ab5LoDbjJUwz4gp1DMHUg)

### Size

Allows you to change the height and width of the `maps` block.

{% hint style="info" %}
By default, it is set to a 500px height and 100% width.
{% endhint %}

![](https://lh5.googleusercontent.com/r51vwNip-IwniAKp6djtPnFjwAZNSfF1TJoOrroTaoxJr0YnY3H58mKRxL3kA6v5gQGVocz77ga3Z0QBkL4rOxkeEuyrd6w3onBLIC7NHOZL3gQ3ARWN9SzGfiB_8vh0jX7UAcuKmjlOjahmceILvooU4ZMhrYAKHrCypWhpTXXLl7LhqLeieqTWoi13rQ)

### Style

Customise the look of the `maps` block thanks to the 8 different map styles.

![](https://lh4.googleusercontent.com/8_vri-GN6oZSQH-mSr4UR6lz7JbiqG04RXXuMhlPh3d1C00JuJdPkFjCfdEJpL7ZRtL5YWA4u78LGt-SN8M0nsohuGlirZN-hDqAi8othopi-n72GM79xBaH51MthiaIyPIDxbv4Te1QU0eGDUt7bhSBciLwJ2demRyxldrO2d33FpT-mBvTtfuD0mvMRA)

***Default***

***Silver***

***Retro***

***Night***

***Dark***

***Aubergines***

***Pastures***

***Dark Gold***

### Overlay Layout

You can personalise the `maps` block by modifying : Colours, Layout and Typography to suit your design.

![](https://lh6.googleusercontent.com/lmqxmh28AdIfv4SglV8ShaASKwGpIVeRcAzRVSroLimVhpsbGlNyz440Qb689hFgeO2mzO3-KrXQZx8sl9PdHRHC0I7oqfJ7cuf3UPZwsFUwCxquDtzJGbXtt53v_gUQaEWrognNZkch6pd3lmzpVjZy46NiLY1-tOrPa5tJA8JGPrb8BWceu0Wpj_JtIQ)

### Colours

Allows you to modify the colours of Text, Link and Background colours.

![](https://lh3.googleusercontent.com/fF8z-w4DHwzQIZ-OLqHWD-mM3na9y3CIvSgA0bH2KqfU6wupVnDNMim0dbx5hjBFmCyyfutpFzJvMdf5swF8S7k8vhyU5Pebbrl2YkLqIj5Yf1iwOjIDSMRLBaHtIUEoNKsYaKUqqiDX5jrMuuwu7awmrwFbbS3gqlXhIxm3ID7Dket0USZ9tSV5jMvWPA)

<details>

<summary>Modify</summary>

1. Select a `maps` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Find Colors and Layout tabs
5. Find required parameter
6. Modify as required
7. Click dot to reset

</details>