angularjsgoogle-mapsangularjs-google-maps

How to get on-click coordinates on angular google maps?


I'm kind of a newb when it comes to AngularJS and Google's API for maps and I've been trying to get coordinates on click. I'm using this API.

I am getting an error: Uncaught TypeError: Cannot read property 'lat' of undefined on "console.log(lat);" row

This is my angular controller:

app.controller("agencyController",['$scope', '$log','uiGmapGoogleMapApi', function($scope,$interval, GoogleMapApi){
markers = [],
angular.extend($scope, {
markeri : markers,
map : {
    center: bgdcentar,
    zoom:13,
    options: {
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        streetViewControl: false,
        styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}],
        disableDoubleClickZoom: true,
        scaleControl: true,
        scrollwheel: true,
        panControl: true,
        streetViewControl: false,
        draggable: true,
        overviewMapControl: true,       
    },
    events:{
        rightclick: function(event){
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();
            console.log(lat);
            console.log(lng);
            console.log('Stan dodat!');
            markers.push();
        },
    },

},
searchbox : {
    template: 'searchbox.tpl.html',
    events:{
        places_changed: function(searchBox){
        },
        parentdiv: 'map_canvas'
    }
},
});

}]);

And this is a part of my html, the code is included in the controller so don't worry about that:

<div id="map_canvas"> 

    <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' >
        <ui-gmap-search-box template="searchbox.template" events="searchbox.events"></ui-gmap-search-box> <!-- search--> 
        <ui-gmap-markers models="markeri" coords="'self'" icon="'icon'"></ui-gmap-markers> <!-- markeri -->     
    </ui-gmap-google-map>
</div>

Solution

  • You need to replace:

    rightclick: function(event){ 
        //...
    }
    

    with:

    rightclick: function (map, eventName, events) {
        var event = events[0];
        //...
    }
    

    where

    map refers to map object, eventName - the name of event events - the list of event listeners

    Example

    angular.module('appMaps', ['uiGmapgoogle-maps'])
      .config(function(uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
          //key: ''
        });
      })
    
    
    .controller("mainCtrl", ['$scope', '$log', 'uiGmapGoogleMapApi',
      function($scope, $interval, GoogleMapApi) {
    
        angular.extend($scope, {
          markers: [],
          markerNo: 1,
          map: {
            center: {
              latitude: 42.3349940452867,
              longitude: -71.0353168884369
            },
            zoom: 13,
            options: {
    
            },
            events: {
              rightclick: function(map, eventName, events) {
                var event = events[0];
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                $scope.$apply(function() {
                  $scope.markers.push({
                    latitude: lat,
                    longitude: lng,
                    id: $scope.markerNo
                  });
                  $scope.markerNo++;
                });
    
              },
            },
    
          }
        });
    
      }
    ]);
    .angular-google-map-container {
      position: absolute;
      width: 100%;
      height: 240px;
    }
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
    
    <div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
      <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events'>
        <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"></ui-gmap-markers>
      </ui-gmap-google-map>
    </div>