Esse artigo traz ideias sobre customização dos mapas do Google, bem como
Geocoding, distâncias e direções entre lugares, além de mapas estáticos em
aplicações web.
Atualmente, aplicações web que utilizam, de alguma forma, mapas, estão na moda. Seja para simples amostragem, utilizando mapas estáticos ou para criar controles interativos, onde o usuário pode escolher como navegar através do controle, a opção fica por conta do desenvolvedor.
As principais aplicações desse tipo de serviço na web é para localização de lugares ou amostragem de outros. Tudo depende da aplicação para a qual estamos desenvolvendo um site.
O Google Maps é o principal serviço desse tipo no mercado. O Bing Maps, da Microsoft, vem crescendo, principalmente com o advento do Windows 8 e o crescimento do Windows Phone, mas ainda não está no mesmo patamar que a solução do Google.
Muito disso se dá pela quantidade de serviços que o Google oferece que são diretamente relacionados à soluções de mapas. Além da API do Google Maps em si, que é oferecida para iOS, Android e Web, o Google oferece uma série de outros serviços que serão cobertos em detalhes por esse artigo, desde localização até serviços de direções e distâncias entre dois lugares.
Além disso, com a utilização do serviço de Geocoding, fica muito mais fácil se localizar dentro de um determinado espaço.
O objetivo desse artigo é a criação de um website ASP.NET com a utilização de controles de mapa do Google, bem como a utilização de alguns dos serviços que o mesmo disponibiliza. Através desse artigo, será possível entender como e porque customizar os mapas, além lidar com os serviços, entre os quais a API de lugares do Google (Google Places API), que contém mais de 95 milhões de locais de interesse ao redor do mundo, segundo dados do próprio Google.
Google Maps
O Google Maps é, como já foi comentado, o principal serviço online de localização e mapas, apesar do crescimento do Bing Maps. O serviço contém inúmeras funções para o usuários, entre as quais as mais comuns é a localização, além de outras como direções e distâncias entre lugares.
Além disso, o serviço também contém informações de tráfego em determinadas vias, avisando o usuário que o tempo de deslocamento entre dois lugares pode alterar dependendo da hora do dia e do dia em si. Outros serviços oferecidos incluem o tempo de deslocamento entre lugares utilizando alguns diferentes meios de transporte, como carros, transporte público ou as próprias pernas.
Umas das principais adições ao serviço nos últimos anos foi o Street View. Esse serviço mostra para o usuário exatamente como é o endereço que ele deseja, baseado em uma visão da rua como se o usuário estivesse passeando pela calçada.
As fotos não são atualizadas muito constantemente, e a maioria delas data de 2011. Porém, como dificilmente uma rua vai mudar tanto assim em poucos anos, trata-se de uma boa opção para visitantes, que tem a oportunidade de “conhecer” os lugares antes mesmo de chegarem lá.
Entretanto, embora o site do Google Maps seja muito utilizado, a maior parte dos usuários, principalmente com o aumento no número de smartphones, utiliza a versão móvel do Google Maps. Trata-se de uma aplicação disponível gratuitamente para smartphones, e se trata da aplicação móvel mais utilizada no mundo, segundo dados de agosto de 2013. Essa aplicação está disponível desde 2005, e teve inúmeras atualizações e melhorias desde então.
O Google Maps não se destaca apenas pelas aplicações que o Google disponibiliza para os usuários comuns, como também pelas APIs que permitem que desenvolvedores reutilizem esses serviços dentro de suas aplicações. Como o Google Maps é codificado em JavaScript e XML, a criação das APIs é na realidade muito simples.
O Google disponibiliza a API Web do Google Maps desde 2005, quando o serviço era totalmente gratuito. Hoje em dia, para um determinado número de acessos, o serviço ainda é gratuito.
Porém, passando desse número de acessos, o serviço é pago. Isso significa que os desenvolvedores precisam ter uma noção do número de acessos que o seu website terá, para que o serviço não seja interrompido na metade do dia, por exemplo.
Uma das grandes vantagens da API do Google Maps é o fato de ser baseada em JavaScript, o que significa que pode ser visualizada em qualquer navegador do mercado. Além disso, pode ser utilizada com qualquer linguagem de programação. A utilização da API com ASP.NET é muito simples, é apenas o acréscimo de alguns scripts ao código da aplicação web e o mapa será mostrado.
Apesar dessa facilidade, a customização dos mapas, bem como a utilização de algumas APIs de localização, direções, entre outras, requerem um pouco mais de trabalho.
A API JavaScript do Google Maps contém alguns detalhes importantes que podem ser levados em consideração pelos desenvolvedores, conforme mostra a Tabela 1. As classes que podemos utilizar em nossas aplicações web são divididas em categorias, de acordo com o que elas representam. Repare que a categoria Overlays, por exemplo, contém várias classes que são responsáveis por marcações nos mapas que estamos criando.
Outras classes que utilizaremos nesse artigo são as classes da categoria Services, que contém classes de Geocoding, direções, detalhes de trânsito, entre outras. Repare também que o Street View possui uma categoria de classes separadas, bem como a API do Google Places.
Categoria (namespace) |
Descrição |
Map |
Classes principais, responsáveis pela amostragem do mapa propriamente dito. |
Controls |
Definição dos controles dentro do mapa, como zoom e escala. |
Overlays |
Marcadores de lugares específicos no mapa. |
Services |
Serviços como Geocoding, direções e distâncias. |
Map Types |
Tipos de mapas (satélite, trânsito, etc.) |
Layers |
Camadas de visualização do mapa (tempo, trânsito, etc.) |
Street View |
Detalhes do serviço de Street View do Google Maps. |
Events |
...
Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 54,90
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 54,90 /mês
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.