ng-maps record latitude longitude

Question

I have embedded a Google maps in my web application using:

<div>
 <map ng-transclude class="google-map" center="map.center" options="map.options">
 <marker position="marker.position" decimals="marker.decimals" options="marker.options" on-click="updatelatlong()"></marker></map>
 </div>

And controller:

$scope.map = {
  center: [39, -121],
  options: function() {
   return {
    streetViewControl: false,
    scrollwheel: false
   }
  }
 };

 $scope.marker = {
  position: [39, -121],
  decimals: 4,
  options: function() {
   return { draggable: true };
  },
  events:{
   drag:function(e, p, map, points) {
    console.log("dragged.....");
   }
  }
 };

I am trying to record the latitude longitude associated with the new dragged marker. However,control doesn't come to the drag event listener.

Could it be that you never set the listener on marker? You use the position, decimals, and options properties by linking them with attributes, and you have an onClick event to a non-existent function, but you don't do anything with your events property. I'm not that familiar with Google Maps, but that looks like the problem to me. — Matt W, Mar 25 '16 at 16:10
Atleast drag should be printed in console log right...and the function updatelatlong is defined..control doesnt reach there either — Vikas J, Mar 25 '16 at 16:12
I don't think so. You will only log if $scope.marker.events.drag is executed, and I don't see where you provide that to your map. Looking at https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/marker.html and https://developers.google.com/maps/documentation/javascript/reference#Marker I think you want to put your drag function in an `on-drag=""` in the `marker` tag. — Matt W, Mar 25 '16 at 16:24

score 0 · Answer 1 · answered Mar 25 '16 at 16:37

Solved it as below:

<map ng-transclude class="google-map" center="map.center" options="map.options">
 <!--<marker position="marker.position" decimals="marker.decimals" options="marker.options"></marker>-->
  <points coords="points.coords" options="points.options" events="points.events" decimals="points.decimals"></points></map>
 </div>

Controller:

$scope.map = {
  center: [39, -121],
  options: function() {
   return {
    streetViewControl: false,
    scrollwheel: false
   }
  }
 };

$scope.points = {
  coords: [
   [47,-122]
  ],
  options: function(coords, properties, i, map) {
   return {
    draggable: true
   }
  },
  events: {
   drag: function(e, point, map, points) {
    $scope.longitude=e.latLng.lng();
    $scope.latitude=e.latLng.lat();
   }
  },
  decimals: 3
 };

ng-maps record latitude longitude

1 Answers1