abdj / autoform-google-places-input Goto Github PK

8.0 3.0 7.0 19 KB

Quick geocomplete input field setup with an export to a customizable address SimpleSchema

JavaScript 97.91% HTML 2.09%

autoform-google-places-input's Introduction

Autoform Google Places Input

Enable a google autocomplete input field into your autoform form, defining a mapper between the google api response and your schema.

⚠️ NOT MAINTAINED

Please note: This project is not maintained anymore.

Installation

meteor add abdj:autoform-google-places-input

Demo Application

A demo for this plugin is available here: http://google-input-address.meteor.com/

Source code of the demo is available here: https://github.com/abdj/meteor_google_input_address_demo

Prerequisite and Configuration

Ensure you have loaded the GoogleMaps API, either globally or on the route scope.

GoogleMaps.load({libraries: 'places'});

(i) Example: Install the package globally

Meteor.startup(function() {
  GoogleMaps.load({
    key: 'YOUR API KEY', // optional, could be loaded via Meteor.settings.public.GOOGLE_MAP_API
    libraries: 'places'  // can be an array
  });
});

(ii) Example: Optimize loading time, by loading google libraries only on needed routes

Router.onBeforeAction(function() {
  GoogleMaps.load({
    key: 'YOUR API KEY', // optional
    libraries: 'places'  // can be an array of libraries
  });
  this.next();
}, { only: ['aRoute', 'aSecondRoute'] });

Usage Example

Into your collection declaration

//This is the default address schema
Schema.Address = new SimpleSchema({
  formattedAddress: {
    type: String,
    optional: true
  },
  geopoint: {
    type: [Number], //[longitude, latitude]
    decimal: true,
    optional: true
  },
  city: {
    type: String,
    optional: true
  },
  postalCode: {
    type: String,
    optional: true
  },
  country: {
    type: String,
    optional: true
  },
  countryName: {
    type: String,
    optional: true
  }
});


Schema.Test = new SimpleSchema({
  address: {
    type: Schema.Address,
    optional: true,
    autoform: {
      type: 'google-places-input'
      // geopointName: "myOwnGeopointName" //optional, you can use a custom geopoint name
    }
  },
  text: { // useless in our example
    type: String,
    optional: true
  }
});
Test.attachSchema(Schema.Test);

Generate your autoform form:

    {{> quickForm id="formUpdate" schema="Schema.Test" collection="Test" type="insert" }}

Changelogs

29-12-2015:
- Allow two address field on the same form
- Valid iOS mobile integration

License

MIT

autoform-google-places-input's People

Contributors

Stargazers

Watchers

Forkers

jocoder twavis ukutaht getaptly pablonm3 workturbo ojczeo

autoform-google-places-input's Issues

Field does not pull in entities

Is there any way to pull in entities such as businesses into the field? Currently only addresses are returned

Request from Meteor beginner

Can I ask for a tiny example of what I should do after I install your package? I am quite lost, I am still learning Meteor and I cannot figure out what I should do now :-)

I would like to use this package in a personal project based on Telescope.

Thanks!

Feild does not clean upon submit\exit

Hi,

This package is absolutely awesome!
I have an issue with clearing the form.
I have 3 modals that contain autoform that are attached to schema that defines type: 'google-places-input'

everything goes good except that the modal is closed (e.i. exit button\submit) - the part that contains the type: 'google-places-input' does not clear (as other fields) - It behaves really strange:

if user submits some modal & open it again - the textfield shows the placeholder ('enter a location') **but when the user press 'submit' _without filling the field the form - it _submit the last value that was filled
if **user submits some modal _& _open other modal - the textfield shows the last value that was filled in the previous form (and if user press 'submit' its submit that text field)
if user **starts fill the field ** at some modal and *exit without submit *& open other modal - the textfield shows the last value that was filled (and if user press 'submit' its submit that text field

*when I write 'the field' I mean the field with geocomplete

Schemas definition:

//This is the default geoAddress schema
Schema.geoAddress = new SimpleSchema({
    formattedAddress: {
        type: String,
        optional: true
    }
});

// Define the schema
Schema.address = new SimpleSchema({
    //other fields..
        autoValue: function () { return Meteor.userId() }
    },
    fullAddress: {
        type: Schema.geoAddress,
        label: "Full Address",
        autoform: {
            type: 'google-places-input'
        }
    },
});
...
Addresses.attachSchema(Schema.address); //this is Mongo collection

*** I have 3 more collection that use 'geoAddress' schema like this..

autoform useage in html file:

<div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                <div class="ibox-content text-center p-md">
                                    {{#autoForm collection=instance.collectionVarName id=instance.formId type="method" meteormethod=instance.methodName}}
                                        <fieldset>
                                            <legend>{{instance.title}}</legend>
                                            {{#each field in instance.fields}}
                                                {{> afQuickField name=field}}
                                            {{/each}}
                                        </fieldset>
                                        <button type="submit" class="btn btn-primary">Insert</button>
                                    {{/autoForm}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Do you have any suggestion how to fix this strange behavior?
basically - I want the field to:

clean after submit event (like other fields..) - not only by
not to 'transform' data from one modal to another (on submit\exit)

Thanks,

Can you give us an example?

Hi, surely I am doing some wrong, but I can´t make this packcage works. It would be great if you can put some basic example.
Thank you

Limit autocomplete to specific data?

It would be nice to have some options that will allow placing limits what type of data works in the autocomplete field. For example: only showing city/state and/or limiting to a single country?

Found this StackOverflow on the topic: http://stackoverflow.com/questions/8282026/how-to-limit-google-autocomplete-results-to-city-and-country-only

Set default value for placeholder - possible?

Hi,

I am trying to set the initial default value of the input field to something different than "enter a location".
In my case I would like to put the current location as default value. How would I do this here?

using quickForm inside 'modal'

Hi,
When I use a quickForm inside modals - I can not see the text dropdown
(though i can navigate options with up\down keys..)

Two Inputs

ReadMe said the two input address has been fixed but it seems to be duplicating content for me. Looking at the demo I cant figure out what part I am messing up. Any assistance would be greatly appreciated. Edit: Just cloned the demo and it has not been updated either.

IOS integration

Hi,

Is there currently an issue with using this on IOS platform? Currently i've tried integrating but it doesn't allow me to select on any of the dropdown for the google place.

Is it possible to change the name of geopoint field?

Hi, maybe Im doing some wrong but I need to perform some geospatial queries using the field geopoint. My problem is that I can't run queries because geopoint is not in geoJSON format. So, it would be nice if your plugin could reflect some kind of geoJson schemma like that:

location: {
type: Object
},
"location.type": {
type: String,
autoform: {
value: 'Point'
}
},
"location.coordinates": {
type: [Number],
decimal: true,
}

Note: if I run queries from mongodb shell, I have no problem using geopoint field. That is way I think Im doing some wrong.

Thank you!

Type filtering

Hey !

Thank you for this autoform plugin.
Just have a question, is it possible to retrieve only a certain kind of places ? I want to get only the "bar" : https://developers.google.com/places/supported_types?hl=fr#table1
is it possible ?

Thank you !

Get more data from Google?

I'd love to be able to get at more data from Google. Can we get some way of getting at this data?

I want to pull state from Google, but noticed it wasn't defined in the addon. I tried to then get at administrative_area_level_1 since that's what Google calls it, but it still wasn't working.

Neither of these work:

Schema.Address = new SimpleSchema({
  ...
  state: {
    type: String,
    optional: true
  },
  administrative_area_level_1: {
    type: String,
    optional: true
  },
...
});