Insira um mapa dinâmico em seu site

Publicado por renansoloaga em Ajax, Destaque, Geo programação - 18 de agosto de 2009 | Uma resposta
 Insira um mapa dinâmico em seu site

Por mais que a realidade virtual  esteja se tornando opressivamente constante no nosso cotidiano, a presença física e a localização da sua empresa nunca deixarão de ser importantes na conquista da credibilidade do visitante do seu website. E todos sabemos que a credibilidade é um dos fatores primordiais na decisão da compra/conversão[?] pelo usuário, e ainda mais se o ambiente é online, ou seja, o seu site. Neste post entenderemos como inserir um mapa em seu site, clique aqui para ver o resultado que alcançaremos com este tutorial.

Para resolvermos esta situação e oferecermos uma relação com o máximo conforto psicológico para o cliente/usuário podemos lançar mão de um recurso antigo, mas que se tornou uma ferramenta poderosa e de acesso popular nunca antes alcançado, o mapa, ou melhor, o mapa interativo.

Para ser mais exato ainda, o mapa interativo do Google. Sim, mais uma vez ele, que absorveu tecnologias de empresas menores e incorporou idéias que resultaram na ferramenta Google Maps, que vêm oferecendo há um certo tempo soluções práticas de Geo programação.

Quanto à realidade virtual, o mapa interativo se mostra cada dia mais útil, ajudando o usuário a descobrir como chegar em seu estabelecimento. Para quem tem este interesse, o caminho a seguir é simples e pode ser realizado em cinco passos (ou se prefirir ou clique aqui para fazer o download deste exemplo):

  1. Inscreva-se para uma chave API do serviço Google Maps, clique aqui para fazê-lo. O processo é simples e gratuito, porém é necessário informar o domínio no qual deseja instalar o mapa,  pois a chave é única para cada um. No fim do processo o Google te fornecerá um código parecido com este: 
    ABQIAAAArwSgps1dZZSxHzRot2vCXBQtNN_Vl8pnwDOYZMkKLSt7wyl7-RTeylj2nsf1gWue2JlPmP0dL45m6w

    Guarde este código, pois ele será necessário no quarto passo.

  2. Crie um documento .html ou qualquer linguagem que prefira, ou simplesmente abra um que já exista em seu site, como a página “Contato”. Neste documento será necessário inserir o seguinte código que definirá o estilo entre as tags <head> e </head>: 
    #mapa {
 width:710px;
 height:480px;
 margin-left:20px;
 border: solid 4px #EFEFEF;
}
  3. Após definir o estilo do elemento será necessário posicioná-lo dentro do documento. Encontre o lugar onde deseja colocar o mapa e insira o seguinte código: 
    <!-- MAPA -->
<div id="mapa"></div>
<!-- FIM DO MAPA -->
  4. O “espaço” para o mapa já está definido, agora vamos inserir o script oferecido pelo Google para exibir o mapa. Este modelo foi montado devido a necessidade padrão de um mapa dinâmico, porém o Google oferece inúmeras variedades de exibição, que podem ser exploradas na documentação do sistema, clique aqui para conhecê-las. Caso o modelo que você pode encontrar aqui atenda suas necessidades, o código abaixo será últil.  Insira o seguinte código entre as tags <head> e </head>: 
    <!-- SCRIPT DO GOOGLE MAPS -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAArwSgps1dZZSxHzRot2vCXBQtNN_Vl8pnwDOYZMkKLSt7wyl7-RTeylj2nsf1gWue2JlPmP0dL45m6w" type="text/javascript"></script>
<!-- NO CAMPO ACIMA É INSERIDA a CHAVE API DO GOOGLE MAPS -->
<script type="text/javascript">
//<![CDATA[
var WINDOW_HTML = '<div id="info_mapa"><strong>NOME DO PONTO</strong><br />INFO ADICIONAL</div>';
<!-- A VARIÁVEL ACIMA var WINDOW_HTML É O CONTEÚDO DA JANELA QUE SE ABRE AO CLICAR NO ÍCONE -->
 function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("mapa"));
 <!-- NOTE QUE A ID DO SEU MAPA DEVE SER COLOCADA NO CAMPO ACIMA -->
 map.setCenter(new GLatLng(48.870747, 2.330231), 16);
 <!-- ACIMA INFORMAMOS A LATITUDE E LONGITUDE (lat, long) DO CENTRO DO MAPA E O NÍVEL DE ZOOM (16) -->
 map.addControl(new GSmallMapControl());
 var marker = new GMarker(new GLatLng(48.870747, 2.330231));
 <!-- ACIMA INFORMAMOS A LATITUDE E LONGITUDE (lat, long) DO ÍCONE QUE REPRESENTA O SEU ESTABELECIMENTO -->
 map.addOverlay(marker);GEvent.addListener(marker, "click", function() {    marker.openInfoWindowHtml(WINDOW_HTML);  });  return marker;
 }
 }
//]]>
</script>
<!-- FIM DO SCRIPT DO GOOGLE MAPS -->

    Note que há comentários no script que podem ajudá-lo. Outra informação que vai ajudá-lo está presente no post “Encontre a latitude e longitude de qualquer endereço“, pois note também que é necessário saber a latitude e longitude do seu estabelecimento e informá-las no script.

  5. Agora só é necessário inserirmos o elemento que aciona o script,  ou seja, o gatilho do script. Este “gatilho” é na verdade a tag <body> alterada. Ex.: 
    <body onload="load()" onunload="GUnload()">

Tendo cumprido estas etapas, só falta testar o seu mapa. Publique seu arquivo na internet ou teste localmente. Para checar se a estrutura do seu documento está correta, você pode compará-la à este modelo, ou se preferir clique aqui para fazer o download deste modelo.

Espero que este post tenha sido últil. Em breve postarei um tutorial para construir um mapa com múltiplas marcações, ou seja, será possível mostrar todos os seus estabelecimentos no mesmo mapa. Caso conheça algum método mais prático ou similar,  por favor compartilhe conosco.

Compartilhe este post:

Digg this ! So delicious Stumble it! Lendo post Insira um mapa dinâmico em seu site




Uma resposta para “Insira um mapa dinâmico em seu site”

  1. Sérgio Soares disse:
    1 de setembro de 2009 às 10:40

    Excelente Artigo.
    Muito bem explicado

    Continuação de um bom trabalho!

Deixe um comentário