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 ?
Your marker's binding is incorrect in the window directive.
Basically, you need to set a marker as selected on click and bind the window to that selected marker. See the jsfiddle for a working example.
<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="MapOptions.markers.selected.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>
http://jsfiddle.net/gqkmyjos/
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.
Plunker here
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.
I know this is old post, but I struggled with Angular Google Map, and solve issue when you open one window for markers. If you use ng-repeat and window for each one - no problems. But when you have a markers directive, and want to show only one window, then you have an issue - window places not above marker and you need change position a little. How to do it? Let me share my experience on that.
You just need to specify pixelOffset for windowoptions like that:
JS:
$scope.windowOptions = {
pixelOffset : {
height: -25,
width: 0
}
};
HTML:
<ui-gmap-window coords='selectedmarker.coords' show='true' options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>
That's it. Change height for your needs.
you're better setting the marker model on the scope on click something like this:
marker click callback:
$scope.onClick = function(marker) {
$scope.selectedMarker = marker.model;
}
Then use the selectedMarker in the directive:
<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
simple. assumes your marker model has longitude and latitude set of cause
