Campo de busca

Categoria Programação

Google Maps Polygon

Google Maps Polygon

Por | 23 de julho, 2015 | 28 comentários

Salve galera!

Hoje ensinarei vocês como desenhar uma área poligonal em seu mapa, e de forma simples, mostrar se o usuário está dentro desta área delimitada.

A API do Google Maps V3 traz bastante novidades. Dentre elas estão os Shapes, formas que você consegue demarcar em seu mapa.

Para iniciar, vamos criar um mapa simples:

function initialize() {
    var mapOptions = {
    zoom: 18,

    center: new google.maps.LatLng(-22.879125525135013, -47.05825782513126),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

Não esqueça de chamar o script do Google Maps em seu html:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>

Note que estamos incluindo na chamada o parâmetro libraries=geometry. Ele vai carregar algumas funções úteis para trabalharmos com os shapes.

Vamos declarar um array com as coordenadas que usaremos para desenhar nosso shape.

Como um polígono deve ter 3 ou mais ângulos, salvei 3 coordenadas que circundam o nosso endereço.

var princiCoords = [
  new google.maps.LatLng(-22.878735,-47.058499),
  new google.maps.LatLng(-22.879694,-47.058392),
  new google.maps.LatLng(-22.878686,-47.057598)
];

Usaremos o objeto Polygon para demarcar a área, e para declará-lo basta fazer:

var princiPolygon = new google.maps.Polygon({
  // Coordenadas do seu objeto
  paths: princiCoords,
  // Cor do da linha
  strokeColor: '#E12D93',
  // Opacidade da linha
  strokeOpacity: 0.8,
  // Espessura da linha
  strokeWeight: 4,
  // Cor de preenchimento do objeto
  fillColor: '#942E7C',
  // Opacidade do preenchimento
  fillOpacity: 0.35
});

Dentro da função initialize, devemos inserir o shape em nosso mapa usando:

princiPolygon.setMap(map);

Prontinho, já temos um objeto Shape desenhado em nosso mapa.

Vamos criar uma função simples, que vai somente carregar novas coordenadas, simulando uma troca de endereço.

Criaremos também um botão para chamar esta função.

function carregarNoMapa() {
  var novoLocal = new google.maps.LatLng(-22.878735,-47.058499)
  map.setCenter(novoLocal);
}

var bt = document.getElementById('bt-carregar');

bt.addEventListener('click', function(e) {
  carregarNoMapa();
});

Agora falta verificarmos se o novo endereço está dentro do Shape certo?

Para "escutar" mudanças no mapa, utilizaremos o evento 'center_changed', que é disparado toda vez que o centro do mapa muda.

google.maps.event.addListener(map, 'center_changed', function(){
  // Pega as coordenadas do centro do mapa e salva no array
  var coordsCentro = [map.getCenter().A, map.getCenter().F];
});

Lembram da biblioteca geometry que carregamos previamente na tag script?

Ela nos serve o método 'containsLocation', que verifica se as coordenadas passadas como parâmetro estão dentro do nosso shape, e retorna true ou false.

estaNaArea = google.maps.geometry.poly.containsLocation(new google.maps.LatLng(coordsCentro[0], coordsCentro[1]), princiPolygon);

Para mostrar o resultado, vamos fazer um if simples e exibir no html mesmo.

if(estaNaArea){
  resultado.innerHTML = 'Você <b>está</b> na área da Princi Web';
}
else{
  resultado.innerHTML = 'Você <b>não está</b> na área da Princi Web';
}

Não deixe de baixar o projeto em sua máquina, e deixar suas críticas, sugestões ou dúvidas.

Até a próxima. :)~

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[28] Comentários  

Danilo Brigatti

Muito bom Gabriel.
Parabéns!

29-07-2015 às 22:15 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Danilo Brigatti

Valeu Danilo!

30-07-2015 às 10:08 Responder

Fernando

Em resposta a Danilo Brigatti

E ae Gabriel, td tranquilo?
Bacana sua explicação sobre o recurso.
Gostaria de tirar uma dúvida contigo.
Vc sabe se a função containLocation somente pode ser chamada com o listener click?
Obrigado.

30-07-2015 às 19:41 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Fernando

E aí Danilo. Valeu cara!
Em nosso exemplo estamos chamando a função containsLocation dentro evento center_changed.
Existem vários outros eventos que a API disponibiliza, e você pode ver com mais detalhes cada um na documentação https://goo.gl/4Ghmcr

Abraço.

31-07-2015 às 10:49 Responder

Victor Perin

Fala Gabriel,
Antes de tudo, queria dar parabéns pelo post, está muito bom!
Também é possível fazer isso na API estática do google, para ele gerar um uma imagem estática.
Olha um exemplo: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=satellite&zoom=18&path=color:0x00000000|weight:5|fillcolor:0x942E7C95|-22.878735,-47.058499|-22.879694,-47.058392|-22.878686,-47.057598
Não tem tantas funções quanto a sua versão, mas em alguns casos pode ser uma boa utiliza-la.

03-08-2015 às 19:56 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Victor Perin

Que legal Victor, não conhecia este recurso.
Para casos mais simples este deve ser o ideal a se fazer.

[]s

04-08-2015 às 09:33 Responder

Victor Perin

Em resposta a Victor Perin

Correção da URL: https://goo.gl/ZJNCHl

04-08-2015 às 10:06 Responder

Marques Junior

Tem como fazer essa verificação sem usar mapa? Ou seja apenas consultando e verificando se o usuário não está na cerca?

14-08-2015 às 15:09 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Marques Junior

Marques, no meu exemplo eu estou usando a API do Google Maps, então até onde eu sei não tem como.
Mas existem outras formas de lidar com localização na Web, por exemplo utilizando a API geolocation do HTML5 http://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

14-08-2015 às 16:24 Responder

Marques Junior

Em resposta a Gabriel Ribeiro

Você tem algum exemplo baseado no que eu havia falado?

18-08-2015 às 11:30 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Marques Junior

Infelizmente não tenho mano, mas qdo tiver um tempinho vou fazer e posto pra você .

24-08-2015 às 13:04 Responder

Lourival Junior

Mano, tentei fazer aqui, mas ele mostra apenas que estamos fora da área. posso mudar o polygon e mesmo assim ele fala que está fora.

20-08-2015 às 10:53 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Lourival Junior

Show me the code mano please.

24-08-2015 às 13:05 Responder

Bruno

Poderia escrever sobre como criar uma função que inicialize a tela dividida e apresentando dois mapas , como faz o IBGE (http://www.censo2010.ibge.gov.br/agsn/) - Se clicarmos em comparar ele abre dois maps

11-11-2015 às 17:19 Responder

leonardo

existe alguma função para obter o centro de um poligono demarcado no google maps?

29-02-2016 às 13:47 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a leonardo

Fala Leonardo, beleza?

Até o momento nunca precisei fazer isto cara. Mas achei uma resposta que pode te ajudar:
http://stackoverflow.com/questions/3081021/how-to-get-the-center-of-a-polygon-in-google-maps-v3

A idéia é percorrer todas as coordenadas e obter:

x1, a menor coordenada x
y1, a menor coordenada y
x2, a maior coordenada x
y2, a maior coordenada y

Depois é só fazer o cálculo para obter o centro do poligono.
center.x = x1 + ((x2 - x1) / 2);
center.y = y1 + ((y2 - y1) / 2);

Veja se resolve o seu problema. Qualquer coisa é só falar.

[]s

29-02-2016 às 13:59 Responder

Othon

Olá Gabriel, muito bom teu post, gostei bastante.
No entanto pra mim seria interessante passar uma determinada localização da rodovia (Km 78) e o google maps retornasse a Latitude e Longitude daquela região do entorno do Km passado como parâmetro.
Tem como fazer isso??

Abç

27-04-2016 às 18:48 Responder

Thiago

Fala Gabriel, beleza?
Parabéns pelo post cara, ajudou bastante. Eu queria saber se tem como eu desenhar dois polígonos ou mais simultaneamente, tentei aqui mas nenhum apareceu. Tem como fazer?

07-06-2016 às 12:05 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Thiago

Valeu Thiago! Tem como desenhar dois ou mais polígonos sim, basta você instanciar dois objetos e passar as coordenadas.

Neste link você encontra um exemplo disso que eu falei.

http://jsfiddle.net/j0ydpbe5

08-06-2016 às 10:58 Responder

Thiago

Em resposta a Gabriel Ribeiro

Valeu Gabriel! Vi aqui, rodou bonito. Eu estava tentando passar mais de um path dentro da propriedade paths new google.maps.Polygon. Consegui não. Você sabe se tem como? Tipo

var criaPoligonos= new google.maps.Polygon({
paths: bermudaTriangleCoords,otherTriangleCoords//e(ou) outras coordenadas aqui
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.35,
name: 'Bermuda Triangle',
map: map
});

08-06-2016 às 16:27 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Thiago

Thiago acho que pra cada polígono você tem que instanciar um new google.maps.Polygon e passar as respectivas coords.

[]s

10-06-2016 às 09:28 Responder

Thiago

Em resposta a Gabriel Ribeiro

Valeu Gabriel! Desse jeito que pensei pelo que vi tem como mesmo não.
Mas podemos fazer isto usando layers. Podemos fazer um arquivo .kml que tenha vários polígonos e seus estilos e estanciá-lo da seguinte maneira:

var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});

Este exemplo não dá para testar localmente, pois é como se o Google tivesse que ter acesso ao arquivo. Por isso o arquivo .kml dve estar em um 'local de acesso público' para que o Google possa reconhecê-lo e acessá-lo. O exemplo está na documentação da API: https://developers.google.com/maps/documentation/javascript/examples/layer-kml?hl=pt-br
Abraço!!

13-06-2016 às 11:01 Responder

Luana

Gabriel, como posso criar um array com coordenadas?

07-06-2016 às 23:37 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Luana

Você consegue criar um array desta forma Luana:

var princiCoords = [
  new google.maps.LatLng(-22.878735,-47.058499),
  new google.maps.LatLng(-22.879694,-47.058392),
  new google.maps.LatLng(-22.878686,-47.057598)
];

08-06-2016 às 11:19 Responder

Leonardo

Gabriel queria saber se tem alguma forma de criar um sistema de rastreamento simples
com google maps api JS ?

09-06-2016 às 13:28 Responder

Douglas

Muito bom Gabriel!

Há outra forma de "marcar" o perímetro de uma cidade que não seja pelo polígono?
Tenho uma aplicação que num certo momento marca 700 cidades. Entao para fazer o perímetro dessas cidades fica lento devido a quantidades de pontos.
Então pensei, será que há uma forma de informar a cidade e a API entender que é pra contornar a cidade?
Obrigado

10-08-2016 às 14:28 Responder

rodrigo faustino

Gabriel parabéns pelo Post.
Eu gostaria de saber, tenho um mapa com vários pontos e gostaria de que ao ponto tocar dentro do polígono o ponto excluísse do mapa, é possível?

19-08-2016 às 16:05 Responder

Fagner

Existe alguma maneira de eu poder traçar uma polyline e capturar as coordenadas da mesma?

28-06-2017 às 14:44 Responder