Maps

The below guide shows you how to integrate Google Maps into your app

In-Depth Guide

1) Setup your Google API Key

Follow the steps Google has outlined here to get your Google Maps API Key: https://developers.google.com/maps/documentation/javascript/get-api-key

Then, copy your Google API Key and paste it into left panel in Adalo for your Map Component

2) Ensure that your Google Account has the Google Geocoding API, Google Maps Javascript API, the Places API, and the Maps SDK for iOS enabled

1. Go to https://console.cloud.google.com/apis/library/maps-backend.googleapis.com and click the Enable button

2. Go to https://console.cloud.google.com/apis/library/geocoding-backend.googleapis.com and click the Enable button

3. Go to https://console.cloud.google.com/apis/library/maps-ios-backend.googleapis.com and click the Enable button

4. Go to https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com and click the Enable button

5. Go to https://console.cloud.google.com/apis/library/places-backend.googleapis.com and click the Enable button

6. Go to https://console.cloud.google.com/billing/linkedaccount and click Link Billing account. Your Google account includes $300 credit for a free trial of its API, and will not start billing your card without your consent, but Google does require that you have a credit card on file in order to access the free trial of its API.

3) Select the number of Markers and, for multiple markers, configure the settings

1. Select if your map will display a single marker or multiple markers. If you select Mutiple Markers...

2. Select which Collection to list the markers for.

3. Optionally choose to filter which records in that collection to display markers for.

4. You can also set a max number of items as well as sorting. For example, you can choose to only display markers for the top 10 records, sorted a-z.

4) Set the Address and Actions for the Marker(s)

1. Next, expand the Markers section of the left panel.

2. Set the address for each marker using magic text. You can do this with one or multiple magic text properties. Note, you won't see the actual markers with the correct addresses in the Builder, but you will see them when you preview, share, or publish your app.

3. You can change the style of your markers by clicking on the "Markers" option and changing the Marker source from Default to Custom. Then in the "Marker image" you will be able to submit an Image, select it from your Collections or add an URL. You can also add an image in case there isn't an image found for the marker.

4. Optionally add any actions to your markers. For example, clicking on a marker could link to a new screen with details about that record, or could open a bottom sheet with more information.

5) Customize your Map Style

Choose the Map Style option of either Roadmap, Hybrid, Satellite, or Terrain

Roadmap

Hybrid

Satellite

Terrain

Customizing Maps with with JSON

Want even more control over the style of your map? No problem. You can add custom JSON to further customize your map. Not sure about writing your own JSON code? Not to worry! You can use the Google Maps Styling Wizard to make your own map style. The Wizard will automatically generate the JSON for you that you can copy and paste into Adalo.

1) Go to https://mapstyle.withgoogle.com/

2) Click Create a Style

3) Make your style customizations

4) Click Finish

5) Click Copy JSON

6) Paste your JSON in Adalo

7) Preview your app to see the custom styles! Note: You won't see the custom styles in the Builder, but you will see them in the app's preview, share link, and of course, the published app.

Troubleshooting Maps

• If you have issues with your Map not loading until a screen re-renders, please check the endpoints to ensure they are set up properly. This is usually caused by an incomplete or missing setup fir the GET endpoint.

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!