Em: CSS|HTML|JavaScript
17 jul 2011Neste post, vamos ver como criar mapas do Google Maps para um site ou blog.
Frequentemente, vejo o Google Maps sendo utilizado em blogs, sites e hotsites, para mostrar a localização de endereços de grandes eventos, escritórios, empresas, lojas, restaurantes, localização de anunciantes de classificados e muito mais. Isso traz maior conforto ao usuário, uma vez que não há a necessidade de se sair da página para efetuar a busca e localização do endereço indicado em outro blog ou site.
Existem 3 (três) métodos para se colocar mapas do Google Maps no seu blog ou site. O primeiro método é o mais simples e não requer nenhum conhecimento de programação, pois utiliza o código gerado pela página do próprio Google Maps. O segundo método gerará uma imagem chamada mapa estático. Você insere parâmetros no atributo src do elemento HTML <img> como zoom, coordenadas, tamanho, tipo de mapa, extensão da imagem que será gerada, tipo de marcadores, etc. e uma imagem será gerada com a localização especificada. O terceiro método gerará um mapa dinâmico. Esse mapa é parecido com o da página do Google Maps, podendo-se aumentar ou diminuir o zoom, mudar o tipo de mapa, percorrer o mapa gerado com o Google Street View, tudo isso dinamicamente.
Se você deseja somente uma representação no mapa de um endereço ou localidade, utilize o primeiro método. Agora se você precisa manipular variáveis e coordenadas armazenadas em bancos de dados, utilize o segundo ou terceiro método.
Vamos gerar um mapa, utilizando o primeiro método. Acesse a página do Google Maps, digite o endereço desejado na barra de endereço e clique na lupa para pesquisar. Quando o endereço buscado aparecer no mapa, clique no terceiro botão identificado como ‘Link’ na figura abaixo.
Uma pequena caixa surgirá à direita, oferecendo 2 (duas) opções. Uma com o link que deverá ser colado em e-mails, chats ou páginas, levando o usuário ao mapa quando clicado; e a outra com o código HTML que gerará o mapa e deverá ser colado no seu site ou blog. Veja a imagem abaixo.
Ao clicar no link ‘Personalizar e visualizar mapa incorporado’, é possível modificar o tamanho do mapa gerado. Feitas as modificações, é só copiar o código e colar no seu site ou blog.
Tem interesse em saber quais são as coordenadas (latitude e longitude) do endereço? É muito simples. Basta copiar o código que gera o link para e-mails e mensagens instantâneas e colar em algum processador de texto. O código teria o seguinte formato:
“http://maps.google.com.br/maps?q=Rua+Prof.+Eurico+Rabelo,+s%2Fn%C2%BA+,+Maracan%C3%A3,+rio+de+janeiro&hl=pt-BR&ie=UTF8&ll=-22.913871,-43.23103&spn=0.004941,0.008497&sll=-22.912537,-43.23089&sspn=0.004941,0.008497&t=h&z=17”
Perceba que os parâmetros são separados, utilizando-se o caractere ‘&’. O parâmetro “q” indica o endereço pesquisado, o “hl” indica o idioma, o “ie” o conjunto de caracteres e o “ll” indica a latitude e a longitude, que neste caso são -22.913871 e -43.23103. Caso digite a latitude e a longitude, separadas por vírgula, na barra de endereço e clique na lupa para buscar, o Google Maps levará ao mesmo endereço.
Pronto, agora você também já sabe como obter as coordenadas (latitude, longitude) de um endereço.
Quem conhece HTML sabe que a tag <img> é utilizada para exibir imagens. Sua estrutura é muito simples, veja:
<img src=”endereço_da_imagem” alt=”texto_alternativo” /> <!-- o atributo src contém o endereço da imagem e o atributo alt contém um texto alternativo que será exibido caso a imagem não possa ser visualizada. -->
É com base nessa estrutura que vamos trabalhar para gerar um mapa estático do Google Maps. Vamos a um exemplo:
<!-- Observe a estrutura do atributo src. --> <img src=”http://maps.google.com/maps/api/staticmap?center=-22.91387,-43.231031&zoom=12&size=400x400&sensor=false” alt=”Exemplo de mapa estático” />
A estrutura base de uma URL para gerar mapas estáticos sempre será http://maps.google.com/maps/api/staticmap?parâmetros, em que ‘parâmetros’ representa o local onde virão as configurações de exibição do mapa. No exemplo acima, o parâmetro ‘center’ indica o centro do mapa com a latitude e longitude separadas por vírgula, o parâmetro ‘zoom’ indica o nível de aproximação, ’ size’ o tamanho do mapa e ‘sensor’ se as coordenadas foram fornecidas por dispositivo móvel ou não. A estrutura base da URL não poderá ultrapassar 2.048 caracteres.
Veja abaixo os principais parâmetros para gerar um mapa estático.
Lembrando que cada par ‘parâmetro=valor’ deve ser separado pelo caractere &.
Exemplo 1: mapa estático sem marcador e tipo de mapa roadmap.
<!-- mapa estático sem marcador e tipo de mapa roadmap --> <img src=”http://maps.google.com/maps/api/staticmap?center=-22.91387,-43.231031&zoom=12&size=400x400&sensor=false” alt=”Exemplo de mapa estático 1” />
Exemplo 2: mapa estático com 1 (um) marcador e tipo de mapa satélite.
<!-- mapa estático com 1 (um) marcador e tipo de mapa satélite --> <img src=”http://maps.google.com/maps/api/staticmap?markers=-22.91387,-43.231031&zoom=17&size=400x400&maptype=satellite&sensor=false” alt=”Exemplo de mapa estático 2” />
Exemplo 3: mapa estático com 3 marcadores customizados formando a palavra ‘olá’, tipo de mapa satélite e formato da imagem png.
<!-- mapa estático com 3 marcadores customizados formando a palavra ‘olá’, tipo de mapa satélite e formato da imagem png --> <img src=”http://maps.google.com/maps/api/staticmap?markers=color:blue|label:O|-22.91387,-43.232000&markers=color:green|label:L|-22.91387,-43.231500&markers=color:red|label:A|-22.91387,-43.231000&zoom=15&size=512x512&maptype=satellite&format=png&sensor=false” alt=”Exemplo de mapa estático 3” />
Exemplo 4: mapa estático com um caminho e tipo de mapa hybrid.
<!-- mapa estático com um caminho e tipo de mapa hybrid --> <img src=”http://maps.google.com/maps/api/staticmap?path=color:0xff0000ff|weight:5|-22.91387,-43.232000|-22.91387,-43.231500|-22.91387,-43.231000|-22.91387,-43.230500 &zoom=14&size=512x512&maptype=hybrid&format=png&sensor=false” alt=”Exemplo de mapa estático 4” />
Como se pode ver não existem mistérios para se gerar mapas estáticos, porém é uma solução que ganha poder quando utilizada em conjunto com server side scripts e banco de dados. Todos o parâmetros podem ser modificados dinamicamente utilizando-se variáveis. Isso dá uma flexibilidade incrível ao recurso oferecido pelo Google.
As possibilidades de criação com mapas dinâmicos do Google Maps são tantas, que é impossível cobrir todas as funcionalidades em um tutorial. Para se ter uma idéia, é possível exibir posições (localizações) dinamicamente no mapa, gerando a sensação de movimento, à medida que um dispositivo móvel (smart phone, notebook, netbook, GPS e outros) envia dados de posição para um sistema de informação. Essa é uma das inúmeras aplicações que um mapa dinâmico pode ter.
Portanto, neste tutorial, vamos nos ater a gerar o mapa e exibir uma posição. Primeiramente, construiremos a nossa estrutura HTML e escolheremos um local para exibição do mapa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Como criar mapas do Google Maps</title> </head> <body> <div class="resultado"> <h1>Exemplo de mapa dinâmico</h1> <div id="map_canvas"></div> </div> </body> </html>
O mapa será gerado no interior do elemento <div>, identificado pelo id ‘map_canvas’. A classe ‘resultado’ será construída mais à frente, pois é ela quem dará estilo à exibição do HTML. Vamos ao JavaScript que criará o mapa.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-22.91387,-43.231031);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>
A primeira tag <script> carrega dos servidores do Google Maps o código-base que permite a criação e manipulação do mapa. A segunda tag <script> contém a função ‘initialize’ que será responsável pela criação do mapa e sua configuração. O objeto ‘latlng’ contém as coordenadas (latitude e longitude), já o literal de objeto ‘myOptions’ contém as configurações do mapa (zoom, center – centro do mapa e mapTypeId – tipo de mapa) e o objeto ‘map’ cria o mapa no local especificado(‘map_canvas’) e aplica as configurações do ‘myOptions’. O objeto ‘marker’ define o marcador no mapa.
Para que o mapa seja renderizado, é necessário inserirmos o código JavaScript anterior no elemento <head>, bem como inserirmos o evento ‘onload’ na tag <body>, o qual chamará a função ‘initialize’ assim que a página for totalmente carregada.
Abaixo, veja o código completo juntamente com CSS para aplicar o estilo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Como criar mapas do Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-22.91387,-43.231031);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>
<style type="text/css">
body {
text-align: center; /*centraliza no IE*/
}
.resultado {
width: 500px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.resultado h1 {
font-size: 1.3em;
background: #4682b4;
color: #fff;
border: 2px double #b0c4de;
}
.resultado #map_canvas {
width: auto;
height: 500px;
border: 1px solid #4682b4;
}
</style>
</head>
<body onload="initialize()">
<div class="resultado">
<h1>Exemplo de mapa dinâmico</h1>
<div id="map_canvas"></div>
</div>
</body>
</html>
Clique e veja o mapa dinâmico criado.
Este post apresentou as diversas formas de se gerar mapas com o Google Maps, porém as possibilidades não se esgotam por aqui. Existem inúmeros detalhes que ainda podem ser abordados para atender as mais diversas necessidades. E como as aplicações desta ferramenta são inúmeras, o limite vai até onde a imaginação permitir.
Espero que tenha sido útil e você tenha gostado. Este tutorial foi feito com muito carinho.
Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.
Abraço e até o próximo tutorial.
Feed RSS
Links Patrocinados
4 Comentários sobre "Como criar mapas do Google Maps para o meu site"
Pedro
30 de julho de 2011 às 17:57h
Muito bom este post, pois mostrou de forma detalhada como realizar os tipos de inserção de mapas em sites. Tks!
Leandro Silva
30 de julho de 2011 às 22:40h
Muito obrigado, Pedro!
Que bom que você gostou. Eu busquei dar uma visão abrangente para atender a todas as necessidades.
Até mais!
Miranda
16 de setembro de 2011 às 11:49h
melhor explicação de todas….
Leandro Silva
19 de setembro de 2011 às 22:57h
Obrigado, Miranda!
Perdão pela minha ausência. Estou envolvido em um projeto e praticamente estou na reta final.
Até mais!