How do you retrieve the collection of markers using angular google maps?
I've trying to use var markers = $scope.map.markerscontrol.getGMarkers(); but it only returns the last item in the list.
Made a plunkr http://plnkr.co/edit/Tl60bVydDQ3jIXqG6nIc
I wanna use the markers to calculate the bounds and map center.
i think it help you.
in your HTML file:
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options" data-tap-disabled="true">
<ui-gmap-marker
icon="yourModel.icon"
idKey="yourModel.id"
coords="yourModel.coords"
control="markerControl">
</ui-gmap-marker>
</ui-gmap-google-map>
and in your angular controller.
$scope.yourModel = {
id: 1,
coords = {
latitude: position.latitude,
longitude: position.longitude
},
icon = 'path/to/icon.png'
};
$scope.markerControl = {};
and how to use
var marker = $scope.markerControl.getGMarkers();
// marker variable, get an array of object to use.
Related
I want to catch the click event that happens when you click on a marker on a google map, and then execute some code. I've tried this, but it doesn't seem to be working.
$scope.$watch('click', function(newVal, oldVal) {
alert("Marker was clicked");
});
Any ideas?
Google maps displays the map in an iframe, and you can't capture clicks like that with an iframe. I use NgMap for map displays in my angularJS app, and the HTML structure ends up looking like this:
<ng-map class='map' style="">
<marker id='{{locale.id}}' position="{{locale.position}}" ng-repeat="locale in locales" on-click="showInfoW(locale)"></marker>
<info-window id="foo-iw">
<!-- info window HTML stuff here -->
</info-window>
</ng-map>
See that on-click in there? That is where you can get the click and do something in your code.
My JS looks something like this:
$scope.showInfoW = function(e, locale) {
$scope.vm.locale = locale
$scope.map.showInfoWindow('foo-iw', locale.id);
}
NgMap.getMap().then(function(map) {
vm.map = map
var latlng, bounds = new google.maps.LatLngBounds();
for (var i in $scope.locales) { // your marker list here
latlng = new google.maps.LatLng($scope.locales[i].position[0], $scope.locales[i].position[1]);
bounds.extend(latlng) // your marker position, must be a LatLng instance
}
$timeout(function() {
google.maps.event.trigger(map, 'resize');
$scope.map.fitBounds(bounds);
$scope.map.setZoom(14)
}, 500)
})
Without trying to explain everything, you can see that (using the wonderful NgMap package) you can capture the click on the marker.
I'm new to Angular (so probably am making some silly mistakes) and I'm trying to add some markers to a map instance with a custom image icon.
I understand that the best way to do this is to add this into the items as suggested by Fedaykin but is there a way to do this if you can't change the JSON file?
I was able to add the custom icon for a single marker, so I wondered if I could do the same for several markers using 'forEach', but although this shows all my markers it doesn't add the icon.
$scope.marker = Mapdata.query(function() {
var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";
$scope.$watch('data', function(data) {
angular.forEach($scope.marker, function(markerList, id, coords, icon) {
$scope.markerList = [{
id: data.id,
coords: {
latitude: data.latitude,
longitude: data.longitude
},
icon: image
}];
});
});
});
The html is just the usual angular-google-maps stuff
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>
I have a plunker here to put it all in context.
Thanks for any help or advice :)
Made a few changes:
index.html
icon="markerList.icon" --> icon="'icon'"
script.js
I didn't quite understand what you were trying to to with the $watch - I ended up just setting the image attribute of each marker when the data is initially fetched.
Mapdata.query(function() { --> Mapdata.query(function(data) {
$scope.$watch thing -->
angular.forEach(data.boards, function(board) {
board.icon = image;
});
Here's the updated plunker.
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 ?
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.
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 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
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.
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.
When I change my app from jQuery way to Angular way,
I try to use Angular-Google-Maps.
But I can't find where is the Google Map Objects(Map, Marker, Polygon...)
and the approach to use Object 'method' (such like getMap() , getPath(), getPosition()..).
If I need to get the position of the marker which is dragged, how can i do?
just like I usually do ?
marker = new google.maps.Marker(opts);
postion = marker.getPosition();
Edit:
I found a way how to get the marker position when it was dragged'n'dropped. You can set the callback function for the marker:
<google-map center="center" zoom="zoom" control="googleMap">
<marker coords="coords" options="options" events="events">
</google-map>
Then in the controller you define the callback:
$scope.events: {
dragend: function (marker) {
$rootScope.$apply(function () {
console.log(marker.position.lat());
console.log(marker.position.lng());
});
}
}
Old Answer:
It is currently not possible:
https://github.com/nlaplante/angular-google-maps/issues/277
However, you can get the original google.maps.Map object:
Directive call:
<google-map center="center" zoom="zoom" control="googleMap"></google-map>
Angular controller:
...
$scope.center = = {
latitude: 48.13171,
longitude: 11.549554
};
$scope.zoom = 8;
$scope.googleMap = {}; // this is filled when google map is initiated
function getMapObject() {
$scope.googleMap.control.getGMap();
}
...
Actually you don't even need events, the library already binds your marker position with the scope.
Here is how I did it in Coffee Script:
Controller:
$scope.map =
center:
latitude: k
longitude: D
zoom: 16
marker:
coord:
k
D
View:
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-marker
idKey="'pin'"
coords="map.marker.coord"
options="{'draggable':true}"
>
</ui-gmap-marker>
</ui-gmap-google-map>
<pre>{{map | json}}</pre>