Capa

Table of Contents

  1. Como instalar
  2. Utilizando a Directive
  3. Utilizando o Service
  4. Demonstração

Quase sempre que o desenvolvedor está trabalhando com mapas, surge a necessidade de traduzir uma posição composta por latitude e longitude em um formato que fique legível para o usuário. Quem usa o google maps há um tempo, provavelmente sabe que existe uma maneira de fazer isso, sem muitos problemas. Mas como podemos fazer isso do modo “Angular”?

Escrevi um pequeno módulo para o AngularJS , composto por uma directive e um service que resolve esse problema. Vamos ver a seguir como instalar e usar.

Como instalar

Para instalar você tem duas opções:

  • Utilizando o bower, bower install assemany-angular-reverse-geocode
  • Ou simplesmente indo ao repositório do github e baixando o arquivo angular-reverse-geocode.js

Nos dois casos, não esqueça de importar o arquivo “angular-reverse-geocode.js” (este arquivo pode ser encontrado na pasta src, em uma versão de desenvolvimento ou na pasta dist para uma versão minificada)para sua página.

E você também deve ter o script do google maps api em algum lugar na sua página:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
...
</head>
<body>
.
.
.
.
<!-- Insira o script do Google Maps -->
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
</body>
</html>

Agora que você já tem o código da directive e o script do google maps em sua página, você deve adicionar “AngularReverseGeocode” como uma dependência do seu projeto.

Para isso, vá até definição do seu módulo e adicione a dependência desta maneira

1
angular.module('meuApp', ['AngularReverseGeocode']);

Agora é só usar a directive ou o service!

Utilizando a Directive

1
<reverse-geocode lat="-12.928615" lng="-38.509741"></reverse-geocode>

Utilizando o Service

Adicione como dependência do seu controller o service reverseGeocode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(function() {
'use strict';

angular
.module('myApp')
.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();
});
}

}]);

})();

E para exibir o endereço na view:

undefined

Demonstração

Preparei uma demonstração no Codepen, para exemplificar a implementação na prática:

See the Pen Angular Reverse Geocode by Guilherme Assemany (@assemany) on CodePen.

É isso! Espero que tenham gostado! Todo o código para este módulo está no github, fiquem à vontade para contribuir com sugestões ou implementações!

Até a próxima!