Angular -ui ui-map click event does not receive $ params

Question

I am trying to implement Google maps in Angularjs using ui.Map ( http://angular-ui.imtqy.com/ui-map/ )

I carefully followed the example and loaded the map, I can create a marker in the center of the map, and the "map-tilesloaded" event works fine.

My problem is adding a marker that the user clicks on. The click function gets the empty parameter $ params. In my controller:

$scope.newMapOptions = { center : new google.maps.LatLng($scope.position.lat, $scope.position.lng), zoom : 18, mapTypeId : google.maps.MapTypeId.ROADMAP }; $scope.getLocation = function() { if (navigator.geolocation) { return navigator.geolocation.getCurrentPosition(setPosition); } }; $scope.addMarker = function($event, $params) { $scope.newTingMarker = new google.maps.Marker({ map : $scope.myNewTingMap, position : $params[0].latLng }); }; $scope.initMap = function() { if (!$scope.mapLoaded) $scope.getLocation(); $scope.mapLoaded = true; }; function setPosition(pos) { $scope.position = { lat : pos.coords.latitude, lng : pos.coords.longitude }; $scope.meMarker = new google.maps.Marker({ map : $scope.myNewTingMap, position : new google.maps.LatLng($scope.position.lat, $scope.position.lng) }); $scope.myNewTingMap.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); $scope.$apply(); } 

html:

 <div ui-map-info-window="myInfoWindow"> <b>Current location</b> </div> <div ui-map-marker="meMarker" ></div> <div ui-map-marker="newTingMarker" ui-event="{'map-click': 'openMarkerInfo(newTingMarker)'}"></div> <section id="newTingMap" > <div ui-map="myNewTingMap" ui-options="newMapOptions" class="map-canvas" ui-event="{'map-tilesloaded': 'initMap()', 'map-click': 'addMarker($event, $params)' }"></div> </section> 

$ scope.addMarker should receive $ event and $ params, where $ params [0] has a latlng object. This is currently an empty array: []

I am using angular 1.1.5, but I tried using the same as the ui.Map example without effect.

I should also note that this is in the view, but its output outside the view in the main controller does not matter.

If I try to execute the code launched from the ui-map directive, I see that the latlng object starts in this case:

Ui-map.js:

  angular.forEach(eventsStr.split(' '), function (eventName) { //Prefix all googlemap events with 'map-', so eg 'click' //for the googlemap doesn't interfere with a normal 'click' event google.maps.event.addListener(googleObject, eventName, function (event) { element.triggerHandler('map-' + eventName, event); //We create an $apply if it isn't happening. we need better support for this //We don't want to use timeout because tons of these events fire at once, //and we only need one $apply if (!scope.$$phase){ scope.$apply();} }); }); 

element.triggerHandler ('map-' + eventName, event); ... has a latlng object in the 'event', but seems to be lost after that

Answer 1

Not sure what the problem is, I took your code and created a fiddle that works fine (something you should have done).

I made a console log when you click on $params. on it $params.

Most importantly, note that your code will work first, because you reference $scope.position.lat before setting it up. I upgraded it by default to RVA.

,

You need to handle the case a little more elegantly.

 function MapCtrl($scope, watchArray) { var center; if ($scope.position) { center = new google.maps.LatLng($scope.position.lat, $scope.position.lng); } else { center = new google.maps.LatLng(37.5410, 77.4329); //if null use rva } $scope.newMapOptions = { center: center, zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP } ... } 

console.log:

 [Ps] v 0: Ps > la: Q > latLng: O > pixel: Q > __proto__: Ps length: 1 > __proto__: Array[0]