Olá, amigos! Hoje vou buscar ser um pouco mais técnico no artigo abaixo.
Este artigo, por mais simples que seja, tende a ser uma das maiores dúvidas e desejos dos usuários que estão iniciando nesta área. Como colocar minha empresa, estabelecimento, casa etc., no mapa. Com certeza no seu site é muito importante existir além do endereço da sua empresa um pequeno mapa representando tudo que está em volta dela para que os usuários possam se localizar mais facilmente.
Nosso foco hoje é criar um mapa utilizando a API do Google Maps. Com isso, não precisamos de nenhum banco de dados geográfico ou qualquer outro tipo de aplicação para desenvolvimento de mapas além das linguagens HTML e JavaScript.
Segundo o próprio Google, o que é a API do Google Maps?
A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página da web. A API fornece diversos utilitários para manipular mapas (como na página http://maps.google.com) e adicionar conteúdo ao mapa através de diversos serviços. Você pode criar aplicativos de mapas robustos em seu site.
Passo 1: Obtendo uma chave para a API do Google Maps.
Para utilizarmos a API do Google, precisamos obter uma chave de identificação para o nosso site. É muito importante que você coloque a URL correta do caminho onde estará o mapa, caso contrário, ao instanciar a API no seu código, ela não funcionará.
Acesse o link : http://code.google.com/intl/pt-BR/apis/maps/signup.html, preencha as informações da URL do seu site e clique em GERAR chave de API. Não se esqueça de ler os termos de uso da API, nada de utilizá-la dentro de intranets.
Obs.: Você precisa ter um usuário cadastrado no Google para obtê-la.
Pronto, chave gerada, podemos ir para o próximo passo.
Passo 2: Obtendo o XY da sua empresa
Inicialmente, para identificarmos a sua empresa/estabelecimento/etc no mapa, precisamos da localização correta dela. A localização que comento é com relação ao seu XY. Mas o que é XY? Vamos à matemática…
Para a construção do modelo da superfície topográfica de uma dada região, necessitamos das triplas (x, y, z) de uma série de pontos da superfície do terreno. Os valores (x, y, z) são as coordenadas cartesianas de um ponto P, relativas a um sistema de coordenadas preestabelecido (como já vimos em meu outro artigo Sistemas de Informação Geográfica).
O plano XY é o plano horizontal de referência relativamente ao nível médio dos mares, e z é a distância vertical do ponto P ao plano horizontal XY (se me permitem exemplificar desta maneira, seria a altura em relação ao nível do mar, no nosso caso, não será necessária).
Como posso obter este ponto?
Existem diversas maneiras de se obter o XY de um endereço, vou exemplificar duas: a primeira é suscetível a alguns erros, motivo pelo qual o mapeamento da numeração das ruas nas cidades do Brasil não ser de fato correto (mas confesso que é satisfatório). O que quero dizer é que muitas vezes quando você informa o seu endereço, por exemplo o número 567, seriam 567 metros do ponto inicial da sua rua, nem sempre esta numeração irá bater exatamente no local da sua casa (quando digo exatamente, ainda considero um erro de 50m). Pode acontecer de aparecer na quadra errada; quando ocorrer, sugiro utilizar o segundo exemplo de aquisição do XY.
A primeira maneira que me refiro é solicitar através da url http://maps.google.com/maps/geo?q=STRING+DO+ENDERECOoutput=xmlkey=SUA_CHAVE
Obs.: Separe a string com “+”.
Exemplo:
http://maps.google.com/maps/geo?q=avenidaipiranga1200portoalegrersbrasiloutput=xmlkey=
Exemplo da resposta (response) em XML:
Pronto, seu XYZ é a coordenada <coordinates>-51.2093204,-30.0451247,0</coordinates> .
Agora você pode pular o segundo exemplo e ir direto ao passo 3, mas antes vamos verificar se o ponto está mesmo no local correto.
Acesso o seguinte link:
http://maps.google.com.br/maps?f=qsource=s_qhl=pt-BRgeocode=q=(-30.0451247,-51.2093204)
OBS: Lembre-se de alterar a ordem dos pontos XY <-> YX
A segunda maneira de se obter as coordenadas XY é implementar um outro exemplo utilizando a API do Google Maps. Chamamos este exemplo de Geocode Reverso (através de um clique no mapa iremos obter as informações quanto a este local).
O exemplo abaixo está presente na página da API do Google Maps, mantive-o como o qual para explicar cada linha.
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Reverse Geocoder</title>
<script src="http://maps.google.com/maps?file=apiv=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
var address;
function initialize() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-30.0270583,-51.2303402), 10);
map.addControl(new GLargeMapControl);
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}
function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function showAddress(response) {
map.clearOverlays();
if (!response response.Status.code != 200) {
alert("Status Code:" response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
'<b>orig latlng:</b>' response.name '<br/>'
'<b>latlng:</b>' place.Point.coordinates[1] "," place.Point.coordinates[0] '<br>'
'<b>Status Code:</b>' response.Status.code '<br>'
'<b>Status Request:</b>' response.Status.request '<br>'
'<b>Address:</b>' place.address '<br>'
'<b>Accuracy:</b>' place.AddressDetails.Accuracy '<br>'
'<b>Country code:</b> ' place.AddressDetails.Country.CountryNameCode);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px"></div>
</body>
</html>
Você já viu um exemplo da resposta (response) em XML no exemplo anterior.
Exemplo da resposta (response) em JSON:
Através dos arquivos acima, você consegue identificar quais as variáveis necessárias para obter os dados do geocode.
Por fim e não menos importante, o corpo do HTML:
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px"></div>
<div id="temp"></div>
</body>Não se esqueça de utilizar o ONLOAD para chamar a função initialize() para tão logo carregar a página iniciar o procedimento da criação do mapa. Não quero ver ninguém comentando que o mapa não aparece!
Pronto, agora navegue no mapa, procure o endereço da sua empresa (ainda não criamos uma barra de pesquisa de endereço, nos próximos artigos irei explicar como), clique no local e copie as informações da linha latlng.
Agora temos o XY para continuar no nosso artigo.
Passo 3: Adicionando minha empresa no mapa
Bom, se você já criou o exemplo anterior do geocode reverso, este agora é muito mais simples. Caso contrário, vamos lá passo a passo.
Vamos ao código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Markers</title>
<script src="http://maps.google.com/maps?file=apiamp;v=2amp;key=
ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
// Instância a API do Google e a adiciona na DIV map.
var map = new GMap2(document.getElementById("map"));
// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom , Zoom -, barra de Zoom, etc)
map.addControl(new GLargeMapControl);
// Padronizamos o XY de acordo com o latlng da API: (Y,X)
var latlng = new GLatLng(-30.0451247,-51.2093204);
map.addOverlay(new GMarker(latlng)); // Adiciona o marker no mapa
}//if
}//function
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
OBS: Não se esqueça de trocar a sua chave da API. Não se esqueça de declarar o ONLOAD, para que a função initialize(), no meu exemplo, crie o mapa assim que a página seja carregada.
Resultado
Caso você queira incrementar o seu mapa e adicionar um evento de clique no marker, façamos algumas modificações no código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Markers</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
// Instância a API do Google e a adiciona na DIV map.
var map = new GMap2(document.getElementById("map"));
// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom +, Zoom -, barra de Zoom, etc)
map.addControl(new GLargeMapControl);
// Padronizamos o XY de acordo com o latlng da API: (Y,X)
var latlng = new GLatLng(-30.0451247,-51.2093204);
var marker = new GMarker(latlng); // Criamos um marker referenciado a uma variável
// Criamos um evento para ao se clicar no marker
GEvent.addListener(marker, "click", function() {
// Abrir um InfoWindow com o seguinte texto
marker.openInfoWindowHtml("Endereço da minha empresa! <br/> <strong>;)</strong>");
});
map.addOverlay(marker); // Adiciona o marker no mapa
}//if
}//function
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Pronto!
Podemos incrementar este exemplo de diversas formas, até mesmo com ícones customizados. Estou aceitando sugestões para novos artigos técnicos.
Até a próxima.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?