In my Ionic App, I'm using Angular Google Maps to display a marker for my current location and a slew of others for points of interest.
I have the markers displaying fine, however, for the life of me I can't get the ui-gmap-windows to show.
From the documentation and examples I have come across, I seem to be doing everything right, however I can't for the life of me see why the markers are not displaying.
I'm not getting any errors appearing in the console.
Once I have the windows showing, I'd like them to show and hide when you click on the marker.
Here's my template:
<ion-view view-title="Harbour Map">
<ion-content>
<ui-gmap-google-map center='map.center' zoom='map.zoom' aria-label="Google map">
<ui-gmap-marker coords="coords" idkey="999999"></ui-gmap-marker>
<ui-gmap-markers models="harbours" coords="'self'" icon="'icon'" idkey="id">
<ui-gmap-window>
<div>{{name}}</div>
</ui-gmap-window>
</ui-gmap-markers>
</ui-gmap-google-map>
</ion-content>
</ion-view>
And my controller:
.controller('MapCtrl', function($scope, Harbours) {
$scope.position = 'Trying to find your location...'
$scope.coords = {};
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.position = position.coords.latitude+", "+position.coords.longitude;
$scope.coords.longitude = position.coords.longitude;
$scope.coords.latitude = position.coords.latitude;
})
})
} else {
$scope.position = "Sorry, we can't get your location";
}
var harboursPromise = Harbours.all();
harboursPromise.then(function(response){
console.log('response from controller', response);
$scope.map = { center: { latitude: 39.624984, longitude: 19.922346 }, zoom: 10 };
$scope.harbours = [];
$scope.harbours = response.harbours;
console.log($scope.map.harbours);
});
The Harbours factory returns a json array of harbours like so:
...
{
"id": 1,
"name": "Harbour 1",
"latitude": 39.790814,
"longitude": 19.922869
}, {
"id": 2,
"name": "Harbour 2",
"latitude": 39.789155,
"longitude": 19.916518,
}
...