vskosp / vsgoogleautocomplete Goto Github PK
View Code? Open in Web Editor NEWAngularjs autocomplete module using Google Maps JavaScript API v3 and embedded autocomplete validator
License: MIT License
Angularjs autocomplete module using Google Maps JavaScript API v3 and embedded autocomplete validator
License: MIT License
Hey! We're using your module in our project, but we faced with such issue:
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.
The reactive dropdown not visible when vs-google-autocomplete input element added to template for $uiModal.
I can't submit a form containing an empty input with the validator "vs-my-street-address".
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.
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 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?
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.
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.
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.
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
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?
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.
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
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,
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 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
There is an example:
http://jsfiddle.net/mnemonicart/mf49tgfa/7/
how to make in vsGoogleAutocomplete search subject administrative_area ?
Thank you
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:
Also, could your release package in NPM ?
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'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:
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.
Hello!
The address components are super handy, would it be possible to add a vs-postcode
directive?
Thanks for the awesome module!
Hi @vskosp, Thank for the great plugin.
However I have a small problem with accessing the lat, long of the autofill place.
<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>
$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
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
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:
How to get multiple google place id like for source and destination?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.