Woman with smartphone glancing at a paper map.
Photo by Anna Pascale on Unsplash

Gmaps-React Component for address input and area selection

In strong collaboration with Albert Sarmiento, at TelaClaims, we have developed a highly customized component using the react-google-maps based on Gmaps APIs for places and geocoding.

Using the street address input mode

Street Area Mode

Street area mode is designed to replace all address input components in our application. It counts with features such as:

  • Google Autocomplete focused on ROOFTOP addresses. (An address 2 field should be provided to deal with additional information such as apartments)
  • Google Autocomplete address beautification on second enter after input.
  • Using browser’s navigator to ask for current location, in case location request is denied, Kendall, FL, our hometown, is defaulted.
  • Dragging and dropping the marker will set the selected address on the input.
Using the area mode

Area Selection Mode

Area mode is designed to operate in two variants. The first one is boundary free and should be used by the users that define areas (we call them vendors) to enable others to select within a fitted rectangle of a specific area. The second one counts with the possibility that area bounds have been previously set and will only allow the selection of an area within the provided boundaries. Amongst its features and behavior we can find:

  • Areas are preset by vendors and appear ready to select whenever a relation comes preset from backend between the user and a vendor.
  • The option of “Add a new area…” appears for both variants and while vendors do not have any bounds, regular users will see an unclickable cluster of translucent green areas which its vertices are undraggable symbolizing the ones given by the vendors, forcing them to add areas only within limits.
Boundaries provided by vendors
  • The browser will request location permission on opening the map and on clicking “Add a new area…”
  • A skeleton has been configured to reduce load-time frustration between dialog and Google API response.
  • While selecting an area center for adding a new service area, you can do so by using the input field or by dragging and dropping the marker. On drag and drop, the marker will set the options, displayed as chips, to select an area enclosing the current marker position in levels increasing in area expansion, such as: administrative_area_1, administrative_area_2 and sublocality_level_1.
Chip Area Selection
  • A fab button allows for editing the address selected after the options appear, and another fab allows for cancelling the operation to go back to the area selection list.
  • In order to remove or edit the areas added the current users (editable areas) a right click on the vertex will remove it, any vertex removed after the polygon is a triangle will take out the whole polygon. In order to increase the precision of the polygon area. A mid point in every side allows to drag a new added point to the polygon.




I am a software developer with many many hobbies. Perhaps coding is another one :)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andy Gonzalez

Andy Gonzalez

I am a software developer with many many hobbies. Perhaps coding is another one :)

More from Medium

Reflect + Present

FW22 Jonathan Simkhai: My fav three!

Moscow-Russia 🪆

To Feel, To See, To Search in “Winter in Sokcho”