Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive
I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/
jsfiddle
For simplicity, I'm declaring the markers manually (and they're displaying correctly):
$scope.markers = [
{
id: 0,
coords: {
latitude: 37.7749295,
longitude: -122.4194155
},
data: 'restaurant'
},
{
id: 1,
coords: {
latitude: 37.79,
longitude: -122.42
},
data: 'house'
},
{
id: 2,
coords: {
latitude: 37.77,
longitude: -122.41
},
data: 'hotel'
}
];
The html looks like:
<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
<ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</body>
I'm applying the onClick function to the markers array using this code
$scope.addMarkerClickFunction = function(markersArray){
angular.forEach(markersArray, function(value, key) {
value.onClick = function(){
$scope.onClick(value.data);
};
});
};
The marker click functions look like
$scope.windowOptions = {
show: false
};
$scope.onClick = function(data) {
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('This is a ' + data);
};
$scope.closeClick = function() {
$scope.windowOptions.show = false;
};
The $scope.onClick() function seems to be working on marker click since the console outputs what is expected - and the $scope.windowOptions.show value toggles between true and false...
I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.
P.S. The API documentation examples seem out of date since they don't use show in the example but rather options.visible to show and hide infowindows - but then all the issues / examples suggest using show instead ?