The best way to show a Google map is a shape with its Fill set to Map. You type your address, choose the zoom and style, and the map fills the shape, so you can place and size it like any other object, including inside a Container on a responsive page. The better-looking map styles need a free Google Maps API key (a code from Google that lets your website show its maps).
Add the map
- Open the page and choose Insert > Map. EverWeb adds a box with a map and opens Inspector > Shape Options. (You can also select any shape or Container and choose Map in the Fill menu.)
- Choose the type of map in the menu under Fill:
| Map type | What you get | API key |
|---|---|---|
| Simple Map (Deprecated) | The older, basic map, the same as the old Google Maps widget | Not needed |
| Basic Map (Free) | Roadmap or satellite view, zoom, terrain and labels | Needed. Google doesn't charge for this map |
| Advanced Map | Everything in Basic, plus Show controls, Ignore mouse gestures, Always show label on marker and your own Label on the marker | Needed. Google charges your Google account for using it |
For most websites, choose Basic Map (Free).
- In Location, type the full address, including the town and country or postcode. A business name that Google Maps knows also works.
- Set Zoom, choose Roadmap or Satellite, and tick Terrain or Labels if you want them.
- Paste your key into Google Maps API Key (see below).
- Drag the map to size. On a responsive page, put it in a Container and tick Full width in Inspector > Metrics so it shrinks to fit a phone.
- Click Preview, then publish.
Get a Google Maps API key
When you choose Basic Map (Free) or Advanced Map, EverWeb offers Get Google API Key..., which opens Google Cloud in your browser. There you will:
- Sign in with a Google account (or create one), and add Google Cloud to it if asked.
- Create a project, if you don't have one yet.
- Turn on (enable) the Google Maps Platform APIs for that project.
- Add billing details if Google asks. You won't be billed for Basic Map (Free). Advanced Map use is billed by Google.
- Copy the key and paste it into Google Maps API Key in EverWeb.
Google changes these screens from time to time. If you get stuck, Google's own Maps Platform help is the best guide. We can't sign in to or manage your Google account for you.
You can restrict the key to your own website address in Google Cloud, so that no one else can use it. If you do, the map may only show on your published website, not in Preview.
The older ways
- The Google Maps widget (in the Widgets tab) shows the same basic map as Simple Map (Deprecated). For new maps, use a Map fill instead.
- Google Maps' own embed code (from Share > Embed a map on Google Maps) also works, pasted into an HTML Snippet widget. It needs no key, but it has a fixed size, so it may not shrink on a phone. See Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget.
Common problems
| What you see | What to do |
|---|---|
| "Google Maps Platform rejected your request" or "Invalid 'q' parameter" on your page | Something on that page has its Fill set to Map with an empty Location. Type an address, or, if you didn't mean to add a map there, set its Fill back to None. It can hide in a Container, a FlexBox or a Master Page |
| A grey box or a Google message about the API key | Check that the key is pasted in full, with no spaces, that the Maps APIs are turned on for that project in Google Cloud, and that billing is set up if Google asked for it |
| The pin is in the wrong place | Add the town, country or postcode to Location |
| The map is too wide on a phone | Put it in a Container, tick Full width in Inspector > Metrics and set a Max Width. See My website looks fine on my computer but is cut off or jumbled on my phone |
| The map should be on every page, such as in the footer | Put it on your Master Page |
Related articles
- Build a responsive page with Containers so it stacks neatly on a phone
- My website looks fine on my computer but is cut off or jumbled on my phone
- Put the same header, menu and footer on every page with a Master Page
- Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget