search

etodanik / ion-google-place

Ionic directive for a location dropdown that utilizes google maps
MIT License
250 stars 201 forks source link

Installation not working #79

Open diegobill opened 8 years ago

diegobill commented 8 years ago

Installation not working:

https://docs.angularjs.org/error/$injector/modulerr?p0=pay4that&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.4.3%2F$injector%2Fmodulerr%3Fp0%3Dion-google-place%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.3%252F%2524injector%252Fnomod%253Fp0%253Dion-google-place%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A40%253A416%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A58%253A66%250A%2520%2520%2520%2520at%2520a%2520(http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A57%253A109)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A57%253A352%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A71%253A381%250A%2520%2520%2520%2520at%2520m%2520(http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A41%253A322)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A71%253A229)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A71%253A398%250A%2520%2520%2520%2520at%2520m%2520(http%253A%252F%252Flocalhost%253A8100%252Flib%252Fionic%252Frelease%252Fjs%252Fionic.bundle.min.js%253A41%253A322)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:40:416%0A%20%20%20%20at%20http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:72:154%0A%20%20%20%20at%20m%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:41:322)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:71:229)%0A%20%20%20%20at%20http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:71:398%0A%20%20%20%20at%20m%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:41:322)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:71:229)%0A%20%20%20%20at%20eb%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:74:503)%0A%20%20%20%20at%20Ac.d%20(http:%2F%2Flocalhost:8100%2Flib%2Fionic%2Frelease%2Fjs%2Fionic.bundle.min.js:53:339

I added the Google Maps javascript API in my HEAD tag: 

<link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">

<link rel="stylesheet" href="lib/ionic-filter-bar/dist/ionic.filter.bar.min.css">

<!-- ionic/angularjs js -->
<script src="lib/ionic/release/js/ionic.bundle.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>

<!-- angular get-text-->
<script src="lib/angular-gettext/dist/angular-gettext.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

<!-- angular qrcode -->
<script src="lib/angular-qrcode/angular-qrcode.js"></script>
<script src="lib/qrcode-generator/js/qrcode.js"></script>

<!-- angular material -->
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>

<!-- angular qrcode -->
<script src="lib/angular-payments/lib/angular-payments.min.js"></script>

<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>

<!-- md5 -->
<script src="lib/JavaScript-MD5/js/md5.min.js"></script>

<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.min.js"></script>
<script src="lib/hashids/lib/hashids.min.js"></script>

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<!-- your app's js -->

`

I added ion-google-place as a dependency on your Ionic app:

angular.module('pay4that', ['ionic', 'pay4that.controllers', 'ionic-material', 'pay4thatServices', 'gettext', 'ngCookies', 'monospaced.qrcode', 'pay4thatInterceptor', 'angularPayments', 'jett.ionic.filter.bar', 'ngCordovaOauth', 'ion-google-place'])

diegobill commented 8 years ago

using Ionic 1.7.12

RamyRais commented 8 years ago

i think it is just because ion-google-place call the google API before it is loaded.

diegobill commented 8 years ago

How can I fix this?

RamyRais commented 8 years ago

well with the way you did it i don't know, but i used Angular google map where there a callback to know it the google map plugin is loaded (http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi). Then it up to you to fix your code using the link above.

diegobill commented 8 years ago

I just follow the Installation on README:

  1. create app: ionic start myApp tabs
  2. install ion-google-place: bower install ion-google-place
  3. Change two files: app.js and index.html (https://jsfiddle.net/vLy2dv9j/), to add<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> and ion-google-place as a dependency on your Ionic app
  4. and this error happens

Do I need to use another dependency like angular-google-maps ??

diegobill commented 8 years ago

Now is working:

just add ion-google-place on index.html:

<script src="lib/ion-google-place/ion-google-place.js"></script>
<link href="lib/ion-google-place/ion-google-place.css">

This could be included on README

shobhitdixit commented 8 years ago

I agree with degobill. This should be included in the README. It helped solve my problem as well. @diegobill @israelidanny

Henryisthebest commented 8 years ago

I agree too!