Mobile apps used for ridesharing, takeout deliveries, and real estate need to offer users the ability to select an address. Making that app intuitive and user-friendly is no easy feat, but the geniuses behind the Uber app accomplished it, Kudos to them. So, let’s look at how to do something similar with OutSystems.

The Requirements

The selector should be able to pinpoint a current location on a map and allow someone to adjust it by hand. Not only should it produce the exact coordinates, but it should also to translate them into a street address that people can read. In addition, users should be able to type the address directly into the field, and the map should center on that location.

The Widgets

In the OutSystems Forge, you can find all the components necessary for this implementation:

You will also use the Google Geocode API to handle the translation of coordinates into an address. Let's assemble the puzzle.

The Map Selector

We start by creating a method that outputs the current location in the form of a map marker with latitude and longitude.

Getting the geolocation from a browser is straightforward; check out the example in the Forge.

OutSystems can directly consume the Google geolocation API also.

The next step is to create another method to translate a geolocation into an address using the Google API.

For the UI, we are going to use several components:

  • A Google map
  • A marker that represents the current location
  • An icon in the center of the map that enables users to pinpoint the desired location
  • A reset icon that enables a selection reset
  • A confirm button to pass the selected address and location to your app

Finger sizes vary wildly, so rather than trying to make the exact location something to tap, you want to make it easy to drag the map to the exact location instead. You must add a listener to the map object after the map is initialized.

var map = osGoogleMap.getMap($parameters.MapID);

google.maps.event.addListener(map.gMap,'dragend', function() {

    window.setTimeout(function() {

        $actions.MapCenterChange($parameters.MapID
                                ,map.gMap.getCenter().lat()
                                ,map.gMap.getCenter().lng()
                                );
        }, 5);
  });

Every time the map center changes, it fires the MapCenterChange method, updating the selected location and address.

Users can reset the position, setting the center of the map at its current GPS location and obviously confirming the selection, which fires an event that passes the address and the geolocation to the consumer of this web block.

The Address Selector

The other requirement is that users must be able to type in an address. Google Geo API provides this service. For this, you combine the Place Query API to search the address with the Geocode for location. In essence, as you type, you get a list of options from the Place Query, and when you select one, the Geolocation API returns the coordinates.

See it in action

Here is a short video of this component:

Or, try the address selector on your phone right now. Navigate to now.outsystems.com, download the OutSystems Now app and point it to this QR Code:

Check out the Forge component and go build those apps!