Unable to display map in ionic view on Cordova


#1

Trying to display a map I assumed getting coordinates would be the hard part; I have a map that will not display in PhoneGap; it displays fine in my local browser (opening index.html) but sending to PhoneGap build and debugging in wienre; I see that my ‘init’ console msg is displayed and coordinates are shown but the map refuses to display

my template:

<ion-nav-view animation="slide-left-right">
<ion-content>
    <div class="list card">

        <div class="item">
            <h1>Map</h1>
            <p>{{centerLat}}:{{centerLng}}</p>
        </div>

        <div class="item item-body">
            <google-map center="map.center" zoom="map.zoom"></google-map>
        </div>
    </div>

</ion-content>

controller:

    // http://angular-google-maps.org/api
.controller('GMapCtrl', function($scope, $cordovaGeolocation) {
    console.log("init gmap");
    $scope.msg = "";
    $scope.map = {
        center: {
            latitude: 45,
            longitude: -73
        },
        zoom: 12
    };

    var init = function () {

        // get coords
        $cordovaGeolocation.getCurrentPosition().then(function (position) {
            // Position here: position.coords.latitude, position.coords.longitude
            console.log("setting map");
            $scope.msg = position.coords.latitude + ":" + position.coords.longitude;
            $scope.updateCenter(parseFloat(position.coords.latitude), parseFloat(position.coords.longitude));
        }, function (err) {
            $scope.msg = "unable to determine location";
        });
    };

    $scope.updateCenter = function(lat, lng) {
        //$scope.map.control.refresh({latitude: lat, longitude: lng});
        $scope.centerLat = lat;
        $scope.centerLng = lng;
        $scope.map = {
            center: {
                latitude: lat,
                longitude: lng
            },
            zoom: 12
        };
    };



    init();
})

Any suggestions appreciated; public repo with working code is here:


#2

Here’s what it looks like in the browser

https://rawgit.com/phaggood/ngGoogleMap/master/index.html#/tab/gmap