Google is not defined at $cordovaGeolocation.getCurrentPosition

ionic-v1
1

One of my app function is to get user current location and load the google map using ngCordova geolocation pluggin, and it works great, the problem that I encounter is when I load the app without internet connection then reconnect the internet and recall the map function, it gives me an error google is not defined at $cordovaGeolocation.getCurrentPosition at console. any idea what is the problem?

  1. Load app without internet
  2. Connect to the internet
  3. Recall map function
  4. get error google is not defined at $cordovaGeolocation.getCurrentPosition

map.js

controllerModule.controller('MapCtrl', function($scope, $rootScope, $state, $cordovaGeolocation, $ionicPopup) {

$scope.getCoord = function() {
    console.log("Called");
    $rootScope.show();
    $scope.LocationFail = false;

    var options = {
        timeout: 10000,
        enableHighAccuracy: true
    };

    $cordovaGeolocation.getCurrentPosition(options).then(function(position) {

        var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        var mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

        //Wait until the map is loaded
        google.maps.event.addListenerOnce($scope.map, 'idle', function() {

            var marker = new google.maps.Marker({
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                position: latLng
            });

            var infoWindow = new google.maps.InfoWindow({
                content: "You are here!"
            });

            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open($scope.map, marker);
            });

        });

      $scope.LocationFail = false;
      $rootScope.hide();
    }, function(error) {
        var alertPopup = $ionicPopup.alert({
        title: 'Oops..',
        template: '<center>Could not get location</center>'
        });
      //  console.log("Could not get location");
        $scope.LocationFail = true;
        $rootScope.hide();
    });
  }
$scope.getCoord();
});

index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

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

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/controllers/intro.js"></script>
        <script src="js/controllers/map.js"></script>
        <script src="http://maps.google.com/maps/api/js?key=AIzaSyBdwhOpne8C0tSnyCHOCD1vrTJdxziPgDQ&sensor=true"></script>
      </head>

      <body ng-app="starter">
        <ion-nav-bar class="bar-light" align-title="center">
            <ion-nav-back-button>
            </ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view></ion-nav-view>
      </body>
    </html>

an error message

ionic.bundle.js:20434 ReferenceError: google is not defined
    at $cordovaGeolocation.getCurrentPosition.then.$ionicPopup.alert.title (map.js:17)
    at processQueue (ionic.bundle.js:22016)
    at ionic.bundle.js:22032
    at Scope.$eval (ionic.bundle.js:23228)
    at Scope.$digest (ionic.bundle.js:23044)
    at ionic.bundle.js:23267
    at completeOutstandingRequest (ionic.bundle.js:13732)
    at ionic.bundle.js:14112(anonymous function) @ ionic.bundle.js:20434(anonymous function) @ ionic.bundle.js:17384processQueue @ ionic.bundle.js:22024(anonymous function) @ ionic.bundle.js:22032$eval @ ionic.bundle.js:23228$digest @ ionic.bundle.js:23044(anonymous function) @ ionic.bundle.js:23267completeOutstandingRequest @ ionic.bundle.js:13732(anonymous function) @ ionic.bundle.js:14112
66VM249:35 WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSEDWrappedWebSocket @ VM249:35__connector.Connector.Connector.connect @ livereload.js?snipver=1:191(anonymous function) @ livereload.js?snipver=1:172(anonymous function) @ livereload.js?snipver=1:292(anonymous function) @ livereload.js?snipver=1:283
2

try using window.google

3

Can you provide more details about window.google since I’m still a beginner in ionic. thanks

4

try to access new google.maps with window.google.maps in your code

maybe your code is encapsulated.

if this wont work --> google is not loaded and in this case the access to google will not work.

And this has nothing to do with ionic … it is plain javascript stuff :wink:

5

still no luck :sob:
changed to window.google.maps in line 17
get an error common.js:159 Uncaught TypeError: Cannot read property ‘x’ of undefined

6

is this common.js file a file that you have created? or something of a third party library?

7

I’m following this guide http://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/ using ngCordova geolocation to get latlong and using google map api for map.
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBdwhOpne8C0tSnyCHOCD1vrTJdxziPgDQ&sensor=true"></script>

this map app works with internet connection but I don’t want to force user to restart the app if they launch it without internet.

8

change the map link as https its working in my case i am also follow same tutorials