The Map element shows visitors where you are, with a pin on an interactive Google map.
Adding a map
- 1In the editor, open Add Elements and choose Map from the Basic group.
- 2On the Content tab, fill in Location / business name and Address.
- 3Click Find location. This is the important step: it looks up the exact coordinates for your address and moves the pin. Typing an address on its own does not move the pin.
- 4If the pin needs nudging, type exact figures into Coordinates override. Clear those boxes to go back to the looked-up position.
Showing more than one location
Click Add location to add another. With two or more, the map automatically zooms and positions itself so every pin is visible.
Note that the information card, the directions form and the 'View on Google Maps' link are all single-location features, so they disappear when you add a second location.
Your Google Maps API key
Maps are powered by Google, and Google requires a key. Limecube includes a shared key so your map works straight away while you build.
Before you go live you'll need your own key, as Google's shared-key limits are quickly reached on a real site. Enter it under Settings in the map panel and click Save API key. This is set once for your whole site, so every map uses it.
To create one, go to the Google Cloud console (console.cloud.google.com) and follow these steps:
- 1Create a project, or select an existing one.
- 2Go to APIs & Services › Library and enable: Maps JavaScript API (required, this draws the map), Places API (New) (only needed if you want star ratings), and Directions API (only needed if you switch on the directions form).
- 3Attach a billing account to the project. Google won't serve maps without one.
- 4Go to APIs & Services › Credentials, create an API key, and copy it.
- 5Restrict the key to your own website: set Application restrictions to Websites and add your domain (for example
https://yourdomain.com/*). - 6Under API restrictions on that same key, choose Restrict key and tick each of the APIs you enabled in step 2.
- 7Paste the key into your map's Settings tab and click Save API key.
Important: when your site moves to your own live domain, the shared Limecube key is removed automatically. If your map suddenly shows a grey Google error page after going live, this is why: add your own key to fix it.
Settings
Marker & overlay
- Custom Marker: replace the standard red pin with your own image, used for every pin
- Overlay filter: Original, Grayscale, Minimal light, Minimal dark or Neutral blue
Display
Switch on only what you need:
- Reviews Snippet: an information card on the map with your business name, address, your Google star rating, a link to Google Maps and a directions link
- Show Street View, Show Controls, Show Labels, Show Terrain, Show Satellite
- Show Directions: adds a form under the map where visitors enter their starting point and get driving directions
- View on Google Maps: a link that opens your location in Google Maps
Dimensions
- Map Width (%), and Map Height (px): set separately for desktop and mobile using the switcher at the top of the panel
Showing your Google star rating
Your Google review score can appear right on the map, next to your business name, a strong trust signal for new visitors. It reads live from your Google Business Profile, so it stays current on its own as new reviews come in.
To switch it on
- 1Make sure your business has a Google Business Profile with public reviews.
- 2In the Google Cloud console, enable Places API (New) on the project behind your API key (see the steps above), and make sure it's ticked under that key's API restrictions.
- 3In your map's Settings tab, switch on Reviews Snippet.
- 4View your published page: the rating and stars appear on the card.
If the card shows but the stars don't, it's almost always one of these:
- Places API (New) isn't enabled on your Google Cloud project
- It's enabled, but not ticked in your API key's restrictions. This is the most common cause, because the map itself keeps working, so nothing looks broken.
- Your business has no public Google reviews yet
- Your business name and address in the map don't closely match your Google Business Profile. Try matching them exactly as Google lists them.
The map itself always keeps working, with or without a rating.
Note on cost: looking up a rating is a billable Google request, charged to your own Google account. One lookup happens each time someone loads a page with the Reviews Snippet switched on. For most sites this sits inside Google's free monthly allowance, but if you have very high traffic, keep an eye on your Google Cloud billing, or leave the Reviews Snippet off.
Tips
- Always click Find location after changing an address. The address text and the pin are stored separately, so they can disagree if you skip it.
- Keep custom pin images small, around 40 to 60 pixels. The image is used at its full size, so a large file makes an enormous pin.
- Check your map on the published page after changing your API key. The editor uses Limecube's key, so a map can look fine while you're building and fail once live.
- There's no zoom setting: a single location uses a close street-level zoom, and multiple locations fit automatically.
- The pin's popup shows your location name and address only.
Was this helpful?
Last updated:
Related Articles
Settings Page
Explore every option on the Limecube Settings page, forms, APIs, social, GDPR, security, and miscellaneous configuration.
6 min read
Google Reviews (GBP) Widget
Connect your Google Business Profile reviews to a Limecube widget by setting up a Google Cloud project, Apps Script proxy, and OAuth credentials.
12 min read
Elements & Plugins
Every drag-and-drop element in Limecube, grouped as you'll find them in the Add Elements panel: Basic, Advanced Content, Box Layouts, Gallery and Blog.
5 min read
Still need help?
Submit a Support Ticket