@coredna/magna-plugin-google-places-autocomplete v1.1.1

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

Fields

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

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)
  }
})