Magna Plugin: GooglePlacesAutocomplete

This plugin will add the functionality for a google places autocomplete to be added to your page.

You do not need to include the google places script in your page as this code will handle loading the api when only the API_KEY is specified

By default you provide it with the fields, their type and their matching selector in your page and it will fill in the details with what is returned from the google api request.

import Magna from '@coredna/magna'
import GooglePlacesAutocomplete from '@coredna/magna-plugin-google-places-autocomplete'

const app = new Magna([
  new GooglePlacesAutocomplete({
    selector: '#my-selector',
    fields: GooglePlacesAutocomplete.defaultFields,
    API_KEY: 'AIzaSyA....',
  })
]).start()

Install

Install through either npm or yarn

npm install @coredna/magna-plugin-google-places-autocomplete

or

yarn add @coredna/magna-plugin-google-places-autocomplete

Config

| property | type | default | required | Description | |--- |--- |--- |--- |--- | | API_KEY | string | null | true | Google places API KEY | country | string | 'US' | false | Country code, can specify multiple with comma separation 'US,AU' | | fields | object | {} | false | Object of fields containing key, selector and type see Fields | onPlaceChanged | Function | null | false | Run a callback when the address has been retrieved from google, cancel default actions by returning false Extend default fields |

Fields

You can set your own fields you can use any of:

| property | type | default | required | Description | |--- |--- |--- |--- |--- | | address | object | { selector: '[name="address1"]', type: 'long_name' } | false | Street address eg. '348 High Street' | | unit | object | { selector: '[name="address2"]', type: 'long_name' } | false | Unit number "address_line2" eg. 'Unit 1' | | city | object | { selector: '[name="city"]', type: 'long_name' } | false | Nearest city (suburb) eg. 'Windsor' | | postcode | object | { selector: '[name="postcode"]', type: 'long_name' } | false | Postal code (Zip code) eg. '3182' | | state | object | { selector: '[name="state"]', type: 'long_name' } | false | State eg. 'VIC' 'Victoria' | | country | object | { selector: '[name="countryid"]', type: 'long_name' } | false | Country eg. 'AU' 'Australia'|

| type | description | |--- |--- | | long_name | Long version of the value eg. 'Victoria' | | short_name | Short version of the value eg. 'VIC' |

const fields = {
  ['address|unit|postcode|city|state|country']: {
    selector: '[name="my_field_name"]',
    type: 'long_name|short_name'
  }
}

Default field objects

To help save time GooglePlacesAutocomplete has a static property defaultFields with useful defaults you should be able to use in your code immediately, but you cant still extend or modify

GooglePlacesAutocomplete.defaultFields = {
 country: {
   selector: '[name=countryid]',
   type: 'short_name'
 },
 unit: {
   selector: '[name=address2]',
   type: 'long_name'
 },
 address: {
   selector: '[name=address1]',
   type: 'long_name'
 },
 postcode: {
   selector: '[name=postcode]',
   type: 'short_name'
 },
 city: {
   selector: '[name=city]',
   type: 'long_name'
 },
 state: {
   selector: '[name=state]',
   type: 'short_name'
 }
}

If you need to update the fields to have a prefix you can do so using the static method GooglePlacesAutocomplet.prefixDefaultFields(prefix)

const userPrefixedFields = GooglePlacesAutocomplete.prefixDefaultFields('user_') // => { address: { selector: '[name=user_address1]'} ...}

Extend default fields

Using ES6 you can select specific entries, and extend or create your own

// extract individual default fields
const { address, country } = GooglePlacesAutocomplete.defaultFields
new GooglePlacesAutocomplete({
  selector: '#my-selector',
  API_KEY: 'AIzaSyA....',
  fields: {
    address,
    country: { ...country, selector: '#my-custom-selector' },
    city: { selector: '#my-custom-selector', type: 'long_name' },
  },
})

Events

You are able to hook into the google places api event onPlaceChange, and assigning the formatted values to your site using updateFields

const { address, country } = GooglePlacesAutocomplete.defaultFields
new GooglePlacesAutocomplete({
  onPlaceChange({ 
    place, 
    addressComponentObject, 
    address, 
    fields 
  }) {
    // do something with the place object
    return false // if you return false it will cancel the default behaviour
  },
  updateFields(fields) {
    console.log(fields)
  }
})