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: