# Maps {% embed url="" %} If you have location-based data, you might want to use Noloco's map view display option to easily show the location of different records on a map. In this video, learn how to: * Add the map view 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 {% hint style="info" %} You must add a Google Maps API key via your app settings to use the Map view {% endhint %} #### **Added support for different Map Types** You can now choose whether you would like to view your map as Satellite, Terrain, or Roadmap ### 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. {% hint style="info" %} Latitude and Longitude numbers are in decimal degrees format and range from -90 to 90 for **latitude** and -180 to 180 for **longitude**. {% endhint %} **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 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](https://developers.google.com/maps/billing-and-pricing/billing#monthly-credit). 1. Create a [Google Cloud Platform account](https://console.cloud.google.com/) (for free) 2. Go to the [Google Maps Platform > Credentials](https://console.cloud.google.com/project/_/google/maps-apis/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. You will need to specify the URL of the page this would be used on. So if you are working on a page called "Properties," you will need to enter the domain as *yourdomain.noloco.co/properties*. The forward slash will always be the URL path of the page under `General > Navigation.` Learn more about [restricting Google Maps API keys](https://developers.google.com/maps/documentation/embed/get-api-key#restrict_key). {% hint style="info" %} Note that your default Noloco app domain will be of the format *yourdomain.noloco.co.* {% endhint %} ### 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](https://console.cloud.google.com/google/maps-apis/home) there are a variety 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 {% hint style="warning" %} Please use the "Places API" and *not* the "Places API (New) {% endhint %}
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://guides.noloco.io/views/display/maps.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.