kuhnza / angular-google-places-autocomplete Goto Github PK

I have 2 pages, a main page and a secondary. And in both the pages I have a form with the auto complete integrated.

In the main page after I choose a place(Auto complete works here) and click the submit button i get redirected to the secondary page, where the results get displayed.

When I use the form in this secondary page the auto complete doesn't work. But if I reload the page, it works.

I have tried $route.reload, $location.path($location.path()) etc, but that is not helping. Only location.reload() works, and the data stored in the services is getting reset when I use this.

Are there any examples anywhere of using this project with formly?

If not, is there any reason to expect it to be easy or hard?

i have

<input class="width100" type="text"placeholder="Location" data-force-selection="true" data-ng-value="details.address" data-ng-model="details.address" data-g-places-autocomplete>

and

<input class="width100" type="text"placeholder="Location" data-force-selection="true" data-ng-value="details.address" data-ng-model="details.search_location" data-g-places-autocomplete>

but the this.$parent value from both are the same.

ideas?

It looks good on my laptop browser but when i push the app to my android phone, the position is weird. I am using ionic and cordova.

Hi,

So how come every app I made that uses this directive has to be updated because the geometry object constantly changes the coordinate keys? This seems to be arbitrary, and while it's probably not an issue related to this directive I was just curious if anyone ran into this issue and has a good solution.

Hi @kuhnza. Thanks for the nice directive - just what I'm looking for. I'm just having a few problems figuring out how to capture the data from a search.

I've posted a question on SO - if you have time to have a look at it I'd really appreciate it.

http://stackoverflow.com/questions/26233748/capturing-changes-to-model-using-angular-google-places-autocomplete

Thanks!

How can I retrieve instance for google map autocomplete?

normally it was set using

autocomplete = new google.maps.places.Autocomplete(...);
^ above var is instance..

I wanted to add following code to bound the address list by user location, which is suggested by google

            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(function(position)
                {

                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    var circle = new google.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });


                    autocomplete.setBounds(circle.getBounds());
                });
            }

Meteor's atmosphere.js provides a means whereby folks anonymously post packages of projects like angular-google-places-autocomplete, with no way to contact them.

The only working packaging of a-g-p-a is jonatan:angular-google-places-autocomplete, which was released once and needs updating to pick up the forceSelection fix from last March.

I'm posting this here in the hope that "jonatan" sees it. I've tried several other ways to contact.

It would be a good improvement if this plugin could integrates well with angular-google-maps plugin.

I would like to broadcast an event to this plugin when google maps is loaded.

Custom styling possible?

Hi,

I am unable to use the autocomplete in my infowindow / infobox, I'm making a record yesterday at infowindows would have input to the address, however, when having to use the address options are not displayed. I'm using "Force selection", then when I put a word and go to another input, the "Force selection" works correctly, do not know if the problem is in infowindows to ensure that configured correctly, I put the input off the map, then went to work, they would have any suggestions for my problem? Thanks You.

Translated by: Google Translate

Hi,

When I try to use the directive, I get a Global google var missing. Did you forget to include the places API script?

Of course, because I'm not loading google at all. I use the angular-google-maps.js to lazy load the google maps api like https://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi

How to use this lazy loading for this directive ??

Not an bug just wondering how to do this. I have a map showing below the auto complete field. I want to move the map to the item that is selected.

Hi,

I used to try this library and it works great, but couple days ago my map stopped working. The reason is coordinates of location was:

"location" : { "H" : 55.786437, "L" : 37.72242700000004 }

and now is:

"location" : { "J" : 55.725846, "M" : 37.64964299999997 }

Maybe this is only my issue.

Thank you

Very nice plugin, works very well.

A callback function would be nice onPlaceSelected by a user, so that we may do other things before saving it.

Such as
Getting the TimeZone of the place
Mapping it to an object of our own before saving

I've used a $watch to get this done so far. Mabye theres a better way to do it?

   //On place changed
    $scope.$watch( function ( scope ) {
          return scope.place;
    }, function ( newValue, oldValue ) {

    ]);

Hey,

When I am selecting "Times Square NY" from dropdown, it is getting converted to "Manhattan, NY 10036, United States" .

But i want to display "Times Square NY" only. Please help.

Hey guys. I'm using your directive on my ionic app. So this is whats happening. Say i want to search for Boston, MA, USA. So I type in "BOS" and it shows me location i'm looking for. So when i select the location and log the value inside the text field. It will only show me the three letters i keyed in which is "BOS" instead of the complete address which would me "Boston, MA, USA". So in return it doesnt plot the directions map for me.

Could you please advice on how to fix this.

Thanks.

Hi Dave,
I like your directive, thanks a lot.
It works fine for me in Chrome and Firefox, but I noticed that it throws a typeError in ie11.

In some instances on place selection the address is clipped. Seems to only happen to the numbers in the address. Any idea where this is coming from? See below for a before and after click/selection event.

Build found in dist/autocomplete.min.js looks dirty as any commit since 967f5eb is not included.
The current minified build breaks my app.

In the bower.json file both the minified and full version of js and css files are specified. so after grunt serve both the minified and full version of files are being added to my index html file.

so my question is --
is there any reason for adding src and min files in bower.json? due to this same code is rendered twice in project.

i want to use $watch for the ng-model in input, so that once ng-model gets changed, I can use that to move my map around?

// when autolocation search changes
$scope.$watch('autolocation', function(){
    console.log("changed location!");
})

<input type="text" g-places-autocomplete ng-model="autolocation" options="autocompleteOptions" class="map-controls" placeholder="Search Location"/>

Yo.

When selecting custom place from the autocomplete, $digest already in progress error is thrown by angular. The bug can be reproduced in example/custom-places.html by selecting any custom place.

The error is caused by the following lines from autocomplete.js

// line 158
if (prediction.is_custom) {
  $scope.$apply(function () {
    $scope.model = prediction.place;
    $scope.$emit('g-places-autocomplete:select', prediction.place);
    $timeout(function () {
        controller.$viewChangeListeners.forEach(function (fn) {fn()});
    });
  });
} // else { ... }

It seems $scope.$apply is unnecessary here, because by commenting it out, everything seems to work fine. We could wrap model assignment and event emitting in the same $timeout at the end of if statement, that way execution would be compliant with the else branch of this statement, where placesService.getDetails asynchronous request is triggered.
I could submit a pull request, though I don't know of the inner workings of this directive, even though it seems that this section is pretty straight forward. What do you think, @kuhnza?

above image, powered by google and small marker image do now show in hybrid application..
and show box is weird position.
where i change source code for solve this problem.. ??

Hi @kuhnza
Thank you for the great directive.

I was testing it out and at first it seemed fine when I implement on my code, however I ran into a problem when I had a section that was inside of a ng-show / nghide. The issue is that the auto generated list does not show up next to the input field. When I look at the DOM I can see the template being rendered.

See my Bin

http://jsbin.com/susovucofe/1/edit?html,js,output

Also the same thing http://plnkr.co/edit/NC1utk6y2GkQwe3x13ok?p=preview

This issue also happens when I use the directive in a modal:

<script type="text/ng-template" id="modalContent.html">
<p> Provide a Location <br />
 <input class="form-control " type="text" g-places-autocomplete ng-model="locationService" />
 </p>
</script>

the location of the suggested results displays very far from the input field. I'm using bootstrap to style my form, and nothing else.

If I create a g-places-autocomplete with options for type and country restrictions as follows,

  $scope.options = {
    types: ['(cities)'],
    componentRestrictions: {
      country: 'us'
    }
  };

And try to enter a city name which is not available, that makes autocomplete dropdown blank (no dropdown), and force-selection does not work, It just accept the raw text entered by user.

Hi,

I am trying to use it in my Ionic project but I can't get any autocomplete.

Any hint ?

Arnaud

I think autocomplete query is not working after running out of quotas

Tried to put a z-index of 100000 to .pac-container, tried different displays, but noting...

Hi,

First of all, thank you for your great job.

There is a problem in your bower.json : first, you should only expose min or src files they are both exposed as main files, second you should remove the slash in the path the actual paths are

     "/src/autocomplete.js",
      "/src/autocomplete.css",
      "/dist/autocomplete.min.js",
      "/dist/autocomplete.min.css"

Thank you in advance

Hi,
This is really helpful,my only problem tho,is that i'm unable to select the whole place title,for example if i select "Feija National Park, Ain Drahem, Tunisia" from the dropdown list,the returned object contains only "Ain Drahem,Tunisia" this is really weird,and it happens with every place i choose,looks like it just selects the governorate instead of the complete address. Is there any solution for this? ,i want to get the whole title from the dropdown list. Thanks!

Hi.

I don't know why, but some places are heavily truncated, like "Quinconces, Bordeaux" in France. I tried some other place in the same town (Bordeaux) and it worked very well, execpt this one, which ever take me only "France" on my input (and of course, model)

Do you know what's going on ?

Thanks !

Lookup seems to require the keydown event. But for our current project we need to be using a virtual keyboard extension in chrome.
http://xontab.com/Apps/VirtualKeyboard
Is there a way to change the autocomplete so that it is triggered without key down?

thanks for the great work.

I've used this directive before with no issues, but on my latest project, the drawer shows up at the bottom of the index page instead of under the input control.
Not sure what the issue is.

TIA

Andrew

Inside the gPlacesAutocomplete init code, the drawer element is appended to body: https://github.com/kuhnza/angular-google-places-autocomplete/blob/master/src/autocomplete.js#L88

However, upon $destroy of the gPlacesAutocomplete element, there should be cleanup logic to remove that element from <body> via element.remove().

The code should be updated as such:

function initAutocompleteDrawer() {
    // existing code...

    scope.$on('$destroy', function() {
        $drawer.remove();
    });
}

Model currently gets updated as the user is entering data into the input. This shouldn't be the case if forceSelection is enabled. The model should remain the same until the user actually selects one of the items from the dropdown.

Similarly, a user hitting "esc" should leave the model value alone (back to whatever it was before they started changing it.

I'll work on a PR that makes this happen.

So I am unable to select a address suggestion.
When i click on a suggestion, the input remains empty and the dropdown disappears.
This issue appears only when my app is running on the console emulator but works fine when I run it on laptop.
Can somebody help?

Build is fail:

FAILURE: Build failed with an exception.

What went wrong:
A problem occurred configuring root project 'android'.

Could not resolve all dependencies for configuration ':_debugCompile'.
Could not find any version that matches com.android.support:support-v13:23+.
Searched in the following locations:
https://repo1.maven.org/maven2/com/android/support/support-v13/maven-metadata.xml
https://repo1.maven.org/maven2/com/android/support/support-v13/
Required by:
:android:unspecified
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Please

When I enable force-selection on an input in a bootstrap modal, clicking outside of the autocomplete container autoselects an address for the user, which works fine. However, when I select an address, the input is populated with the information and I still have focus on the input. Losing focus of the input clears it, which is problematic.

For those trying to reproduce this bug, I'm on the most recent version. Here's my code:

HTML

<form class="form-horizontal" name="propertyForm" ng-submit="propertyForm.$valid && submitProperty()">
  <div class="modal-body">
    <div class="form-group" ng-class="{ 'has-error': propertyForm.address.$invalid && propertyForm.address.$dirty }">
      <label class="control-label col-md-3">
        Address
      </label>
      <div class="col-md-9">
        <input type="text" name="address" class="form-control" placeholder="1234 W 9th St" ng-model="address" g-places-autocomplete force-selection="true" options="options" required>
      </div>
    </div>

My options object

$scope.options = {
  componentRestrictions: { country: 'us' },
  types: ['geocode']
};

I have an event listener on the g-places-autocomplete:select event as well and it correctly fires.

Among other changes made since the release of 0.2.7, the solution to issue #41 is not implemented in the Bower package of version 0.2.7. A new release (to 0.2.8) should be made in the Github repo in order to include these changes in the latest available Bower install.

After I choose a prediction from the list, if I go to the end of the text in the input and hold down backspace to erase the text in the input field there is an error thrown for $scope.apply as it is removing text:

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.3.5/$rootScope/inprog?p0=%24apply
at REGEX_STRING_REGEXP (.../js/angular.js:63:12)
at beginPhase (.../js/angular.js:14644:15)
at Scope.$get.Scope.$apply (.../js/angular.js:14388:11)
at .../js/autocomplete.js:190:36
at C8 (eval at (eval at (eval at (eval at (https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:60:931)))), :17:495)
at B8.(anonymous function).getPlacePredictions (eval at (eval at (eval at (eval at (https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:60:931)))), :18:45)
at Ll.eval (eval at (https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:60:931), :1:388)
at https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:15:265
at ag (https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:27:432)
at Ll.(anonymous function).getPlacePredictions (eval at (https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js:60:931), :1:345)


It happens every time I test it and does not seem random.

Let me know if you need additional information. Thanks for the module, it has been working great other than this slight issue!

How do i listen to the on selected event ? (for example, to get the Lat and Lng of the selected location?)

How to put many autocomplete on the same form ?

<input type="text" g-places-autocomplete ng-model="placeOne"/> 
<input type="text" g-places-autocomplete ng-model="placeTwo"/>

 $scope.$on('g-places-autocomplete:select', function(event, data) {
// event.targetScope.input Should be the one which has been selected. 
});

Instead of that it looks like only the first one is created as an autocomplete field.

Any hints ?

Trying to use it within a modal, loaded correctly with Bower and followed the basic example.
As soon as I open the modal the following error comes up:

Cannot read property 'AutocompleteService' of undefined

How can I solve it?

Thanks

When I use asset pipeline of rails it does not find the autocomplete.js file in /src/autocomplete.js
I changed the bower.json (removed the leading /) to make it working. Can you please change the bower.json in your futuer version so it can be used with rails asset pipeline.
"main": [
"src/autocomplete.js",
"src/autocomplete.css",
"dist/autocomplete.min.js",
"dist/autocomplete.min.css"
],

instead of

"main": [
"/src/autocomplete.js",
"/src/autocomplete.css",
"/dist/autocomplete.min.js",
"/dist/autocomplete.min.css"
],

Many thanks
Piyush

http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

Please check the second example of this plnkr.
I need to set up specific country wise city or all cities around the world.

Help me