Learn how to add the map view collection display to show location data.

If you have location-based data, you might want to use Noloco's map view collection display option to easily show the location of different records on a map.

In this video, learn how to:

  • Add the map view collection display in your Noloco app

  • Add your Google Maps API key in app settings

  • Configure your Map view with latitude and longitude fields

  • Find a location's latitude and longitude in Google Maps

  • Configure what fields show in the map sidebar list

You must add a Google Maps API key via your app settings to use the Map view

What data type should I choose for my latitude and longitude fields?

To ensure the Map view will work correctly, make sure to store your latitude and longitude values in a decimal field type.

A latitude field must contain 2 digits followed by .000000 (6) decimal points precision and a longitude field must contain 2-3 digits followed by .000000 (6) decimal points precision.

Latitude and Longitude numbers are in decimal degrees format and range from -90 to 90 for latitude and -180 to 180 for longitude.

For example:

  • A Latitude field might look like: 37.809971

  • A Longitude field might look like: -122.296508

How do I get a Google Maps API key?

To use the map collection layout you must first add a Google Maps API Key. This is free, and your usage will likely fall under the Google Maps free tier. Learn more about Google Maps platform billing.

  1. Create a Google Cloud Platform account (for free)

  2. On the Credentials page, click "Create credentials > API key"

  3. Copy the newly created API key

  4. Optionally, restrict your API key by specifying your Noloco app domain as an allowed referrer. Learn more about restricting Google Maps API keys.

Note that your default Noloco app domain will be of the format

How do I add my Google Maps API key to my Noloco app?

  1. Copy the newly created API key from the page above

  2. Go to the Settings > Integrations & API keys menu

  3. Click to edit your Google Maps API key

  4. Enter your API key and click 'Save'

Last updated