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... :-/
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 ?
I know this is an old post.
However, these days I've been struggling myself trying to do this and, moreover, the jsfiddle of the accepted answer is broken and doesn't work with latest versions of angular-google-maps
directive. So, I've decided to share a working plunker hoping it can help other people.
This version is rendering multiple markers but just one window. Only one window can be opened at the same time.
It's based on the advises of the official site FAQ Section: See How do I only open one window at a time?
html
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
options="map.window.options"
closeClick="map.window.closeClick()"
templateUrl="'infowindow.tpl.html'"
templateParameter="map.window">
</ui-gmap-window>
<ui-gmap-markers
models="map.markers"
coords="'self'"
events="map.markersEvents"
options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
js
$scope.map = {
center: {
latitude: 39.5925511,
longitude: 2.633202
},
zoom: 14,
markers: [], // Markers here
markersEvents: {
click: function(marker, eventName, model) {
$scope.map.window.model = model;
$scope.map.window.show = true;
}
},
window: {
marker: {},
show: false,
closeClick: function() {
this.show = false;
},
options: {}
}
};
Hope it helps.