vskosp / vsgoogleautocomplete Goto Github PK

How to get multiple google place id like for source and destination?

Hi,

I tried to inject your module into my script

But i keep on getting this error:
Module 'vsGoogleAutocomplete' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I've loaded it on my module:
var app = angular.module('myApp',['ngRoute','ngFileUpload', 'vsGoogleAutocomplete']);
included your file after angular file and declare

     $scope.address = {
    name: '',
    place: '',
    components: {
      placeId: '',
      streetNumber: '', 
      street: '',
      city: '',
      state: '',
      countryCode: '',
      country: '',
      postCode: '',
      district: '',
      location: {
        lat: '',
        long: ''
      }
    }
  };

on the related controller.

But its still throwing that error, is there anyway to rectify it?

Thanks,

Hi,

if you search for a city and then you get the result, when you try to empty the input text the last result will be set to the input (the model).

So:

1. search for 'Rome'
2. you get 'Rome, Italy'
3. empty the input
4. you get 'Rome, Italy' again when the input loses the focus

When I select any address in Brooklyn (e.g. 1280 Ocean Ave, Brooklyn, NY 11230, USA) the city field is not populated automatically. Though it works with any other city.

While the existing demos are OK, as far as they go, they really don't capture a typical usage of an address form.

Please create an expanded demo ( similar to your existing "Demo with validator") except have every component of the address in it's own Label/Input code.

So the form should have lable/input fields which the user can enter data into, and that autofils:

• Street number and street "105 north 1st ave"
• City
• State
• Zip and Zip+4

Also, could your release package in NPM ?

I try to implement this plugin in my app but not get success every time I get a blank result on my screen. I Invest lot of hours, but not get success every time I get only name which I type in the input box. Please help me.

Hey! We're using your module in our project, but we faced with such issue:

1. Our autocomplete field is not required, so when user select some place he can change his mind, erase it and leave empty, but we can't do so with your module, because on blur value is getting back to previous one. Temporary I just checking if modelCtrl.$viewValue is empty we don't setting viewValue. Can you consider to implement such option?
2. We're using vs-autocomplete-validator and field is invalid if empty.

I typed '1 queens road' in the vs google autocomple text field. It shows me a suggestion '1 queens road, melbourne, australia'. When I click on it, the address placed in my text field is 'Suite 943/1 Queens Rd, Melbourne VIC 3004, Australia'.

I don't know how to place the exact autocomplete suggestion into my text field. Please anyone help me on this. Thanks in advance.

I can't submit a form containing an empty input with the validator "vs-my-street-address".

The reactive dropdown not visible when vs-google-autocomplete input element added to template for $uiModal.

I get the following error when I add the bower component in my angular application. works fine when I remove it. I am using angular js 1.2.26.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=r

Thanks for great directive, I just wanted to know How can I only show the City, Country in input field once user typed and selected some suggestion.

Currently I have below setup and its returning something like this once autocompleted.

<input type="text"
       name="city"
       vs-google-autocomplete="{ types:['(cities)'] }"
       ng-model="user.location"
       class="form-control"
       placeholder="Your City"
>

its populate input with

<City>, <State>, <Country>
<City>, <State> <ZipCode>, <Country>
...
New York, NY, USA
Barcelona, Barcelona, Spain

I want just City, Country

New York, USA

Please help how can I do that. Is there any option to pass format in directive

How can i prefill the autocomplete result in the input box. I am having issues while achieving this as when i set the model value to text address, the validator is not marking it as valid. How can i resolve it?

I seem to be running into an error in Firefox. When I keypress into the field; I background overlays the value and the autocomplete is shown way below the field.

I'm not sure if this was my styling issue or something is deprecated in the file. Has anyone else ran into this issue?

js
$scope.address = {
name: '',
place: '',
components: {
placeId: '',
streetNumber: '',
street: '',
city: '',
state: '',
countryCode: '',
country: '',
postCode: '',
location: {
lat: '',
long: ''
}
}
};

html

            <span class="help-block"><b>Model: </b>{{address.name}}</span>
      <span class="help-block"><b>Place id: </b>{{address.components.placeId}}</span>
      <span class="help-block"><b>Street number: </b>{{address.components.streetNumber}}</span>
      <span class="help-block"><b>Street: </b>{{address.components.street}}</span>
      <span class="help-block"><b>City: </b>{{address.components.city}}</span>
      <span class="help-block"><b>State: </b>{{address.components.state}}</span>
      <span class="help-block"><b>Country code: </b>{{address.components.countryCode}}</span>
      <span class="help-block"><b>Country: </b>{{address.components.country}}</span>
      <span class="help-block"><b>Postcode: </b>{{address.components.postCode}}</span>
      <span class="help-block"><b>Latitude: </b>{{address.components.location.lat}}</span>
      <span class="help-block"><b>Longitude: </b>{{address.components.location.long}}</span>

Hi,

I noticed in your demo and also in my app that if I set types to '(cities)' I still get all possible locations and not only cities. Could you please fix?

Thanks

There is an example:
http://jsfiddle.net/mnemonicart/mf49tgfa/7/

how to make in vsGoogleAutocomplete search subject administrative_area ?

Thank you

Whenever I type and search an item and then clear the value in the field, after clicking away, the value I just cleared appear again in the field. May not be a bug but this is quite bad for user interactivity.

How can I stop the field from being automatically filled again after clearing it?

Hi, In a page I have 2 location search boxes for Move Out Location And Move In Location. When search for second location it overriding the first location information. How can overcome this issue? Please provide any suggestions

I still didnt found solution to my previous problem, so as a workaround, temporary fix to get going i decided to put latitude and longitude in text boxes and then via $watch or ng-change i will use data in controller, but neither $watch nor ng-change works with this script, i wasnt sure about my code so i duplicated demo plunker and tried with that script and found that it didnt work with demo as well so i believe that ng-change doesnt work with this plugin.

My demo : http://plnkr.co/edit/FvdAzKBTRmVeSNI7qpG8?p=preview

Hi @vskosp, Thank for the great plugin.
However I have a small problem with accessing the lat, long of the autofill place.

HTML

<div class="col-md-3">
     <label for="" class="control-label">Address</label>
     <input vs-google-autocomplete
         ng-model="hotelAddress.Address"
         vs-place="hotelAddress.Place"
         vs-latitude="hotelAddress.components.location.lat"
         vs-longitude="hotelAddress.components.location.long"

         type="text" 
         class="form-control input-sm"
         name="address"
         id="address"
         placeholder="address">
   </div>

JS

$scope.addLocation = function (hoteladdress) {
    $scope.Obj = {
        Name              : hoteladdress.Name,
        Address           : hoteladdress.Address,
        Zones_id          : hoteladdress.Zone.id,
        City_id           : hoteladdress.City.id,
        LocationsType_id  : hoteladdress.LocationType.id,
        Latitude          : hoteladdress.Place.geometry,
      };
      console.log($scope.Obj);
}

So as you can see I lat and lng are undefined and give me a function (). Do you have idea why is not working? Thank you in advance

Hello!

The address components are super handy, would it be possible to add a vs-postcode directive?
Thanks for the awesome module!

I'm having a strange problem with vsGoogleAutocomplete and Material Design. See this Plunker:

http://embed.plnkr.co/HQzx72fUNG5rMHnHNcHp/preview

The issue is more obvious using Chrome, Firefox seems to hide placeholder text until it has been clicked. Basically, my inputs are getting populated with "Enter a Location" and they're messing with with my labels.

The example above shows 3 versions:

1. Normal MD input w/ no placeholder
2. Normal MD input w/ placeholder
3. MD input w/ placeholder and label removed. Animations disappear with this option.
4. Input pulled from the original Plunker

How are you able to overwrite the generated text or not get it in the first place? Option 3 is how I currently have this running but I'd like to get the animation back.

getCity() relies on "locality" being available in the place object.
However, some places only have "sublocality" and no "locality".
Places like Brooklyn will show no city when this function is called.

by the way this module is pretty incredible, so thank you.

Do you care about this warning from google https://developers.google.com/maps/documentation/javascript/places-autocomplete:
Warning: The implementation for types in text search requests is changing. The types parameter is deprecated as of February 16, 2016, replaced by a new type parameter which only supports one type per search request. Additionally, the establishment, place_of_worship, food, health, general_contractor and finance types will no longer be supported as search parameters (however these types may still be returned in the results of a search). Requests using the deprecated features will be supported until February 16, 2017, after which all text searches must use the new implementation.

I tried with
$scope.watch on address variable but that didnt work.

$scope.$watch('address', function () { console.log($scope.address); }, true);

i am working on script which shows neatby atms, script auto detects users location to show nearby atms as well as user can check atms in other areas/places using autocomplete plugin as well.

for that purpose i want to access address variable. But i couldn't.
if u use <span class="help-block"><b>Place id: </b>{{address.components.placeId}}</span> i can see values there but dont know why it doesnt show.

Hi,

First of all, congratulation for your great job.

I have a question/ enhancement to the directive : is it possible to add a vs-longitude / vs latitude that will populate the latitude/ longitude in the model?

Thanks in advance,