Add Google Maps to your website

Help first-time visitors find your salon, café or studio before they set off. Add an interactive map beside your address and contact details, then check the saved preview.

Before you start: Google Maps requires a paid Pineapple plan. Have your full business address ready. You do not need your own Google API key.

What your visitors will see

A location map should support a useful contact page: a clear heading, readable address and one next step, such as booking a visit.

Willow Studio demonstration with salon services, a Book a visit button and a Google Maps location pin

Fictional salon example captured from a saved Pineapple draft. The map uses Covent Garden station as a public demonstration location; it is not the salon’s address. Use your own verified address.

1. Add the Google Maps block

Open the page in your Pineapple editor. Select a nearby block, choose Insert before or Insert after, then choose Google Maps under Special Components in the Blocks picker.

Blocks picker with Google Maps under Special Components

Place the map near the business address and contact information. Keep the address as normal page text so people can copy it.

2. Enter your full address

Select the map and open Edit → Props. Fill in Business name or full address with the street number, street, city, postcode or ZIP code, and country. If you have several branches, use the address of this branch.

A postcode alone can identify an area instead of your entrance. Check the place name and pin before continuing: Google chooses the matching location and place information.

3. Choose the map’s appearance

You can start with the defaults. For the example above, we used zoom 15, a road map, 360-pixel height, 800-pixel maximum width and 16-pixel corners.

Google Maps Props panel showing the address field, zoom 15, roadmap, height 360, width 800 and corner radius 16

Zoom: show nearby streets or a wider area. The default is 14; the control runs from 0–21. Detail depends on Google’s map data.
Map type: choose roadmap or satellite.
Map height: defaults to 400 pixels; the minimum is 200.
Map width: maximum width, default 800 pixels. The map fits smaller containers.
Corner radius: 0 for square corners, up to 50 pixels for rounded corners.

4. Save, preview and check

Choose Save Draft, then Preview Draft Page. In the editor, clicking the map selects its block; the preview lets you use the map controls.

Right location: compare the place name, address and pin with your actual business entrance.
Usable map: check the map loads and that visitors can open directions or use its controls.
Phone layout: check the map fits without sideways scrolling and your address remains readable.

When you have reviewed the result, publish your page and check its public URL. Saving a draft alone does not update your live website. After later changes, save and publish again.

Questions and troubleshooting

Why is my map empty?

Check that an address is saved and your website has a paid plan. If Google’s map still does not load, try another browser to check whether an extension is blocking it. Contact Pineapple support with the page URL and visible error if the problem continues.

Why is the pin in the wrong place?

Open Edit → Props and correct Business name or full address. Include the street number, city, postcode or ZIP code, and country. Save the draft and check the preview again before publishing.

Can I change Google’s place card or marker?

Google controls the place information and map labels. Pineapple does not provide a setting to hide the place card or change the marker colour.

What happens if I downgrade?

The map is hidden on the public website without paid access. Your saved location and settings remain.

What else should go on my contact page?

Include a readable address, opening hours, contact details and a useful next step. If your entrance is hard to find, add accurate arrival instructions. See Contact Form for collecting enquiries.