hi,
i have a map element within my app and it will not show up. All of the nearby places are present but no map is displaying.
I am using the following:
cordovaGeolocation, uiGmapGoogleMapApi, uiGmapIsReady, ngGPlacesAPI
the html code is :
<ion-view view-title="Nearby Health Services">
<ion-content class="padding">
<div class="item">
<ui-gmap-google-map center="myMap.center" zoom="myMap.zoom" draggable="true" control="control" options="options">
<ui-gmap-marker coords="myMarker.coords" options="myMarker.options" events="" idkey="myMarker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
<div class="item">
List of nearby medical services:
</div>
<div ng-repeat="place in places">
<div class="item item-divider">
{{place.name}}
</div>
<div class="item">
{{place.vicinity}}
</div>
</div>
</div>
<div class="padding">
<button ng-click="getMap()" class="button button-positive button-block button-outline">Search</button>
</div>
</ion-content>
</ion-view>
controller code is :
.controller(‘DashCtrl’, function($scope, $cordovaGeolocation, uiGmapGoogleMapApi, uiGmapIsReady, ngGPlacesAPI) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
// get user location with ngCordova geolocation plugin
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
$scope.lat = position.coords.latitude;
$scope.long = position.coords.longitude;
// get nearby places once we have user loc in lat & long
ngGPlacesAPI.nearbySearch({
radius:1000000,
type: 'hospital',
latitude: $scope.lat,
longitude: $scope.long
}).then(
function(data){
console.log('returned with places data', data);
$scope.places = data;
return data;
});
// create new map with your location
uiGmapGoogleMapApi.then(function(maps){
$scope.control = {};
$scope.myMap = {
center: {
latitude: $scope.lat,
longitude: $scope.long
},
zoom : 14
};
$scope.myMarker = {
id: 1,
coords: {
latitude: $scope.lat,
longitude: $scope.long
},
options: {draggable:false}
};
});
}, function(err) {
// error
});
});
app.js code :
// ‘mychat.services’ is found in services.js
// ‘mychat.controllers’ is found in controllers.js
angular.module(‘mychat’, [‘ionic’, ‘ngCordova’, ‘firebase’, ‘angularMoment’, ‘mychat.controllers’, ‘mychat.services’, ‘uiGmapgoogle-maps’, ‘ngGPlaces’])
this is what it looks like in the browser and on my iphone
i have downloaded the cordova whitelist plugin and its still not displaying as it should. theres no errors in the console
can anyone help?
thanks