Awesome Table’s Maps app is easy to use and is very popular among our users. You can change the color of the markers or use an image as icons to personalize your maps.
2
What is the Maps app?
The Awesome Table Maps app lets you create maps using the Google Maps API. It does this using paired data values (latitude and longitude) to render markers on the map. The app automatically scales to include all markers. This visualization type can be used in:
- Education for geography-based lessons
- Economics or Statistics for censuses
Live example: Maps app with Color-markers - Employee Directory
Create a Maps app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Maps under Visualization type.
3. Click Update app to apply your changes.
Keywords specific to the Maps app
Below is a list of keywords specific to the Maps app.
To create the Maps app datasource, use the following keywords (in any order):
Maps app-specific keywords
| Column | Keyword | Description |
|---|---|---|
| 1 and 2 |
Designates the column containing latitude and longitude coordinates of the markers displayed on a map. |
|
| 3 |
Tooltip (Optional) |
Allows you to display a tooltip when the user clicks a marker. Can be used to display the value from a column or an HTML template. |
| 4 |
ColorType (Optional) |
Changes the color of your map's pins. |
| 5 |
MapsMarker (Optional) |
Customizes your markers with images or icons. |
Other keywords
You can also use these keywords with the Maps app.
| Keyword | Description | App type |
|---|---|---|
| Hidden | Hides a column in your data presentation. | Maps, Geochart, Gantt, Charts, Table, Cards, Org Chart |
| HyperlinkType | Adds links to text or image elements. It can be an alternative to using templates. This is useful if you want to generate links in your table without showing the full links (only text or images are shown). It also hides the URL column. | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| ButtonType | Displays a button that redirects to a link. You can also specify the color of your link (using HTML Color Names like red, blue, green or hex color codes) | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| ImageType | Displays images from a column containing links to images. This is an alternative to using templates. When users hover over the image, a larger version pops up. | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| IconType | Displays icons without using a template. Choose any icons from https://material.io/icons/ | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| RatingType | Transforms numbers from 0 to 5 to star-rating icons. | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| ListType | Transforms CSV values into HTML ordered lists. | Maps, Geochart, Gantt, Table, Cards, Org Chart |
| NumberedListType | Transforms CSV values into HTML numbered lists. | Maps, Geochart, Gantt, Table, Cards, Org Chart |
Settings in the Maps app
When you select Maps under Visualization type, Awesome Table displays the mandatory setting Maps height. We used 400 pixels in the live example.
Settings in the Maps app
Maps with Table app
Awesome Table also offers a Maps with Table app. The only difference between our Maps app and the Maps with Table app is the presence of a table.
Create a Maps with Table app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Maps with table under Visualization type.
3. Click Update app to apply your changes.
Settings in the Maps with Table app
In addition to Maps height, the setting # of items displayed is mandatory in the Maps with Table app. It specifies the number of rows to show in the table. Learn more about the setting # of items displayed.
Settings in the Maps with Table app
Live example of a Maps app with icon markers - Employee Directory
Comments
25 comments
Is there a way with Maps view to have the display markers/numbers pulling from a number in a cell rather than the amount of rows?
e.g - if I have a sales report and it shows 15 sales of a product in the UK and then a second row with 3 sales in the UK it will plot 2 on the map as it is 2 instances of UK rather than 18?
Cheers,
Alex
Hello Alex Ives,
This is not possible with Awesome Table.
Maybe the Geochart view type could be interesting for you: https://support.awesome-table.com/hc/en-us/articles/360002349980
Nicolas
Hey Nicolas,
Thanks for the reply, in Geochart am I able to have a chart view shown under the map view?
Many thanks,
Alex
Hello Alex Ives,
Unfortunately, there are no ways to have two different view types within one Awesome Table view.
Nicolas
Is it possible to change the color of the grouped icons symbol (blue) that shows when pins are close together in view or have the same coordinates?
Hello Neil,
It is not possible to change the color of the grouped markers.
Thank you for your understanding.
Thomas
Hi! Is it possible to merge a map + cards table? So, at the top you'd have a map and the cards at the bottom, but linked to the same filters?
Hello Francisca,
It is not possible to have a map and a card view in the same view. You can only merge a table and a map view.
However, you can propose this idea in our feature request platform.
Kind regards.
Thomas
Great, I just did that. Thanks for your response!
Hi - I have only got so far with the maps visualisation - the map and the markers are fine, but I can't get all my information to display when I click on a marker (I have 3 columns of information I want to display). Looking at some of the samples I can see that it's possible to show more than one column's worth on clicking the marker. Is there a special heading or something that's needed in the spreadsheet to achieve this?
Thanks for any hints!
Hello @Cecilia Peartree,
If you want to add more than 3 columns in your marker, it requires knowledge in HTML and CSS code because it is an advanced usage.
Indeed, you need to use a template to achieve that. You should consult this specific part of this article. If you need further information about the template sheet, I suggest you consult these articles.
Kind regards.
Thomas
Thanks Thomas, I will have a go at this.
Hi!
1- is it possible to add layers drawing data from different columns?
2- is it possible to have a polygon (area) instead of a point (single coordinate) representation? Example, if I input an address as simply "California" can the entire state of California be highlighted? If yes, is the area customisable?
thanks!
Hi @Pier.
Items 1 & 2 are currently not supported. You can create a Feature Request with the functionalities you mentioned.
- Randy
Hi all,
could you please tell me how can we add a title to the map just above the map?
Thanks for your help.
Fadila
Hi @Fadila.
That can be achieved by using our header template.
- Randy
Hi Randy,
I tried already but when I am adding a code to change the shape of the table below the map it didn't work anymore.
Thanks.
Fadila
Hi,
I have a list of addresses (http://prntscr.com/r1ljdd),
When a user open my website, I want to show only Nearby addresses which are inside a 10 km radius of that user's location.
Can I do this using Awesome Table?
(I know it is possible with normal Google Map API.)
Similar Example: http://prntscr.com/qzdqz4 https://www.freemaptools.com/find-indian-pincodes-inside-radius.htm
(They are doing with pin codes, and I also want to do this using pin codes but If is possible with Lat/Long that also fine for me..)
Thanks.
Hi Om Choudhary,
It is not possible with Awesome Table yet, I am afraid.
Sorry to be the bearer of bad news.
Hi all,
It is possible to view the current location of the one entering.
It is possible with Awesome to make the option of "how to get" (option google maps)
Many thanks,
Kris
Hi Kris,
In order to fully understand your request, I just created a ticket
Thanks
Hi everyone!
How I can get the Google Maps Maps Javascript instance in my JavaScript template?
Thanks Rémi Le Masson, I await the response of the created ticket.
I am using maps view to create a people directory that locates each graduate in our middle school.
In the pop-out, there appears the following:
I've been trying "everything" to increase the width of the pop-out so that everything - including the audio play box appears (not like the image, below).
Is it possible to increase the width?
Thanks very much,
Brian
Alternatively, how might I put the audio player below the images?
Thank you, once again.
Brian
Please sign in to leave a comment.