Geocoding Service using angularjs

Question

I am new to angular js. How can I implement geocoding services? Specifically, when I fill in a full address, how can I then populate the other fields (postal code,city,country,lat and lng) automatically?

I want to achieve something like this page in angular.
Please help me out.

I have code to populate the full address:

app.directive('googlePlaces', function(){
    return {
        restrict:'E',
        replace:true,
        // transclude:true,
        scope: {location:'='},
        template: '<input type="text" id="fulladdress" name="fulladdress" ng-model="enterprise.fulladdress" class="form-control text-field" placeholder="">',
        link: function($scope, elm, attrs){
            var autocomplete = new google.maps.places.Autocomplete($("#country")[0], {});
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                $scope.$apply();
            });
        }
    }
});

and the HTML:

<div class="form-group enterprise-form">
     <label>Full Address</label>
     <google-places location=location></google-places>
</div>

I want to populate two or three more fields lat,lng, postal code. Can I extend my directive to achieve this, and if so how?

You should perhaps try something and see how far you get, then come back and ask specific questions if you get stuck. — paulpdaniels
– paulpdaniels, Commented Aug 3, 2015 at 9:27
You can't ask to write code for you (from scratch), you will not receive any answer, because this is not a question. — michelem
– michelem, Commented Aug 3, 2015 at 9:48
okay thanks.. i just added my code above by which i get only address. But i want some things more on the behalf on address. — Deepak saini
– Deepak saini, Commented Aug 3, 2015 at 10:07

dting · Accepted Answer · 2015-08-03 19:23:12Z

You can just follow the example.

The autocomplete listener 'place_change' happens outside of angular's $digest loop so you should call fillInAddress using $evalAsync or you won't see your form change until the next digest.

The latitude, longitude is stored on the place object in geometry.location.

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  var components = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
    types: ['geocode']
  });
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    $scope.$evalAsync(fillInAddress);
  });
  
  $scope.formData = {};
  $scope.ll = {};

  function fillInAddress() {
    var place = autocomplete.getPlace();
    Object.keys(components).forEach(function(component) {
      $scope.formData[component] = '';
      document.getElementById(component).disabled = false;
    });
    
    place.address_components.forEach(function(component) {
      var addressType = component.types[0];
      if (components[addressType]) {
        $scope.formData[addressType] = component[components[addressType]];
      }
    });
    $scope.ll = {
      lat: place.geometry.location.G,
      lon: place.geometry.location.K
    };
  }
});

#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 99%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

<div ng-app='app' ng-controller='myController'>
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" type="text">
  </div>
  <table id="address">
    <tr>
      <td class="label">Street address</td>
      <td class="slimField">
        <input ng-model="formData.street_number" class="field" id="street_number" disabled="true" type="text">
      </td>
      <td class="wideField" colspan="2">
        <input ng-model="formData.route" class="field" id="route" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3">
        <input ng-model="formData.locality" class="field" id="locality" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField">
        <input ng-model="formData.administrative_area_level_1" class="field" id="administrative_area_level_1" disabled="true">
      </td>
      <td class="label">Zip code</td>
      <td class="wideField">
        <input ng-model="formData.postal_code" class="field" id="postal_code" disabled="true">
      </td>
    </tr>
    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3">
        <input ng-model="formData.country" class="field" id="country" disabled="true">
      </td>
    </tr>
  </table>
  <pre>{{ formData | json }}</pre>
  <pre>{{ ll | json }}</pre>
</div>

@Dting how can I change the ng-model= "formData.locality" to "formData.city" ?

Collectives™ on Stack Overflow

Geocoding Service using angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related