Search code examples
javascriptangularjsgoogle-mapsng-map

Retrieving coordinates from google map


This plunker shows a google map.

http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview

<!DOCTYPE html>
<html ng-app="ngMap">

<head>
  <title>Simle Map</title>
  <meta name="description" content="Simple Map">
  <meta name="keywords" content="ng-map,AngularJS,center">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <ng-map center="[40.74, -74.18]"></ng-map>
</body>

</html>

I would like to know the coordinates of specific points on the map. If the user right-click on the mouse button on any points on the map, an alert will appear showing the coordinates.

The code uses angularjs and the ng-map module. http://ngmap.github.io/


Solution

  • I think you should add an event listener and then show the coordinates inside that event like this:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <title>Simle Map</title>
    <meta name="description" content="Simple Map">
    <meta name="keywords" content="ng-map,AngularJS,center">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <script>
      var app = angular.module('myApp', ['ngMap']); 
      app.controller('EventDomListenerController', function($window) {
        var vm = this;
        vm.showAlert = function(event, args) {
          $window.alert(event.latLng.lat()+', '+event.latLng.lng());
        }
      });
    </script>
    </head>
    
    <body ng-controller="EventDomListenerController as vm">
      <ng-map center="[40.74, -74.18]" on-click="vm.showAlert()"></ng-map>
    </body>
    </html>
    

    Live Plunker