Add Google Maps to your Adalo app with these five steps:
-
Set Number of Makers
-
Set Market Address
-
Customize Map Style
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, and the Maps SDK for iOS enabled
-
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/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
-
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.
4) Set the Address and Actions for the Marker(s)
-
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 editor, 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.
5) Customize your Map Style
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 editor, but you will see them in the app's preview, share link, and of course the published app.
updated 4/22/2020