etodanik / ion-google-place Goto Github PK
View Code? Open in Web Editor NEWIonic directive for a location dropdown that utilizes google maps
License: MIT License
Ionic directive for a location dropdown that utilizes google maps
License: MIT License
Sorry wrong one. I don't know why my post is here.
Use case:
I'd like to display the last places that the user selected when they "open" the widget.
We could pass a list of location to the directive through an attribute and init scope.locations
with it.
I will come with a PR tomorrow !
Hi,
When I close my app and have the input on focus and with some text and then close the app and open again the ion-google-place create another instance below the first one and is impossible to close the modal (because now they are two of them).
If I close and open the view again another instance appears and so go on. #
I'm developing an application where I'm only interested in getting streets, not cities or provinces, is there a specific or recommended way to filter those?
In the meanwhile I've ended up hacking ion-google-place.js, namely the geocoder.geocode line:
geocoder.geocode(req, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
scope.$apply(function() {
var filteredResults = [];
for(i in results) {
var valid = false;
for(j in results[i].address_components) {
for(k in results[i].address_components) {
var type = results[i].address_components[j].types[k];
if( type === "route" || type === "establishment"
|| type === "point_of_interest" ) valid = true;
}
}
if(valid) filteredResults.push(results[i]);
}
scope.locations = filteredResults;
});
} else {
// @TODO: Figure out what to do when the geocoding fails
}
});
Thanks!
Hi,
I think that will be great if the ngModel from input result can get the value from Angular too,
This is about that situation, a person store an address in your database and now,
she needs change it using this plugin.
when its on head it takes almost 30second for google API to response, and the app is frozen on the meantime. can't i declare the script in the body?
I saw some solutions, maybe i can write a directive to inject it and instantiate it in the body, ie:
How to install the latest version?
If i press the back button on Android (instead the cancel button), it does not close the screen. Instead, it goes back to the previous page, and the cancel button won't work either (and the screen will be freezed on the current screen).
I have been trying to fix this using the ionicPlatform functions (onHardwareBackButton, offHardwareBackButton, registerBackButtonAction), but i cannot achieve a function that is only valid when the modal is opened and destroyed when is closed.
Any idea?
E.g., I want to restrict only to some country:
geocoder.geocode({ address: query, componentRestrictions: {'country': 'CA'} }
Currently there is no way to add config options.
Thanks!
Is there a limit for the number of requests in a certain period. I read google has a limit of 1000 but you can change it to 150,000 if you sign up, does this library only limit to 1000 requests? and how do i associate my project id or api key to this library
Hi,
there is following code on line 61:
if(query.length < 3);
It's not really doing something useful, probably it's part of some other code?
hi,
good job,
just one thing:
if I comment the touchend event:
/ / element.bind ('touchend', onClick);
keyboard focus does not appear.
Tested on IOS.
Thanks!!
Hi,
I tried to implement the ion-google-place in an ionicModal but it seems that even if the ion-google-place is displayed on top of the modal, the click on the results doesn't work. (Cancel button either)
Sometimes when I click on the input that triggers the popup, the popup is shown, but the input is not focused and the keyboard does not show. It took me a while to understand why this is happening. The problem appears to be with the ionic auto scroll to focused input. Sometimes when the first (readonly) input is clicked and the popup is shown, ionic tries to scroll to the readonly input.
I have tried to add a bigger delay to the code that focuses the input, but it is not working. I presume that there should be a way to stop the ionic auto scroll from triggering.
Does any of you guys experienced this problem? Any fix for this?
P.P. I have created a forum post in the ionic forum regarding this issue. http://forum.ionicframework.com/t/disabling-ionic-auto-scroll-to-focused-input/16140
Hi all, I am trying to use this plugin with the ionic side menu template. I have followed the instructions and also installed this plugin at the root folder of the app but when I tried loading in the browser it shows me the error in the screenshot below.
Any help will be appreciated! Thanks guys! :)
I am trying to get ion-google-place working with Ionic 1.3.13.
After following the README instructions I am not seeing the location popup.
I am also not getting any errors.
Any idea on how to debug this?
How do I make ion-google-place Mandatory field?
Hi Danny!, great work with this directive!
I am using ngAutocomplete (https://github.com/wpalahnuk/ngAutocomplete) in other project and i think that could be great to implement the same features in this directive!
Let me know if you are interested, i could help you if you want!
Congrats!
<ion-view view-title="Search">
<ion-content >
<ion-google-place placeholder="Enter an address, Apt# and ZIP" ng-model="location" />
</ion-content>
</ion-view>
Using this, no list is showing. Using the devTools I can see the list is there with the places, but it's not showing at all, and the css is declared.
Do you plan to do a ionic2 solution?
On state change the search field pops up right away even if the input field wasn't clicked
issue related to this
http://stackoverflow.com/questions/31711938/google-places-coordinates-changing-keys
This doesn't seem to work if there are multiple autocompletes on the same page, when I select the option in the autocomplete in the first box it doesn't hide and if I click cancel, the autocompleted text is in the second box
Hi, I was successful in storing the location from ion-google-place to the database - However, I need to allow the user to change the stored location. How do I ensure that ion-google-place defaults to the stored location when I load up the ionic View?
I tried setting the ng-model attribute that is bound to the ion-google-place to the location and location.formatted_address. However the control is blank ... when I click on it It pops up and user has to enter a new address.
I want the user to be able to see the old address and be able to change it.
Hi,
seems that you haven't tagged the lasted commit, from bower i can access only to the 0.0.1
can i disable it?
A quick question,
isn't better to instance a new geocoder when we actually need it?
Because what if my smartphone don't have network at the moment that i launch the app?
So do you think its better to call when we actually need it? ( and also make it conditionally? )
bower install ion-google-place#1.0.2 --save
bower not-cached git://github.com/israelidanny/ion-google-place.git#1.0.2
bower resolve git://github.com/israelidanny/ion-google-place.git#1.0.2
bower ENORESTARGET No tag found that was able to satisfy 1.0.2
Additional error details:
Available versions in git://github.com/israelidanny/ion-google-place.git: 0.0.1
Is is possible to use this to pass the latitude and longitude to a different view/controller, i am successfully able to alert the lat and long when selecting an address but can't seem to find a way to access these in another view or controller.
I am getting the following in my console - Reference Error
ReferenceError: google is not defined
at link (http://localhost:8100/lib/ion-google-place/ion-google-place.js:17:40)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14336:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13733:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13733:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14330:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14330:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13733:13)
hi,
This directive is awesome..
can we use 2 times in a same dom with different model name. can you please suggest on this how i can achieve this.
How should I get google.maps initialized?
The ng-model value is displayed at the same view but when in controller i want to save ng-model value in to other variable. undefined value interested. And also $watch is not working on the ng-model.
ion-google-place works fine when testing with ionic serve but when I load onto a physical iPhone or Android phone the Google places list does not appear.
My code looks like this:
<ion-item ng-show="show_profile" >
<span class="profile-label">CITY/TOWN:</span>
<ion-google-place placeholder={{city_town_text}} class="city-town" ng-model="location.text"/>
<div ng-show="show_city_err" class="account-error-message">{{city_err}}</div>
</ion-item>
As far as I can tell it appears to be falling over in the ion-google-place.js file when calling google.maps.Geocoder();
In my index.html file I have:
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="lib/ion-google-place/ion-google-place.js"></script>
when hit return on your device, it would be nice if it would pick the first result in the list instead of waiting for the user to click on the name of it. any solutions for that?
for updating the new place theexisting place field doesnot display the field in
Hi,
I want to ask about how can I set up that only search in a country (Example: USA) . So what can I do with file .js? And How can I set 2 with 2 ng-model in 1 file .html? I'm a newbie. :(
Sorry about my English,
Thank you!
Best regards,
DK
Hello,
Can you add the "powered by Google" logo somewhere among the suggested places?
I am a bit worried about using this plugin in production if it does not comply with Google's requirements:
https://developers.google.com/maps/documentation/javascript/places#LogoRequirements
Cheers and thanks for the great plugin,
Andres
I'd rather not have the autocomplete go to the top of the screen - is it possible to have it stay where it is and do autocomplete?
I want to $watch the ng-model variable in my controller after location been selected, but the $watch callback doesn't trigger.
any idea?
Thanks
It's not running as expected when you have two fields. It would be nice if you add support for multiple fields on the same view. Actually when you click the second element, it opens the same result view of the other ion-google-place element.
Is it in your development plants?
I can confirm ion-google-place project works fine on iPhone until I add ng-cordova-oauth. ion-google-place and ng-cordova-oauth work fine independently.
As soon as I add the following line to www/index.html, I am getting google.maps undefined error. Any idea why?
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>0 103484 error Error: undefined is not an object (evaluating 'new google.maps.Geocoder')
link@http://192.168.1.197:8100/lib/ion-google-place/ion-google-place.js:17:51
invokeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:21830:15
nodeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:21330:23
compositeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:20721:23
compositeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:20725:24
nodeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:21325:35
compositeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:20721:23
nodeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:21325:35
compositeLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:20721:23
publicLinkFn@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:20596:45
appendViewElement@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:56754:11
render@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:54859:58
init@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:54779:26
render@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:56607:18
register@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:56565:16
updateView@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:62210:31
http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:62187:21
$broadcast@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:29345:33
http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:49189:32
processQueue@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:27747:30
http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:27763:39
$eval@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:29026:28
$digest@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:28837:36
$apply@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:29131:31
http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:25266:30
eventHandler@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:16451:25
dispatchEvent@[native code]
triggerMouseEvent@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:2906:20
tapClick@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:2895:20
tapTouchEnd@http://192.168.1.197:8100/lib/ionic/js/ionic.bundle.js:3022:13,
Here is my complete index.html
<title></title><link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/ion-google-place/ion-google-place.css" rel="stylesheet">
<link href="lib/ionic-contrib-tinder-cards/ionic.tdcards.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ion-google-place/ion-google-place.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/underscore/underscore-min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script src="lib/angular-slugify/dist/angular-slugify.min.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/factories.js"></script>
<script src="js/views.js"></script>
<script src="js/config.js"></script>
I type in hebrew the address i need ,but i get the result in english.
How can i add also option for hebrew address ?
@israelidanny Thank you very much for this module.
I am writing because I am not able to get the directive to work.
At most I get an input box but when I type nothing happens.
Am I missing something?
I would appreciate any help.
@leandroz I know you got this to work some time ago.
Do you have any suggestion?
Thank you again
Can i retrive data after select an address in my controller?
i insert directive but doesn't have a name...which can i bind this input with google map for show position?
thank you
Hello, i have a quick question.
How can i limit autocomplete results just to Australia?
i have tried to add a region: au
to geocode parameter but that does not seem to work
geocoder.geocode({ address: query, region: 'au' }
Could you please point me to right direction?
Thanks a lot.
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.