Setting up Map View
This feature allows you to add an interactive map on your website and show multiple locations on a map alongside the classical catalog/list view.
In this help article, we will show how you can add and configure the map for your main page or details pages.
Before you start setting up your map on the website, we recommend that you copy the geographic coordinates of the places you want to show on your map and paste them into a dedicated column in your Google Sheets.
The coordinates are the key element in map setup so you will need at least one geo point to configure the look of your map.
Not sure how to find them? Check our short guide on getting the coordinates
Please note that if the cell doesn’t have coordinates, it will be automatically displayed as 0,0 point on the map.
To enable the map view, go to the Content tab in your website editor and switch on the Enable toggle:
Then map your Google Sheet column to the Coordinates (select the necessary column in Geo point menu dropdown):
Now we can see our map with the markers on the main page:
And we can switch between the List view and the Map view.
First, you can choose between two Map types to use: Google Maps or Open Street Maps.
If you want to use Google Maps, you need also to enable and configure Google Maps Add-on. One Street Maps add-on is built-in which means it doesn't require additional setup and it can be used right away.
If you have several places located close to each other, you can consider using Clusters.
This will allow you to group the markers to give your map a neat look.
You can also define the way your marker looks. You can choose between a pin or a dot, or use your own image.
To use your custom images, you need to upload them to an image hosting service, then copy and paste direct image links to a column in your Google Sheet (same way that you do with the listing/product images).
After that, map the column with image links to the Marker Image:
For better performance results, we recommend using images in PNG format that don’t exceed 60x60 pixels.
You can also define the size of your map on your website by changing its height (in pixels).
And you can set the default zoom level by entering a number from 1 to 19 (with 1 being the lowest level). This will define how much of the world map is visible when someone opens it.
You can add coordinates to define the Map center:
And set what your website visitors will see first: the map or the items list.
Either way, your visitors will be able to easily switch between the two modes.
In this help article, we will show how you can add and configure the map for your main page or details pages.
Prepare coordinates
Before you start setting up your map on the website, we recommend that you copy the geographic coordinates of the places you want to show on your map and paste them into a dedicated column in your Google Sheets.
The coordinates are the key element in map setup so you will need at least one geo point to configure the look of your map.
Not sure how to find them? Check our short guide on getting the coordinates
Please note that if the cell doesn’t have coordinates, it will be automatically displayed as 0,0 point on the map.
Setting up Map View
To enable the map view, go to the Content tab in your website editor and switch on the Enable toggle:
Then map your Google Sheet column to the Coordinates (select the necessary column in Geo point menu dropdown):
Now we can see our map with the markers on the main page:
And we can switch between the List view and the Map view.
Customize the look of your map
First, you can choose between two Map types to use: Google Maps or Open Street Maps.
If you want to use Google Maps, you need also to enable and configure Google Maps Add-on. One Street Maps add-on is built-in which means it doesn't require additional setup and it can be used right away.
If you have several places located close to each other, you can consider using Clusters.
This will allow you to group the markers to give your map a neat look.
You can also define the way your marker looks. You can choose between a pin or a dot, or use your own image.
To use your custom images, you need to upload them to an image hosting service, then copy and paste direct image links to a column in your Google Sheet (same way that you do with the listing/product images).
After that, map the column with image links to the Marker Image:
For better performance results, we recommend using images in PNG format that don’t exceed 60x60 pixels.
You can also define the size of your map on your website by changing its height (in pixels).
And you can set the default zoom level by entering a number from 1 to 19 (with 1 being the lowest level). This will define how much of the world map is visible when someone opens it.
You can add coordinates to define the Map center:
And set what your website visitors will see first: the map or the items list.
Either way, your visitors will be able to easily switch between the two modes.
Also, watch our video tutorial on setting up map view
Updated on: 23/07/2024
Thank you!