angular-maps not showing window inside marker

Question

I'm trying my best to show a window when clicking on a marker in angular-google-maps. Pretty much what is done here http://angular-google-maps.org/demo.

This is the function which generates the markers - it's called from a rest service, and each marker object can be viewed in coordinates.json:

var generateMarkers = function(markers) {

angular.forEach(markers, function(marker) {

  marker.onClick = function() {
    console.log('on click - opening window');
    marker.showWindow = true;
    $scope.$apply();
  }

  marker.closeClick = function() {
    console.log('close click - hiding window');
    marker.showWindow = false;
    $scope.$apply();
  }

});

$scope.map.randomMarkers = markers;

};

This is the code which declares the marker (no controller nesting and one $scope ). The window will inherit the

  <google-map center="map.center" zoom="map.zoom" draggable="true" 
        bounds="map.bounds" control="map.control">


        <markers models="map.randomMarkers" coords="'self'" 
            icon="'icon'" 
            click="'onClick'">

           <windows 
                  show="'showWindow'" 
                  coords="'self'"  
                  closeClick="'closeClick'" ng-cloak="">
              <div>
                  Window with additional information
              </div>
         </windows>
        </markers> 
      </google-map>

This is either a bug in angular-google-maps or I'm doing something wrong (which is likely)

I've created a plunkr, which demonstrates the behavior --> http://plnkr.co/edit/z1TdYlYbhSYWZb7n3L4M?p=preview

Please tell me what you think.

Hey victor thanks for this info, just need some extra info ... if map.randomMarkers has the array of objects that has the lat/lonameOfCityPropertywindow... how would you display it? I tried {{nameOfCityProperty}} or {{map.randomMarkers.nameOfCityProperty}} between to the div to display a user's city in the popup for example, but didn't work. Not sure how you can access the properties like that of the objects in the models attribute... At worst can use ng-repeat attr to loop over markers but would like to get it working with models attr — armyofda12mnkeys

Myles Myles · Accepted Answer · 2014-06-16T15:12:37

For posterity sake, this was answered over at https://github.com/nlaplante/angular-google-maps/issues/497 .

Basically, initialize to an empty array the property that coords is bound to, so that the reference gets updated correctly in angular.

This can be seen working here http://plnkr.co/edit/nbX0BIxNhxFrpzpruRWb?p=preview.

angular-maps not showing window inside marker

1 Answers