Adress of the users

Get Help
1

Hello to everyone!
Now making an app based on Chat template.
How can I let users post their adress in the profile? And then let other users see adress using Map component?
Idea is to find someone to chat nearby.

2

Hi @Nikita, hope you’re doing well.
I’m Firoz.
Please follow the steps:

  1. Go to the database.
    In the Users collection, add a new property as a text property.
    You can name it Address.
  2. Now, go to the component marketplace and install the Map component and click Done (if you already have it installed, skip this step).
  3. Drag the Map component to the screen where a user can view another user’s profile.
  4. 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 the left panel in Adalo for your Map Component

  1. Ensure that your Google Account has the Google Geocoding API, Google Maps Javascript API, and the Maps SDK for iOS enabled:

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

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

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

  5. Go to https://console.cloud.google.com/apis/library/maps-android-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.

  7. Select the number of Markers and, for multiple markers, configure the settings:

  8. Select if your map will display a single marker or multiple markers. If you select Multiple Markers…

  9. Select which Collection to list the markers for.

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

  11. 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.

  12. Set the marker address to be the address of the current user.

  13. 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.

Hope it helps!

1 Like
3

@firozkhan.06
Thats it! Thanks a lot!

1 Like
4

Glad I helped! :+1: :slightly_smiling_face:

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.