Why are my map marker windows not showing?

@fraserhart wrote:

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,
}
...

Posts: 1

Participants: 1

Read full topic