Created a reverseGeocode Service and included a demo

guiassemany · Feb 26, 2016 · e2ac9ff · e2ac9ff
1 parent 3fe1b54
commit e2ac9ff
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/angular-reverse-geocode.js b/angular-reverse-geocode.js
@@ -5,6 +5,27 @@
  */
 (function () {
     angular.module('AngularReverseGeocode', [])
+    .service('reverseGeocode', ['$http', function($http){
+
+      var vm = this;
+
+      vm.geocodePosition = geocodePosition;
+
+      var geocoder = new google.maps.Geocoder();
+
+      function geocodePosition(lat, lng, fn) {
+        var latlng = new google.maps.LatLng(lat, lng);
+        geocoder.geocode({
+          latLng: latlng
+        }, function(responses) {
+          if (responses && responses.length > 0) {
+             fn(responses[0].formatted_address);
+          } else {
+             alert('Error while trying to find the location');
+          }
+        });
+      }
+    }])
     .directive('reverseGeocode', function () {
         return {
             restrict: 'E',

diff --git a/demo/app.js b/demo/app.js
@@ -0,0 +1,26 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('myApp', [
+            'AngularReverseGeocode'
+        ])
+        .controller('MyCtrl',['reverseGeocode', '$scope', function(reverseGeocode, $scope){
+          var vm = this;
+          vm.lat = "-12.914090";
+          vm.lng = "-38.493835";
+
+          vm.formatted_address = "";
+
+          activate();
+
+          function activate(){
+            reverseGeocode.geocodePosition(vm.lat, vm.lng, function(address){
+               vm.formatted_address = address;
+               $scope.$apply();
+            });
+          }
+
+        }]);
+
+})();
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,41 @@
+<html ng-app="myApp">
+  <head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
+  </head>
+  <body ng-controller="MyCtrl as my">
+    <div class="container">
+    <div class="row">
+      <h3> Using the directive </h3>
+      <div class="col-md-4">
+        <h4>
+          Reverse Geocode from fixed lat and lng:
+           <reverse-geocode lat="-12.928615" lng="-38.509741"></reverse-geocode>
+        </h4>
+      </div>
+      <div class="col-md-4">
+        <h4>
+          Reverse Geocode scope variables from controller:
+           <reverse-geocode lat="{{my.lat}}" lng="{{my.lng}}"></reverse-geocode>
+        </h4>
+      </div>
+      <div class="col-md-4">
+        <h4>
+          <a href="https://github.com/guiassemany/angular-reverse-geocode">Github repo</a>
+        </h4>
+      </div>
+    </div>
+    <div class="row">
+      <h3> Using the service </h3>
+      <div class="col-md-12">
+        <h4> Full address from controller </h4>
+        {{my.formatted_address}}
+      </div>
+    </div>
+  </div>
+    <script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js" charset="utf-8"></script>
+    <script src="./demo/app.js" charset="utf-8"></script>
+    <script src="./angular-reverse-geocode.js" charset="utf-8"></script>
+
+  </body>
+</html>