Geocoding in AngularJS with Geolocation and Google Maps

Oct 8, 2014 Created

I’ve been working on an app that asks for the user’s zip code as part of an application process. I thought it would be pretty nice if I could leverage my old angular geolocation service and layer in some geocoding. After browsing around I found a way to do this using the Google Maps geocoder service.

This code will use the brower’s geolocation to determine your latitude/longitude and pass that into the google maps geocode api. The geocoder will return a whole bunch of other details such as your city, state, address, etc - but this code only cares about your zip code right now.

Something to keep in mind is that I’m not including a google maps API key in this example, and I’m not certain what the limitations are, so this isn’t exactly production ready.

If you have any changes, just fork it on JSFiddle (or gist).

File: geolookup.js ------------------ (function(angular) { 'use strict'; var app = angular.module('MyApp', []); app.factory('GeolocationSvc', [ '$q', '$window', function($q, $window) { return function() { var deferred = $q.defer(); if(!$window.navigator) { deferred.reject(new Error('Geolocation is not supported')); } else { $window.navigator.geolocation.getCurrentPosition(function(position) { deferred.resolve({ lat: position.coords.latitude, lng: position.coords.longitude }); }, deferred.reject); } return deferred.promise; }; }]); app.factory('ZipCodeLookupSvc', [ '$q', '$http', 'GeolocationSvc', function($q, $http, GeolocationSvc) { var MAPS_ENDPOINT = 'http://maps.google.com/maps/api/geocode/json?latlng={POSITION}&sensor=false'; return { urlForLatLng: function(lat, lng) { return MAPS_ENDPOINT.replace('{POSITION}', lat + ',' + lng); }, lookupByLatLng: function(lat, lng) { var deferred = $q.defer(); var url = this.urlForLatLng(lat, lng); $http.get(url).success(function(response) { // hacky var zipCode; angular.forEach(response.results, function(result) { if(result.types[0] === 'postal_code') { zipCode = result.address_components[0].short_name; } }); deferred.resolve(zipCode); }).error(deferred.reject); return deferred.promise; }, lookup: function() { var deferred = $q.defer(); var self = this; GeolocationSvc().then(function(position) { deferred.resolve(self.lookupByLatLng(position.lat, position.lng)); }, deferred.reject); return deferred.promise; } }; } ]); app.controller('MainCtrl', ['$scope', 'ZipCodeLookupSvc', function($scope, ZipCodeLookupSvc) { $scope.zipCode = null; $scope.message = 'Finding zip code...'; ZipCodeLookupSvc.lookup().then(function(zipCode) { $scope.zipCode = zipCode; }, function(err) { $scope.message = err; }); }]); })(angular); File: usage.html ---------------- <div ng-app="MyApp"> <div ng-controller="MainCtrl"> <div ng-show="zipCode"> <p></p> </div> <div ng-hide="zipCode"> <p></p> </div> </div> </div>