Skip to main content

​
Import

import { InputLocation } from '@adoptaunabuelo/react-components';

​
Usage

<InputLocation
  isLoaded={isGoogleMapsLoaded}
  placeholder="Introduce tu dirección"
  searchTypes={["address"]}
  searchFields={["geometry", "address_components"]}
  onLocationChange={(location) => {
    console.log(location.address);
    console.log(location.location); // { lat, lng }
  }}
/>

​
Props

​
isLoaded
boolean
required
Must be true when Google Maps API is loaded. Displays “Cargando…” placeholder and disables input until loaded.
​
onLocationChange
(result: LocationProps) => void
Callback with parsed location data when a place is selected. See LocationProps interface below for structure.
​
searchTypes
string[]
Google Places API search types. Default: ["address"]. Options include “address”, “geocode”, “establishment”, etc.
​
searchFields
string[]
Google Places API fields to fetch. Default: ["geometry", "address_components"]. See Google Places API documentation for available fields.
​
isForm
boolean
If true, only shows route + street number in input after selection (e.g., “Calle Mayor 5”). If false, shows full address.
Inherits all standard Input component props (placeholder, disabled, style, etc.) via InputProps.

​
LocationProps Interface

​
address
string
Full formatted address string (e.g., “Calle Mayor 5, 28013, Madrid, Madrid, España”).
​
sortAddress
string
Short address with city, province, and country (e.g., “Madrid, Madrid, España”).
​
route
string
Street name (e.g., “Calle Mayor”).
​
routeNumber
string
Street number (e.g., “5”).
​
city
string
City name from locality address component.
​
province
string
Province/state from administrative_area_level_2.
​
zipCode
string
Postal/ZIP code.
​
country
string
Full country name (e.g., “España”).
​
shortCountry
string
ISO country code (e.g., “ES”).
​
location
{ lat: number; lng: number }
Coordinates as Google Maps LatLngLiteral object.

​
Google Maps Setup

This component requires Google Maps JavaScript API to be loaded with the Places library.

​
Load the API

Add this script tag to your HTML: 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=es"></script>

​
Check if Loaded

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  if (typeof google !== 'undefined' && google.maps) {
    setIsLoaded(true);
  }
}, []);

<InputLocation
  isLoaded={isLoaded}
  // ...
/>

​
Features

  • Debounced search: 500ms delay using lodash.debounce
  • Spanish language: language: "es-ES" for API requests
  • Dropdown suggestions: Displays autocomplete predictions below input
  • Address parsing: Extracts street, city, province, postal code, etc.
  • Validation: Requires both route and zipCode, shows error if missing
  • Error handling: Spanish error messages for invalid addresses

​
Validation Behavior

The component validates that selected addresses have:
  1. Route (street name)
  2. Zip code (postal code)
If either is missing, displays error:
“Necesitamos una dirección más precisa para encontrar tu código postal. Por favor, indica el número de la calle.”

​
Examples

​
Basic Address Input

const [isLoaded, setIsLoaded] = useState(false);
const [address, setAddress] = useState<LocationProps | null>(null);

useEffect(() => {
  if (typeof google !== 'undefined') setIsLoaded(true);
}, []);

<InputLocation
  isLoaded={isLoaded}
  placeholder="Enter your address"
  onLocationChange={(location) => setAddress(location)}
/>

​
Form Mode (Short Display)

<InputLocation
  isLoaded={isLoaded}
  isForm
  placeholder="Street and number"
  onLocationChange={(location) => {
    // Input shows: "Calle Mayor 5"
    // But location object has full data
    console.log(location.address); // Full address
    console.log(location.zipCode); // "28013"
  }}
/>

​
Search Cities Only

<InputLocation
  isLoaded={isLoaded}
  searchTypes={["(cities)"]}
  placeholder="Enter city name"
  onLocationChange={(location) => {
    console.log(location.city);
    console.log(location.location); // City coordinates
  }}
/>

​
Complete Form Integration

const [formData, setFormData] = useState({
  street: '',
  streetNumber: '',
  city: '',
  zipCode: '',
  coordinates: null as { lat: number; lng: number } | null
});

<InputLocation
  isLoaded={isGoogleMapsLoaded}
  placeholder="Dirección completa"
  searchTypes={["address"]}
  onLocationChange={(location) => {
    setFormData({
      street: location.route || '',
      streetNumber: location.routeNumber || '',
      city: location.city || '',
      zipCode: location.zipCode || '',
      coordinates: location.location || null
    });
  }}
/>

​
With Default Value

<InputLocation
  isLoaded={isLoaded}
  defaultValue="Calle Mayor 5, Madrid"
  onLocationChange={(location) => setAddress(location)}
/>

​
Custom Search Fields

<InputLocation
  isLoaded={isLoaded}
  searchTypes={["address"]}
  searchFields={[
    "geometry",
    "address_components",
    "formatted_address",
    "place_id"
  ]}
  onLocationChange={(location) => {
    // Access all requested fields from the place object
    console.log(location);
  }}
/>
  • Position: Absolute, 64px from top
  • Shadow: 0px 4px 12px rgba(0, 0, 0, 0.08)
  • Border radius: 12px
  • Hover effect: Neutral soft background
  • Padding: 8px

​
API Limits

Google Maps Places API has usage limits and costs. Consider:
  • Per-session pricing: More cost-effective for autocomplete
  • Quota limits: Monitor usage in Google Cloud Console
  • Billing: Ensure billing is enabled for your API key

​
Troubleshooting

​
Input shows “Cargando…”

  • Ensure Google Maps API script is loaded
  • Check isLoaded prop is true
  • Verify API key is valid and billing is enabled

​
No suggestions appear

  • Check browser console for API errors
  • Verify Places library is included in the API script
  • Ensure API key has Places API enabled

​
Error: “Necesitamos una dirección más precisa…”

  • User must select a complete address with street number
  • Some places don’t have postal codes
  • Try selecting from dropdown instead of typing full address

Build docs developers (and LLMs) love

Get started for freeTalk to us