Maps

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. Go to the Google Maps Platform > Credentials page
3. On the Credentials page, click "Create credentials > API key"

4. Copy the newly created API key

5. 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 yourdomain.noloco.co

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'

How do I enable Autocomplete for Google Maps?

The address component in Noloco gives you the option to use an Autocomplete address field. In order to use this functionality you will need to add the Places API to your Google API key

In the "Overview" section of the Google Maps Platform there are a variery of configuration options. In the screenshot below we've highlighted one way that you can set up autocomplete

The Places API is an additional API that you can use to enable autocomplete when typing in an address. By clicking on the card you can add access to your Maps API key

Please use the "Places API" and not the "Places API (New)