Location Input

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

string

default:"''"

The primary address or street name.

string

default:"''"

Additional address details (e.g., apartment, suite).

string

default:"''"

The name of the city.

string

default:"''"

The state or region.

string

default:"''"

The postal or ZIP code.

string

default:"''"

The country name or code.

string

default:"''"

The latitude coordinate.

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

object

default:"undefined"

The value bound to each input field.

number | string

default:"100"

The width of the component as a percentage.

string

default:"''"

CSS classes applied to the map container.

array | object

default:"[]"

List of states to populate the State dropdown.

object

default:"{}"

Defines the key-value structure for state options.

array | object

default:"[]"

List of countries to populate the Country dropdown.

object

default:"{}"

Defines the key-value structure for country options.

boolean

default:"false"

Toggles latitude/longitude fields and map integration.

string

default:"''"

Google Maps API key for map functionality.

array | object

default:"{zoom: 8, center: {...}}"

Google Maps configuration object (e.g., zoom level, center coordinates).

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

event

Triggered when a key is released in an input field.

event

Triggered when a dropdown or input value changes.

event

Triggered when an input field loses focus.

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.

Setup

Foundations

Inputs

Features

Dynamic Field Rendering

Google Maps Integration

Customizable Inputs

Validation Support

Debounced Input Events

Usage

Basic Example

Custom States Example

Data Structure

Properties

Props

Sates & Countries

Events

Methods

`loadCoordinates`

`clearCoordinates`

Slots

Google Maps

Implementation

Notes

​Features

Dynamic Field Rendering

Google Maps Integration

Customizable Inputs

Validation Support

Debounced Input Events

​Usage

​Basic Example

​Custom States Example

​Data Structure

​Properties

​Props

​Sates & Countries

​Events

​Methods

​loadCoordinates

​clearCoordinates

​Slots

​Google Maps

​Implementation

​Notes

Features

Usage

Basic Example

Custom States Example

Data Structure

Properties

Props

Sates & Countries

Events

Methods

`loadCoordinates`

`clearCoordinates`

Slots

Google Maps

Implementation

Notes