Integrar o Google Maps em sua aplicação

Logo da Google Maps

Mesmo sendo desenvolvedor back-end, há momentos em que trabalho com o front também. Não sou especialista em HTML5, CSS3, jQuery e etc, mas acho interessante o nível de experiência passada ao usuário quando utilizamo-os. Hoje quero compartilhar com vocês um plugin que utilizei recentemente em meu ambiente de trabalho: O Gmap3. Ele é um ótimo plugin em jQuery para integrar os serviços do Google Maps a sua aplicação. Vamos lá então?

 

Começamos com os arquivos a ser importados. É imprescindível o uso do jQuery, portanto baixe-o e importe na sua aplicação. Também é obrigatório a importação da API do Google Maps, que você pode baixar ou simplesmente fazer o link para o arquivo online. Os links devem ficar assim: (estou utilizando o jQuery localmente e a API do Google Maps online no exemplo abaixo) :


 

Obs.: Não esqueça de trocar o caminho dos arquivos se necessário.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>

 

Após isso, começamos a mágica. Importemos agora o Gmap3: (baixe-o aqui)

<script type="text/javascript" src="gmap3.js"></script>

 

Pronto, agora você já está habilitado a utilizar o plugin. Primeiramente, você deve criar a área onde vai ser apresentado o mapa em sua aplicação. Crie uma div no corpo da página e (obrigatoriamente) coloque um id nela.

<div id="mapa"></div>

É aí que seu mapa vai ser introduzido.

 

Neste ponto só falta a parte do plugin. Copie e cole, após os links dos arquivos JS o seguinte código:

<script type="text/javascript">
    $().ready(function(){

        $("#mapa").width("600px").height("350px").gmap3();

        $('#mapa').gmap3({
            map:{
                options:{
                    center: [-30.03011, -51.23184],
                    zoom: 16
                }
            },
            marker:{
                latLng: [-30.03011, -51.23184]
            }
        });
    });
</script>

 

Este é o código completo da sua página até o momento (com toda estrutura HTML também):

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
    <script type="text/javascript" src="gmap3.js"></script>
    <script type="text/javascript">
    $().ready(function(){

        $("#mapa").width("600px").height("350px").gmap3();

        $('#mapa').gmap3({
            map:{
                options:{
                    center: [-30.03011, -51.23184],
                    zoom: 16
                }
            },
            marker:{
                latLng: [-30.03011, -51.23184]
            }
        });
    });
    </script>
</head>
<body>
    <div id="mapa"></div>
</body>
</html>

 

Se você rodar seu código agora, verá um belo mapa apontando para a Rua dos Andradas, aqui no centro de Porto Alegre. Veja abaixo:

modelo-google-maps-1

Mas como isso tudo funciona? De nada adianta copiar e colar se não entender o processo por trás disso tudo. Portanto, continue lendo 🙂

Linha 10: Aqui estamos definindo, via jQuery, as propriedades de largura e altura da div onde vai ficar o mapa, defina-as como preferir.

Linha 12: Iniciando a função do Gmap3 sobre a div criada. Vamos brincar agora!

Linha 13: Iniciando o ‘map‘, parte onde é definido o que seu mapa vai mostrar.

Linha 14: As ‘options‘ padrões são duas:
Linha 15: em ‘center‘, defina a latitude e longitude, exatamente nesta ordem, e separadas por vírgula, do local que você quer apresentar.
Linha 16: em ‘zoom‘, você deve dizer o nível de proximidade (zoom, como o nome já diz) do ponto que você referenciou antes. Quanto maior o zoom, obviamente mais focado fica o mapa.

Linha 19: Inicia o marcador do mapa. Isto é opcional, sem ele o mapa continua funcionando, mas com ele o ponto que você quer indicar fica com aquela setinha vermelha padrão do Google Maps apontando para o local. O ponto exato do marcador você passa como parâmetros sobre o ‘latLng‘, na linha 20.

 

Prontinho. Nesse ponto seu mapa deve estar funcionando perfeitamente. Experimente trocar os parâmetros de latitude e longitude, o nível de zoom, e veja como fica. Para descobrir a latitude e longitude do lugar que você quer indicar, acesse o próprio Google Maps e ative o recurso clicando no link “Labs do Google Maps” .

 

MAPA A PARTIR DE UM ENDEREÇO

 

Digamos então que você não quer se preocupar em buscar a latitude e longitude de um lugar, mas apenas passar seu endereço em forma de texto. Sem problemas! A função muda um pouco, mas é tão simples quanto a de cima. Veja:

$('#mapa').gmap3({
    map: {
        options: {
            maxZoom: 16
        }
    },
    marker:{
        address: "rua dos andradas, Porto Alegre",
        options: {
            icon: new google.maps.MarkerImage(
                "http://gmap3.net/skin/gmap/magicshow.png"
            )
        }
    }
},
"autofit");

 

Agora o mapinha ficou desta forma (repare no ícone de marcação do endereço)

modelo-google-maps-2

 

Explicando apenas o que ficou realmente diferente:

Linha 8: Ao invés de coordenadas de latitude e longitude, aqui você define por escrito o endereço (rua, número, cidade, estado, país… como desejar) do local que vai o mapa vai focar.

Linha 10: em ‘options‘, agora há a opção “ICON”, onde você pode colocar uma imagem à sua escolha para marcar o lugar que está descrito no “address”, logo acima. Para o exemplo, utilizei uma imagem do próprio Gmap3, mas você pode criar uma se achar necessário.

Linha 16: O “autofit” é da própria função, e é obrigatório. Se for omitido, a função deixa de funcionar.

 

Para um maior domínio sobre o plugin, sugiro que acesse o site http://gmap3.net/ e dê uma olhada na documentação. Exemplifiquei aqui duas das mais básicas formas de apresentar um mapa, mas com a documentação em mãos você vai perceber o quanto o plugin é poderoso e como você poderá personalizar seus mapas de mil e uma formas.

 

Observação Importante: Os exemplos usados aqui foram feitos da forma mais simples possível, não indico colocar as funções javascript na própria página que são carregadas, mas isso fica a gosto e organização de cada um. Espero que tenham gostado do plugin e que tenham facilidade para utilizar o mesmo. Se precisarem, estou disponível nos comentários para ajudar na integração dele com sua aplicação!

 


Marcado com: , ,
Publicado em Desenvolvimento, Plugins
  • Aline Meira

    oi ricardo, tudo bem?
    tenho uma dificuldade. no lugar onde vai a lat. e long. eu tenho duas strings php que puxam os valores do banco de dados. coloquei as strings no lugar da lat e long mas não deu certo. aparece só o mapa mundi e não o endereço do lugar. vc pode me ajudar, mesmo depois de muito tempo do seu post?

    tentei colocar o código aqui mas a parte em php não aparece 🙁

    obrigada desde já

    • Ricardo Brusch

      Olá Aline!

      Primeiramente, obrigado pela leitura e pelo contato.

      Misturar PHP com JAVASCRIPT, apesar de totalmente possível, não é muito indicado. Mas claro, dependendo da situação, não vale a pena fazer “toda uma volta” só pra não misturar as linguagens. Costumo dizer que as boas práticas estão aí para ser usadas, mas também não compensa matar uma formiga com uma bomba atômica só para dizer que se utilizou um pattern, por exemplo. Tudo depende do tamanho do projeto, da aplicação e também do retorno deste.

      Bom, falando diretamente do teu caso agora, sugiro algumas verificações:

      1 – As strings estão realmente vindo do banco de dados?

      2 – Tente dar um echo fora do javascript nas strings de Latitude e Longitude e observe se elas aparecem conforme você espera.

      3 – Observe se você está imprimindo as strings com ou sem aspas (duplas ou simples, tanto faz). O Gmap3 pede que as coordenadas de latitude e longitude sejam passadas como dados do tipo Int, portanto se você estiver passando com Aspas, identificando realmente como String, pode causar algum conflito interno na biblioteca.

      Se precisar postar algum código para exemplo, sugiro também utilizar o http://pastebin.com/ , para facilitar =)

      Espero ter ajudado de alguma forma, e boa sorte com sua integração =D

      • Aline Meira

        Obrigada pela atenção.
        Na verdade o caso aqui é assim: a página que estou trabalhando mostra os detalhes do imóvel (é um site de imobiliária), e no lugar da localização eu utilizo um mapa com iframe que tá funcionando. o problema é que nesse mapa que aparece a localização, não tem o bonequinho do google, o pegman que vc arrasta e abre o street view. aí eu queria que ele aparecesse no mapa tbm. por isso testei o seu post e como disse até apareceu o mapa com o pegman mas a localização não. 🙁
        na primeira imagem mostra o mapa como ele aparece hj, inserido com iframe.
        na segunda mostra como tá o meu código agora.

        • Ricardo Brusch

          Aline, entendi.

          Verifica no código fonte renderizado (apertando CTRL+U no navegador) se as variáveis $g1 e $g2 estão sendo impressas corretamente. Como você disse que aparece o mapa mundi no primeiro post, é bem possível que a latitude e longitude não estão sendo carregadas.

          Uma dica: experimente, por garantia, utilizar a sintaxe completa da abertura de código PHP ( ) ou, se você tem certeza que as short tags estão habilitadas em seu servidor, tente utilizar ( ).

          Em muitos servidores (dependendo da configuração) a sintaxe , sem o IGUAL ou sem o “php” não renderiza corretamente.

          Me informe o andamento ai, e boa sorte =D

          Att.

          • Aline Meira

            Obrigada pela ajuda.
            tentei a sugestão que vc me deu mas mesmo assim não funcionou. Quando vi o código fonte no navegador, vi que não estava aparecendo os dados de lat e long.
            as modificações que fiz foram essas:
            coloquei o script logo antes do onde iria aparecer o mapa, e tirei a string que puxa o nome do código do imóvel. aí deu certo 😀
            fica como na imagem abaixo:

            MUUUUITO OBRIGADA PELA AJUDA!!!

        • Ricardo Brusch

          Esqueci que não renderiza código PHP aqui huehuehueuhe… Segue modelos abertura completa e de short tag do PHP (o que deveria ficar entre parênteses na resposta anterior)

          http://pastebin.com/wCp0nf8C

Volte Sempre!
Meus artigos te ajudaram de alguma forma e você não sabe como me agradecer? Que tal me pagar uma Coca-Cola bem gelada?

Sobre o autor

Me chamo Ricardo Brusch, sou programador e desenvolvedor de sistemas para internet. Também sou aspirante a escritor, e você pode ler alguns de meus contos malucos em contos.ricardobrusch.com.br.
Parceiros





Publicidade