Skip to main content
The InputLocation.vue component is a Vue.js Composition API-based component that integrates Google Maps functionality. It is designed for capturing and interacting with location data, including countries, states, cities, and geographic coordinates.

​
Features

Dynamic Field Rendering

Conditionally display fields based on provided props (e.g., countries, states, coordinates).

Google Maps Integration

Includes a map view and coordinate management.

Customizable Inputs

Supports v-model binding and dynamic event handling.

Validation Support

Displays errors for each input field.

Debounced Input Events

Reduces unnecessary updates for text inputs.

​
Usage

​
Basic Example

import { InputLocation } from '@robojuice/velure-ui';

<InputLocation
  @keyup="locationFieldType"
  @change="locationFieldChange"
  v-model="locationField"
  coordinates
  :countries="['USA']"
  :statesShape="{value: 'abbreviation', text: 'name'}"
  :states="states"
/>

​
Custom States Example

<InputLocation
  @keyup="locationFieldType"
  @change="locationFieldChange"
  v-model="locationField"
  :states="['CA', 'NY', 'FL']"
/>
The locationField model is a reactive object in Vue.js designed to represent and manage the state of location data. It includes fields for address details, geographic coordinates, and other related information.

​
Data Structure

The locationField model for the v-model consists of the following properties:

​
Properties

​
address1
string
default:"''"
The primary address or street name.
​
address2
string
default:"''"
Additional address details (e.g., apartment, suite).
​
city
string
default:"''"
The name of the city.
​
state
string
default:"''"
The state or region.
​
zip
string
default:"''"
The postal or ZIP code.
​
country
string
default:"''"
The country name or code.
​
lat
string
default:"''"
The latitude coordinate.
​
lng
string
default:"''"
The longitude coordinate.
To create and use the locationField model in your Vue.js component, import and initialize it as follows: 
<script setup>
import { reactive } from 'vue';

const locationField = reactive({
  address1: '',
  address2: '',
  city: '',
  state: '',
  zip: '',
  country: '',
  lat: '',
  lng: '',
});
</script>

​
Props

​
v-model
object
default:"undefined"
The value bound to each input field.
​
width
number | string
default:"100"
The width of the component as a percentage.
​
mapClasses
string
default:"''"
CSS classes applied to the map container.
​
states
array | object
default:"[]"
List of states to populate the State dropdown.
​
statesShape
object
default:"{}"
Defines the key-value structure for state options.
​
countries
array | object
default:"[]"
List of countries to populate the Country dropdown.
​
countriesShape
object
default:"{}"
Defines the key-value structure for country options.
​
coordinates
boolean
default:"false"
Toggles latitude/longitude fields and map integration.
​
api
string
default:"''"
Google Maps API key for map functionality.
​
map
array | object
default:"{zoom: 8, center: {...}}"
Google Maps configuration object (e.g., zoom level, center coordinates).
​
errors
array
default:"[]"
Array of error messages for specific fields.

​
Sates & Countries

For the prop statesShape and countriesShape, the configuration looks like this: {value: 'abbreviation', text: 'name' }. And the data for the states or countries prop looks like this: 
const states = [
  { name: 'Alabama', abbreviation: 'AL'},
  { name: 'Alaska', abbreviation: 'AK'},
  { name: 'American Samoa', abbreviation: 'AS'}
]

const countries = [
  { name: 'United Stats', abbreviation: 'USA'}
]
Within the component: 
<InputLocation
  :countries="countries"
  :statesShape="{value: 'abbreviation', text: 'name'}"
  :countriesShape="{value: 'abbreviation', text: 'name'}"
  :states="states"
/>
If you want to keep it simple, you can use an array of values and the shape props will not be required: 
let states = ['AL','AK','AS'];
let countries = ['USA'];
Within the component: 
<InputLocation
  :countries="countries"
  :states="states"
/>

​
Events

​
keyup
event
Triggered when a key is released in an input field.
​
change
event
Triggered when a dropdown or input value changes.
​
blur
event
Triggered when an input field loses focus.
​
enter
event
Triggered when the Enter key is pressed in an input field.

​
Methods

​
loadCoordinates

Loads the geographic coordinates (latitude/longitude) into the form fields.

​
clearCoordinates

Clears the geographic coordinates from the form fields.

​
Slots

This component does not use slots.

​
Google Maps

Create or Access a Google Cloud Project
  • Go to the Google Cloud Console.
  • Sign in with your Google account.
  • Create a new project or select an existing one.
A map ID is an identifier that’s associated with a specific map style or feature. Configure a map style and associate it with a map ID in the Google Cloud Console. Then, when you reference a map ID in your code. Google documentation for using “Map IDs”

​
Implementation

The map prop should match the Google MapOptions, see the docs here Google docs for MapOptions. 
const api_map_id = 'your_api_map_id_here';  // ADD MAP ID here from Google cloud console
const api_key = 'your_api_key_here';
const map_options = {
  zoom: 8, // 16 best
  center: {lat: 39.8283, lng: -98.5795},
  scrollwheel: false,
  disableDefaultUI: false,
  mapId: api_map_id
}
You need coordinates on the component for Google Maps to get enabled.
<InputLocation
  coordinates
  :map="map_options"
  :key="api_key"
/>

​
Notes

  • Google Maps JavaScript API integration requires an API key (api prop).
  • Fields such as Country, State, and Coordinates are rendered conditionally based on the provided props.