Showing a map

The Map element puts an interactive map on a page, centred wherever you tell it. It's what goes on a contact page next to the address.

You supply the API key. ClickWhale doesn't have an account with Google or Mapbox on your behalf. You create one yourself and paste the key into the element. Without a key the map cannot load, and the page shows a short message saying so.

Choosing a provider

Map type offers Google Maps or Mapbox. Either works; the difference is whose account you already have and whose free allowance suits your traffic. Both require a key, and the key is entered per map element, so a site with maps on three pages needs it pasted three times.

API key is that key. Get it from the provider's own developer console: Google Cloud Console for Google Maps, your Mapbox account page for Mapbox. Both let you restrict a key to your own domain. Do that: an unrestricted key can be used by anyone who views your page source.

Where the map points

Latitude and Longitude are the coordinates the map centres on. Leave them empty and the map centres on Amsterdam.

To find the coordinates for an address: open Google Maps, right-click the exact spot, and the first item in the menu is the pair of numbers. Click it to copy. Paste the first number into Latitude and the second into Longitude. They're decimal numbers, like 52.3676 and 4.9041, and a minus sign is meaningful (south, or west).

Zoom is chosen in words rather than numbers:

Aspect ratio is the map's shape: 16/9, 4/3, 2/1, 1/1, 1/2, 3/4 or 9/16. Its width comes from the column it sits in, and the ratio decides the height from there. 4/3 or 1/1 usually beats a wide 16/9 in a narrow column.

The marker

Enable marker icon drops a pin at the coordinates you entered. Without it the map is centred on your location but points at nothing in particular.

With the marker on, Marker icon lets you pick an image from your media library to use instead of the standard pin, a small logo, for instance. Leave it empty and ClickWhale's own pin is used. Keep a custom icon small and square; it is drawn at whatever size the file is.

Maps and the cookie bar

Both providers set cookies and profile the visitor, so ClickWhale treats a map as a functional third party: with the cookie bar on, the map doesn't load until the visitor has accepted that category. In its place they see a short explanation and an Allow and show button, which grants just the functional category and loads the map.

If a visitor declines, consider putting the plain address and a link to directions next to the map, so the page still answers the question. See The cookie bar.

Styling

A map element takes border, border radius and box shadow. Everything else about its size is decided by its container and the aspect ratio.

Common issues