Maps
The below guide shows you how to integrate Google Maps into your app
Last updated
The below guide shows you how to integrate Google Maps into your app
Last updated
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
Go to https://console.cloud.google.com/apis/library/maps-backend.googleapis.com and click the Enable button
Go to https://console.cloud.google.com/apis/library/geocoding-backend.googleapis.com and click the Enable button
Go to https://console.cloud.google.com/apis/library/maps-ios-backend.googleapis.com and click the Enable button
Go to https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com and click the Enable button
Go to https://console.cloud.google.com/apis/library/places-backend.googleapis.com and click the Enable button
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.
Select if your map will display a single marker or multiple markers. If you select Mutiple Markers...
Select which Collection to list the markers for.
Optionally choose to filter which records in that collection to display markers for.
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.
Next, expand the Markers section of the left panel.
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.
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.
Choose the Map Style option of either Roadmap, Hybrid, Satellite, or Terrain
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.
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.
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!
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.
