All Collections
Manage
Pages
Add a map into a page
Add a map into a page
Sharon Brakha avatar
Written by Sharon Brakha
Updated over a week ago

About

You can add a map to your platform directly from your back office using Google Maps.
It's very easy! Simply create your map from Google Maps and follow the steps below.

What it looks like

How to add a map block to a page

Step 1: Create the map on Google Maps

Follow the steps below to create your map:

  1. Create a new map

  2. Enter the desired city in the search bar

  3. Click "Add a marker" to add a point of interest, you can customize it by adding an icon and changing its color

      5. Save

Step 2: Manage the visibility of your map

In order to make your map visible to everyone, you need to change the visibility rule in public.

To do so, you need to click on Share and then Change to anyone with the link

🗺   Path from Google Maps: Your Google Maps > Share > Change to anyone with the link

Step 3: Integrate your map in your back office

You can now retrieve the URL of your map via Google Maps by clicking on "preview". From the editor of your Blackbell back office page, click "Add Block" and then in the "Other" category, select "Map".

Within this block, you will only need to paste the retrieved URL, as shown below:

You also have the possibility to adjust the zoom of your map. Simply change the end of your URL ending in z = X and choose the appropriate zoom.

ℹ️  A proper zoom is usually between 16 and 17. But you can adapt it depending on your map. 

How to link a point of interest to a page

A button in a map might be useful if you want to link a point of interest from your map to a page of your platform.

If you wish to add a button to a point on your map, please follow the steps below:

  1. Copy the following code into the desired point of your map: {{text: 'google_buttons.book', url: '/ page / 10491'}}

  2. Replace "Book" by one of the following words  

  • About

  • Book

  • Shop

  • Explore

  • See

  • Open

  • Visit

3. Retrieve the series of numbers at the end of the URL of the page you want to associate
4. Paste this series of numbers into the previously copied code just after "/ page /"
5. Save

Did this answer your question?