israelidanny / ion-google-place Goto Github PK

View Code? Open in Web Editor NEW

250.0 22.0 203.0 2.15 MB

Ionic directive for a location dropdown that utilizes google maps

License: MIT License

CSS 6.68% JavaScript 84.64% HTML 0.03% SCSS 8.66%

ion-google-place's Introduction

DEPRECATED

This repository has been deprecated and will not be maintained.

ion-google-place

Ionic directive for a location dropdown that utilizes google maps

This is a simple directive for an autocomplete overlay location field built for Ionic Framework.

#Installation

Installation should be dead simple, you can grab a copy from bower:

bower install ion-google-place

Or clone this repository.

For the geolocation service to work, you'll need to have Google Maps javascript API somewhere in your HEAD tag: <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

You'll need to add ion-google-place as a dependency on your Ionic app:

angular.module('myApp', [
  'ionic',
  'ion-google-place'
]);

You'll also have to include ion-google-place.js in your Ionic app, probably near where you added the Google Maps API script: <script src="path/to/your/libfolder/ion-google-place/ion-google-place.js"></script>

That's pretty much it. Now you can use the directive like so: <ion-google-place placeholder="Enter an address, Apt# and ZIP" ng-model="location" search-placeholder="Enter an address, Apt# and ZIP"/>

The main placeholder attribute is for the placeholder text in the view. The search-placeholder attribute customises the placeholder in the actual entry popup.

You can in this version have the current location by adding to the directive "ion-google-place" the attribute currentLocation to true.

example: <ion-google-place placeholder="Enter an address, Apt# and ZIP" ng-model="location" current-location="true" />

the acceptable value fot the attribute currentLocation are true or false.

ion-google-place's People

Contributors

Stargazers

Watchers

Forkers

dineshnadar chowdhury pronebel bonbonpiment quipu positivex kpowerinfinity ivanst-stoyanov izifortune bamlab mackbrowne miguelramosfdz carchrae mariusbrn sunfarm guylabs barani2824 sidalihallak yasuosm kevbaker cihejimba hendrikn sanketssl22 andrei-vakulski guillahume jaronson quatmo benprebble shockey vstirbu faozimipa youpers jhessu nickl victorcoding latitudecartagene nzwddy aliatsis fakenickels davidpatrick devangmundhra gfnork ramyrais pkdevbox lubott flyingsky cteiosanu stevecarlton hotrush babavalibob nagrao olasfar mlzxy mejdnuaman auroraitusa mrakoton skiddolo ulion smaloron jtmarmon petekeller2 enginearch carsonchen1129 ravimittal84 ahaverty chuaquino jimmyrobson 2009 juanandrescl-zz paugp rahmatcmos bubbobne ginms sjerd atoz-chevara geruiz ebrahim-hamdy antpas greyexpert nlasso jamesvsshark pavelety dileeppdkr wwstay ariadnagomez aschmi moustafab madnesslabs vynci ioncmt-frontend ethanhung ravzski anderson631 vincenzotavarone ahsanayaz bryant1410 rahulyhg peacedeveloper aless673 rk-forfuns

ion-google-place's Issues

Implement Features of ngAutocomplete

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!

Put ngModel bilateral

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.

Using with side menu template

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! :)

Restrict results only to Australia

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.

Feature: Ability to pass config options

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!

Have the text field stay in place

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?

geocoder

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 tag

Hi,
seems that you haven't tagged the lasted commit, from bower i can access only to the 0.0.1

Can't select result in a modal

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)

Submit ng-model undefined

http://stackoverflow.com/questions/31509635/ionic-ion-google-place-ng-model-undefined?noredirect=1#comment50981611_31509635

search bar being rendered without click

can i disable it?

Is there a limit to number of requests?

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

Multiple instances problem when reopen the app

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. #

Being able to display a default list at opening

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 !

google.maps undefined error

How should I get google.maps initialized?

bower install ion-google-place only picks up 0.0.1

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

Populate ion-google-place with location stored in the database

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.

scope.watch modelName doesn't work

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

Mandatory - Required field

How do I make ion-google-place Mandatory field?

ionic google doesnot support text field

for updating the new place theexisting place field doesnot display the field in

ion-google-place cannot work with ng-cordova-oauth

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?

Here is my complete index.html

<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>

Not an issue but a nice thing to have

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?

Ionic2 solution

Do you plan to do a ionic2 solution?

[feature] Google logo

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

element.bind('touchend', onClick);

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!!

How do i get coordinates

issue related to this

http://stackoverflow.com/questions/31711938/google-places-coordinates-changing-keys

Is it possible not using model ?

Sorry wrong one. I don't know why my post is here.

Passing lat and long through to another view/controller

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.

List not showing up

<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.

Back button on android does not close

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?

Support for multiple autocompletes on same page

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

Not working with Ionic 1.3.13

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?

Multiple fields

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?

Probably unnesessary if statemant on line 61

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?

Not able to save Ng-model Value into database

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.

Integration with map

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

bower install ion-google-place only installs version 0.0.1

How to install the latest version?

hebrew result for address

I type in hebrew the address i need ,but i get the result in english.
How can i add also option for hebrew address ?

google place can we use 2 times in a same dom with different model name

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.

search field pops up right away on state change

On state change the search field pops up right away even if the input field wasn't clicked

How to get only streets?

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!

The popup input is not always focused

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

Missing docs? not working

@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

Works on emulator and browser but on on an actual iPhone or Android phone

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>

Choose country to geocode

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

Purchase Location