--- title: Google Map description: The Google Map Block shows a Google map of one place or of several places. Next to the map it can show a list of the places with their name, address, opening hours or other details, a phone number and… url: "https://shapekode.com/product/shapeblock/docs/google-map/" updated: "2026-10-29" category: Content Block --- # Google Map The Google Map Block shows a Google map of one place or of several places. Next to the map it can show a list of the places with their name, address, opening hours or other details, a phone number and a link for directions. When there is more than one place, a visitor clicks a place in the list and the map moves to it. Use it on a contact page, for a shop or restaurant with several branches, for an office, a venue, a clinic, a market stand or any page where people need to find you. No Google API key is needed. ## How to Add a Google Map Block Follow these steps to add and set up the Google Map Block in the Gutenberg editor. ### Step 1: Add the Google Map Block 1. Open a page or post in the WordPress Gutenberg editor. 2. Click the **+** button to open the block inserter. 3. Search for **Google Map** under ShapeBlock. 4. Insert the block into your page. It starts with one sample place. 5. Select the block and type your own address in the sidebar. The map in the editor shows the result straight away. ![Google Map block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-1.webp) ### Step 2: Configure the Google Map Block Select the Google Map Block and open its settings in the right-hand sidebar. The available tabs are: - **Settings:** Add the places, choose the zoom, the map type and the look, and choose where the list of places goes. - **Layout:** Set the height of the map, the width of the list and the spaces. - **Style:** Style the map frame, the places in the list, the names and the text. - **Advanced:** Set the spacing, position and background of the whole block. ![Google Map block selected in the editor, with three places in the list and the Places panel open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-2.webp) ## Settings Tab The Settings tab contains the **Places**, **Map** and **Place List** panels. ![Google Map block, Settings tab with the Places, Map and Place List panels](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-3.webp) ### 1. Places Each place has its own row, named after the place. Click it to open it. - **Address:** A street address (for example *1579 N Milwaukee Ave, Chicago, IL 60622*), the name of a well-known place, or coordinates such as *40.7580, -73.9855*. This is what Google looks up. A place without an address is not shown. - **Name:** The name shown in the list, for example *Downtown Office*. When it is empty, the address is used as the name. - **Details:** One short line under the address, such as the opening hours or which door to use. - **Phone:** A phone number. On the page it is a link, so visitors on a phone can tap it to call. - **Move Up, Move Down, Remove:** Change the order of the places or take one out. The first place is the one the map shows when the page opens. Click **Add Place** to add another place at the end of the list. With two or more places, clicking a place in the list on the page shows it on the map, and the chosen place is marked in the list. ### 2. Map - **Zoom:** From 1 to 21. 1 shows the whole world, 15 a few streets (the default) and 20 a single building. - **Map Type:** **Road Map** or **Satellite**. - **Look:** Change the colors of the map: **Standard** (Google’s own colors), **Gray**, **Dark**, **Warm** or **Soft** (a quieter, partly gray map). Gray and Soft suit minimal designs, Dark suits dark sections. - **Full Color on Hover:** The map shows its normal colors while the visitor points at it. This option appears when the Look is not Standard. - **Load on Click:** The map is not loaded when the page opens. Visitors see a short note and a button in its place, and the map loads when they click the button (or pick a place in the list). Good for privacy and page speed. - **Button Text:** The text of that button. When empty, it says *Show the Map*. This option appears when Load on Click is on. ### 3. Place List - **Show the List:** **Left of the Map**, **Right of the Map**, **Under the Map** (the places side by side in a grid), **On a Card over the Map**, or **Hide** to show the map only. - **Name HTML Tag:** The HTML tag for the place names: H2 to H6, P or DIV. The default is H4. Pick the level that fits the headings around the map. - **Directions Link:** Adds a link under each place that opens Google Maps with the route to it, in a new tab. - **Link Text:** The text of the directions link. When empty, it says *Get Directions*. This option appears when the Directions Link is on. **Note:** When the block is narrow (on a phone, or in a column less than about 640px wide), a list on the left, on the right or on a card always moves under the map, so the map keeps a usable width. The list beside the map is as tall as the map and scrolls when there are more places than fit. ## Layout Tab ![Google Map block, Layout tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-4.webp) - **Map Height:** The height of the map, for example *480px*. When empty, 460px, and 340px on phones. Responsive settings are available. - **List Width:** The width of the list beside the map or of the card over it. When empty, 340px. Responsive settings are available. This option appears when the list is on the left, on the right or on a card. - **Space Between Map and List:** The space between the map and the list. When empty, 24px (16px on phones). Responsive settings are available. This option does not appear for the card over the map. - **Space Between Places:** The space between the places in the list. When empty, 10px. Responsive settings are available. ## Style Tab The Style tab contains the **Map**, **Place**, **Name** and **Text** panels. The last three appear while the list is shown. ![Google Map block, Style tab with all panels open](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-5.webp) ### 1. Map - **Border:** A border around the map, with its width, style and color. - **Border Radius:** Round the corners of the map. The default is 12px. A radius of 50% on a map as tall as it is wide makes a round map. - **Box Shadow:** A shadow under the map. ### 2. Place - **Background:** The background of each place in the list. When empty, a very light tint of the text color. - **Chosen Place Background:** The background of the place that is shown on the map. - **Chosen Place Line:** The color of the thin line at the left of the chosen place. It also colors the directions link when no Link Color is set. - **Card Background:** The background of the card over the map. When empty, white. This option appears when the list is on a card. - **Padding:** The space inside each place. Responsive settings are available. - **Border Radius:** Round the corners of each place. ### 3. Name - **Color:** The color of the place names. - **Typography:** Customize the font family, size, weight, style, text transform, line height and letter spacing. Responsive settings are available for desktop, tablet and mobile. ### 4. Text - **Color:** The color of the address and the details. - **Link Color:** The color of the phone number and the directions link. - **Typography:** The font of the address, details and links. Responsive settings are available. ## Advanced Tab ![Google Map block, Advanced tab](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-google-map-6.webp) The Advanced tab has the same panels as on every ShapeBlock block: **Spacing** (padding and margin per device), **Position** (place the block with offsets, width and z-index) and **Background** (a color or gradient behind the whole block). They are explained in [Advanced Tab: Spacing, Position and Background](https://shapekode.com/product/shapeblock/docs/advanced-tab/). ## External Services The map is a Google Maps embed, loaded from google.com. When the map loads, Google Maps receives the visitor’s IP address and the address of the place, like any embedded Google map. The directions link opens Google Maps in a new tab. Google’s [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply. Turn on **Load on Click** if you want nothing to be sent to Google until the visitor asks for the map. The block then shows the note *The map is loaded from Google Maps, which receives your IP address when it loads.* and a button, and loads the map only after that click. If your site has a privacy policy, mention Google Maps in it. ### Tips - Check each address on the page once. If Google shows the wrong spot, add the city and ZIP code, or use coordinates. - For several branches, put the list on the left or right and add the opening hours in Details: visitors see every branch at a glance and click the one they want. - Use the Gray or Soft look with Full Color on Hover for a calm map that still reads well when someone looks closer. - Give the map a smaller height on phones, for example 300px, so the list under it is easy to reach. **Live demo:** see the Google Map Block in action on the [Google Map demo page](https://shapekode.com/product/shapeblock/google-map/).