gannett-peak-address

Installation

npm install --save @gannettpeak/gannett-peak-address

Import

You MUST put the following in your index.html file to use the component, as this registers the global google instance:

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR API KEY}&libraries=places"></script>

After installing into root folder of project, you can register it in main.js or another entry point like so:

import '@gannettpeak/gannett-peak-address'

You can now access the component as <Address :options /> from anywhere in the project

Usage

After import, the component can be used as below, with more options available:

<Address id="*#" :disableMap = "false" v-bind:addressProp.sync = "parentAddress"></Address>

Everytime the data is changed it will emit an update to the parent component Every instance of the component must have a unique numeric ID in order to not interfere with each other

<template>
...
        <Address id="1" :disableMap = "true" :disableAddress = "false" :passedAddress = "parentPlaceDTO" v-bind:addressProp.sync="addresses.firstAdd"/>
        <Address id="2" :disableMap = "false" :disableAddress = "false" :requireAddress="true" stateRestriction="Wyoming" v-bind:addressProp.sync="addresses.secondAdd"/>
      <div v-if="addresses">
          <td>{{this.addresses}}</td>
      </div>
...
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
        addresses: {
            firstAdd: {},
            secondAdd: {}
        },
    }
}
</script>

Props

(required) int id - must be unique for each instance of component that you use
(required) Object - v-bind:addressProp.sync="YOUR OBJECT HERE" so that your object will be updated in the parent component on submit
boolean disableMap - toggle map on or off
boolean disableAddress - toggle address form on or off
boolean requireAddress - requires that the Address 1 field has a value
boolean requireLatLong - requires both coordinate fields to have a value
string useCurrentLocation - 'enable', 'disable', or 'mobileOnly'. default mobileOnly. pass without colons (string literal)
string stateRestriction - disables state selection and completes the selection for you. Must pass full name of state (i.e. Wyoming, New York, etc.)

object passedAddress - pass in a DTO matching the format, to default the component. Note that the *Obj objects don't appear in the form, only what's shown below is necessary for the form

parentPlaceDTO:{
    place: '',
    lat: '',
    lng: '',
    streetNumberObj:'',
    streetNameObj: '',
    cityObj: '',
    countyObj:'',
    stateObj:'',
    countryObj: '',
    zipObj: '',
    zipSuffixObj: '',
    formAddress: '123',
    formAddress2: 'Fake St',
    city:'Cheyenne',
    state: 'Wyoming',
    zip:'80000',
    country:'USA Baby',
},

Returns: If marker, location, or manual lat/long are entered, returns:

LatLng:{lat: latitude, lng: longitude}

If address form is used, returns placeDTO as such:

placeDTO:{
    place: '',
    lat: '',
    lon: '',
    streetNumberObj:'',
    streetNameObj: '',
    cityObj: '',
    countyObj:'',
    stateObj:'',
    countryObj: '',
    zipObj: '',
    zipSuffixObj: '',
    formAddress: '',
    formAddress2: '',
    city:'',
    state:'',
    zip:'',
    country:'',
},          

History

0.1.0 Initial test publish
0.1.1 Scrubbing API keys
0.1.2 Updated documentation
0.1.3 Minor tweaks
0.1.4 Removed unnecessary dependencies
0.1.5 switched to Gannett org, updated docs
0.2.0 Passing props now get updated
0.3.0 Multiple instances now work together
0.3.1 Documentation fix
0.3.2 Demo
0.4.0 Fixed many problems, including the import
0.4.1 Documentation formatting
0.5.0 persistent updates, no longer need submit button
0.5.1-0.5.2 Documentation fixes again
0.5.3 fixed infowindow problem
0.6.0 Validation Props
0.7.0 Can pass in a DTO prop
0.7.2 doc fixes
0.7.5 Bug fixes
0.7.6 ID doesn't require colon or not
0.8.0 Fixed stateRestriction being a required prop
0.8.1 Added prop to disable lat long fields
0.8.2 Chagnged order of operations for passedAddress
0.9.0 Major fix to allow passedAddress to be passed empty and updated
0.9.1 Fixed a prop problem related to defaults
0.9.2 Allow reverse geocoding to get county only
0.9.3 Mobile detection for use current location
0.10.3 Prop to allow enable, disable, or mobileOnly for Use Current Location
0.10.4 Explicityl declared vuetify version