Google Maps (GMaps) + PHP + JQuery – Adicionando Marcadores Customizados

Renderizando um Mapa (Google)  com marcadores customizados, adicionando os locais por CEP, Endereço, Latitude + Longitude …

Esse Post foi movido para :

http://clares.com.br/2012/03/02/google-maps-gmaps-php-jquery-adicionando-marcadores-customizados/

Desculpe pelo transtorno, aproveite para assinar o novo blog.

Marcado:, ,

52 pensamentos sobre “Google Maps (GMaps) + PHP + JQuery – Adicionando Marcadores Customizados

  1. NELSON COSTA março 2, 2012 às 1:25 am

    Caramba…tu não é fraco não.
    Ficou muito legal.
    Parabéns.
    Pretendo utilizar isso futuramente para mapear locais de crime para ver onde está havendo maior incidência.

  2. Ernesto março 3, 2012 às 2:24 pm

    PERFEITO
    Solução super útil. Obrigado pelo compartilhamento.

  3. Ernesto março 3, 2012 às 4:59 pm

    Rafael,
    Estou trabalhando em um site de imobiliária e achei esse seu artigo fantástico para atender ao pedido do clientes que é mostrar o mapa com todos os imóveis da cidade à motra.
    Porém, teria que montar pegando a latitude e a longitude plo endereço, pois eles não cadastram o cep para evitar o possível cliente ir negociar com o dono do imóvel.
    Meu banco é o postgre o icone a mostrar no mapa seria a miniatura da imgem prinipa do imóvel.
    Obrigdo novamente pela imensa ajuda.

    • Rafael Clares março 7, 2012 às 2:47 pm

      Ernesto, cara não entendi rs rs rs
      Endereço ou Cep, não dá no mesmo ?
      O Cep é aponta para o nome da rua!
      Agora o que você pode fazer é orientar o cliente para colocar ruas próximas e não a do imóvel;
      Quanto ao ícone, bem, o ideal é que seja um ícone pequeno porque quando a quantidade de imóvel aumentar vai ficar confuso pelo tamanho dos ícones se você colocar a foto do imóvel;
      O ideal é você colocar a foto no “balãozinho” evento ao clicar no ícone. De toda forma, boa sorte!
      Abraços

  4. alexandre março 7, 2012 às 2:18 pm

    cara ficou muito bom,
    porem, tem algum limite no numero de endereços??
    tenho um banco com 140 endereços com rua, numero, cidade, estado,
    porem quando coloco numa query com os endereços, ele me retorna 42
    essa é minha query
    while ($end = mysql_fetch_array($query)){
    $endereco = $end[‘ENDERECO’] . ‘, ‘ . $end[‘CIDADE’] . ‘, ‘ . $end[‘UF’];
    $fantasia = ‘” ‘ . $end[‘FANTASIA’] . ‘”‘;

    //$gmaps->addMarkerAddress( $endereco,$fantasia,”franquia”);

    }
    muito obrigado

    • Rafael Clares março 7, 2012 às 2:57 pm

      Fala Alexandre, cara precisa ver o seguinte:
      – se os endereços são realmente válidos, digo, bairro e rua corretos;
      – se não são distantes e por esse motivo não fica enquadrado no zoom inicial, tentar diminuir o zoom após renderizar o mapa para ver se exibe os demais;
      – verificar se o JSON retornado contém 140 entradas;

      Se o JSON não estiver com as 140 entradas é porque alguns endereços podem estar incorretos.
      Se o JSON tiver as 140 entradas pode ser que o zoom esteja inibindo os demais icons ou estejam sobrepostos.

      Você pode contar as entradas fazendo o seguinte:

      Após a sua query / depois do while coloque essa linha abaixo

      echo count($gmaps->markers); exit;

      Depois acesse diretamente o arquivo que possui a query, o arquivo que deveria ser o markers.php

      Assim você saberá quantos endereços foram encontrados;

      abraços

  5. Sergio março 12, 2012 às 7:51 pm

    Boa tarde Rafael, em primeiro lugar gostaria de parabeniza-lo pelas dicas aqui disponibilizadas…
    Em segundo lugar, procurei aqui um contato seu de email mais nao achei.. é que tenho um job parecido com o deste post: Google Maps (GMaps) + PHP + JQuery – Adicionando Marcadores Customizados, vou deixar aqui meu email e espero que me retorno o quanto antes para conversarmos melhor.
    sethomaz@gmail.com

    abcs
    Sergio Thomaz.

  6. Samuel Mendes abril 5, 2012 às 2:36 pm

    Rafael, muito legal sua iniciativa de manter um blog com tanta informação rica. Olha que legal, eu estava procurando entender de XML por conta de estar precisando usar o google maps para um sistema de um cliente. Assim, eu estava lendo a documentação no Google. E observando seu post sobre xml eu achei tão legal que fui dar uma andada no seu blog e aí pinba! Vi este post sobre o maps. Só para constar, eu estou começando uma vida nova profissional agora e decidi junto com um amigo a trabalhar com programação e desenvolver sites. Realmente gosto muito, mas estou tendo muitas dificuldades. Estou focando em PHP e Mysql. E estou tendo uma enorme necessidade em Jquery. Como você poderia me ajudar a desenvolver melhor didaticamente? Quando vc vai aprender algo, qual é a melhor metodologia?Hehe. Foi mal aí pelo testamento e parabéns pelo Blog. Cara meu msn é o samuelmenddes@hotmail.com

    • Rafael Clares abril 7, 2012 às 8:57 pm

      Fala Samuel, cara obrigado pelo comentário, fico feliz que o blog tenha lhe servido!
      Pois é, o gmaps, bem legal mesmo, fiz um sisteminha bem legal com ele, veja :
      http://xtends.com.br/xmaps/

      Quanto a a metodologia, cara, sinceramente, a única forma eficiente que eu encontro para aprender algo é pesquisando, insistindo, testando, tentando criar algo do zero (sem copiar tudo).
      Não tenho nenhum ritual, é preciso realmente querer ou precisar do que se quer aprender, tempo, bastante tempo e dedicação.
      Eu não compro livros e nem me matriculo em cursos, apenas leio os manuais das linguagens de programação e manuais de APIs são muito importantes também de se ler.
      O Jquery por exemplo é possível obter todas as informações necessárias na documentação online, assim como o PHP.

      Boa sorte e abraços,

  7. Cristian Gunsch Moura abril 11, 2012 às 5:55 pm

    Ae cara. bele?

    véio, vc é muito foda .. nem em anos ia ocnseguir fazer aquele sódigo q vc fez !!
    To querendo aprende a usar o Google maps e acabei achando o seu projetinho. fiz um XML mais silmple sque o seu..
    quero dar as coordenadas.. e di a aplicação pegar essas posições e plotar no mapa, mas não consigo nem fudendo fazer isso funcionar, esse ´o meu xml q to usando

    fiz as alterações q vc falou, mas não consegui resolver o problema.. vc poderia me dar uma mão aí ?

    mudei
    public function loadFromXML($url)
    {
    if (file_exists( $url )) {
    $xml = simplexml_load_file( $url );
    } else {
    exit(‘Failed to open test.xml.’);
    }
    $count = 0;

    print_r(“_______________________________________________________________________________”);
    foreach( $xml->maker as $marker ){

    $latlon = array( ‘latitude’ =>(string)$marker->attributes()->lat, ‘longitude’ => (string)$marker->attributes()->lng );
    $this->markers[$count] = $latlon;
    $count++;
    print_r($latlon);
    }

    }

    public function getMarkers()
    {
    $markers = “[“;
    foreach( $this->markers as $marker )
    {
    $marker = (object) $marker;
    $markers .= “{latitude:$marker->latitude,longitude:$marker->longitude,”;

    // $markers .= “{latitude:$marker->latitude,longitude:$marker->longitude,html:$marker->html,icon:$marker->icon},”;
    //$markers .= “},”;
    }
    $markers .= “]”;
    //echo trim($markers);
    echo stripslashes ( preg_replace(array(‘/\”/’),array(”),json_encode($this->markers)) );
    }

    acho q o problema tá no java script, mas não to sacando nada daquele java script feito pelo Cedric Kastner

    obrigado

    ps: se puder me ajudar ficaria muito agradecido.. to aprendendo a usar php e js

    • Cristian Gunsch Moura abril 18, 2012 às 12:58 pm

      Já consegui resolver !!!
      só tirando os print_r()
      o/

      • Rafael Clares abril 22, 2012 às 2:48 am

        Aê garoto! Sucesso aê! abs

  8. cesar maio 2, 2012 às 2:04 pm

    Rafael, ficou ótimo cara. Muito completo e super útil.
    Tentei fazer algo simples e não consegui de jeito nenhum: Armazenar $gmaps->getMarkers() em uma variável. Por que não dá?

    • Rafael Clares maio 8, 2012 às 3:20 pm

      Cesar, o método getMarkers() dá um “echo” no valor, você precisa mudar esse método para retornar o valor ao invés de printa-lo, basta alterar a linha:
      echo trim( $markers );
      para
      return trim( $markers );

      No fim do método getMarkers();

      • cesar maio 13, 2012 às 12:27 am

        Obrigado Rafael!

  9. Erick maio 14, 2012 às 8:40 pm

    Tenho a seguinte dúvida:

    Como fazer pra filtrar os resultados por categoria? :|

    Quase como é no seu projeto, mas ali quando clica na categoria ele esconde essa categoria.

    Quero que quando clicar na categoria específica ele mostre apenas marcadores dessa categoria.

    tem como ajudar? :|

    Estou criando um sisteminha de reclamações baseado neste aqui: “http://cidademeionorte.com/”

  10. jose cerejo maio 15, 2012 às 6:59 pm

    Boa tarde Cristian, queria saber se tem como disponibilizar o código do xmaps?

    obrigado, desde já.

    • Rafael Clares maio 15, 2012 às 11:23 pm

      Jose, infelizmente o código não está disponível para download, está à venda por R$ 250,00;
      abs

  11. jose cerejo maio 17, 2012 às 12:22 pm

    Ok, obrigado na mesma e continua com este excelente blog, Parabens.
    Mas já agora posso perguntar como fizeste para inserir aquela funcionalidade de selecionar o que se pretende ver?

  12. jose cerejo maio 21, 2012 às 4:10 am

    oi, podes me dar uma ajuda? consigo buscar os dados do banco mas como faço para os enviar para a api do google? Tenho cerca de 700 pontos a marcar e não funciona.
    Pode me dar uma ajuda? Pode me enviar um exemplo para ler no banco e enviar para a api?
    quando eu entro direto no markers.php a informação está certa a string está bem montada mas tem uma virgula na ultima antes de fechar com ].
    estou com muita dificuldade para fazer isso mas não estou conseguindo e porque sou novato nisto mas preciso fazer é para meu trabalho me comprometi e agora não consigo incluir os marcadores, me dá uma ajuda por favor.
    Me manda um exemplo.

    • Rafael Clares maio 23, 2012 às 9:13 pm

      Jose, você precisa, talvez, remover essa vírgula que está sobrando, tente usar esse comando na string resultante do markers.
      No método getMarkers, coloque antes de
      echo trim( $markers );
      o comando
      $markers = preg_replace(‘/},]/’,’}]’,$markers);

      dai fica assim:

      $markers = preg_replace(‘/},]/’,’}]’,$markers);
      echo trim( $markers );

      Isso irá remover essa vírgula

      • jose junho 1, 2012 às 3:03 am

        Oi, obrigado e eu de novo aqui a perguntar, resolvi o problema da virgula, mas preciso fazer uma pergunta quem sabe uma pergunta bastante de novato, mas lá vai, como faço para enviar os dados para a api?

        é que o echo é para imprimir, certo? Qual a funcão a utilizar para enviar json ($markers) para o maps?

        desculpa todas estas perguntas e obrigado desde já.

      • Rafael Clares junho 5, 2012 às 4:58 pm

        Jose, quando usamos o termo enviar, não necessariamente estamos falando de uma forma de transportar os dados, nesse caso, dizemos que o echo envia os dados para a API porque a API está consultando um arquivo que através do echo retorna os dados esperados. É sempre bom dar uma olhada na documentação da API, as vezes você encontra uma forma mais simples de fazer o que deseja.

  13. Fabiano Lima julho 17, 2012 às 3:44 pm

    Show de bola, parabéns pelo seu trabalho

  14. nallaworks julho 20, 2012 às 8:04 pm

    Opa!! Muito bom o post estou com um problema com Overlays tenho vários pontos no mesmo lugar será que da para adaptar a seu script para tratar os pontos como nesse site

    http://jawj.github.com/OverlappingMarkerSpiderfier/demo.html

    Valew

    • Rafael Clares agosto 1, 2012 às 3:49 pm

      Brother, não me aprofundei no assunto ainda, vi só o básico e compartilhei o que vi.
      Tenho um projeto para começar e talvez utilize overlays, depois comento sobre o assunto.

  15. Paulo Sergio agosto 2, 2012 às 4:15 pm

    Amigo, muito bom seu tutorial. Seu código esta sendo bastante útil pra mim aqui.
    Gostaria de saber uma coisa, como faço para adicionar um link dentro do balão de texto do marcador?

    • Rafael Clares agosto 13, 2012 às 2:01 pm

      Paulo, basta adicionar o conteúdo do balão em HTML. Assim como você adicionar texto puro pode adicionar HTML. Ex: “foo

  16. Allan Riffert agosto 13, 2012 às 12:03 am

    Opá cara td blz?
    1º queria parabenizar tú pelo trabalho

    só que eu não to conseguindo baixar os fonte, meu email é riffert.allan@gmail.com

    • Rafael Clares agosto 13, 2012 às 1:55 pm

      O servidor estava fora/off, tente novamente!

  17. Renato Nascimento setembro 10, 2012 às 7:59 pm

    Excelente Clares!
    Você poderia me prestar um auxílio?
    Tenho uma aplicação, desenvolvida de forma procedural, com cadastros de propriedades rurais pela latitude/longitude.

    Como eu editaria uma função na classe que você dispôs, de modo que, clicando num link, fosse exibido a localização da propriedade com um ícones destes?

    Grato
    Renato

    • Rafael Clares setembro 17, 2012 às 8:12 pm

      Renato, cara aí está mais fácil, se você já tem os dados no banco, o que precisa é renderizar o mapa com esses dados.

      Veja esse exemplo muito simples, onde você só precisa passar lat/lon;

      http://gmap3.net/api/add-marker.html

      Você pode baixar esse plugin em : http://gmap3.net/download.html

      Daí o que você pode fazer é o seguinte:
      – Quando clicar no link, se for mudar de página, você coloca esse trecho do próprio exemplo na página que será carregada.
      Se não for mudar de página (jquery/ajax) você pode criar uma function em js que recebe lat/lon e gera o mapa,exemplo utilizando outro plugin(http://gmap.nurtext.de/examples.html):

      function AddMarker(lat,lon)
      {
      $(“#map1”).gMap({ markers: [{ latitude: lat,
      longitude: lon }] });

      }

  18. Ruslan Queiroz setembro 17, 2012 às 12:51 pm

    Excelente!!!!
    Como posso fazer um mapa personalizado como o Link
    Onde eu click na opção e no mapa me mostra o PIN
    Aqui: http://www.cps.edu/Schools/Find_a_school/Pages/schoollocator.aspx

  19. Rudy outubro 1, 2012 às 12:32 pm

    Muito bom seu post, Parabéns!!
    Estou estudando e tentando entender ele, tudo funciono perfeitamente, até que tentei carregar o mapa com pontos de lat e long do arquivo xml, mas quando tento fazer isso, nada acontece.
    – No arquivo markers.php comentei todos os trachos, menos o # Carregar de XML
    – No arquivo gmaps.class.php comentei a linha 80 ($latlon = $this->getLatLon( $marker->attr( ‘endereco’ ) );) e descomentei a 81 ($latlon = array( ‘latitude’ => $marker->attr( ‘lat’ ), ‘longitude’ => $marker->attr( ‘lon’ ) );)

    E no arquivo xml, coloquei o mesmo código xml do seu post. O que fiz de errado?

    • Rafael Clares outubro 2, 2012 às 6:52 pm

      Rudy, velho coloca o seu código no pastebin.com e me manda aqui o link para eu ver como está!
      Abs

      • Rudy outubro 2, 2012 às 6:59 pm

        Valeu Rafael pela resposta. Eu precisava exibir as posições vindas do banco, por isso pensei no arquivo.xml, mas consegui resolver da seguinte forma.
        require_once ‘gmaps.class.php’;
        $gmaps = new gMaps;

        $mark_array = array(
        array(“lat”=>”-23.561407″,”long”=>”-46.656409″),
        array(“lat”=>”-23.57045″,”long”=>”-46.64519″),
        array(“lat”=>”-23.562246″,”long”=>”-46.658034″),
        array(“lat”=>”-23.565004″,”long”=>”-46.652016″),
        array(“lat”=>”-23.561942″,”long”=>”-46.655653″),
        );
        foreach($mark_array as $mark){
        $gmaps->addMarker($mark[“lat”],$mark[“long”]”,”Lanchonete João”,”pizza”);
        }
        $gmaps->getMarkers();

        Obrigado.

  20. Rodolfo Jesus outubro 2, 2012 às 6:44 pm

    Para utilizar a api do google maps não é necessário ter uma google_api_key?
    Percebi no seu código você não usa essa key. $url = ‘http://maps.google.com/maps/geo?output=csv&key=&q=’ . urlencode( $address );
    Em uma quantidade grande de requisições, isso não seria um problema?

  21. Israel Nogueira outubro 15, 2012 às 9:19 pm

    PRECISO DE AJUDA… ELE FUINCIONA NORMAL NO MEU LOCALHOST… PORÉM QUANDO PUBLICO ELE NAO FUNCIONA… COMO POSO FAZER?

    • Rafael Clares outubro 24, 2012 às 7:09 pm

      Israel, você pode começar tentando dizer se aparece ou não erros, o que acontece quando tenta usar no servidor.
      Outra dica valiosa que não tem muito a ver com o problema é não escrever comentários com letras maiúsculas nos blogs, isso é muito ruim!

  22. ruilaranjeira outubro 26, 2012 às 11:21 pm

    Preciso de ajuda também. Não sei se é o mesmo erro do amigo Israel, mas no meu caso estou hospedado na UOL e eles têm o safe_mode ou open_basedir ativo e isso está gerando o seguinte erro no javascript “SyntaxError: invalid regular expression flag h”. Ele aponta para a linha onde carregamos o arquivo markers (linha 3)

    1 $(document).ready(function(){
    2 var jmarkers = eval($.ajax({
    3 url:’markers.php’,

    no arquivo de logs também aparece o seguinte erro:

    PHP Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in /home/xxxx/public_html/gMaps/gmaps.class.php on line 118

    a linha 118 do gmaps.class.php é a seguinte:
    if( isset( $marker->endereco ) )
    {
    $html .= “$marker->endereco”;
    }

    Alguém sabe como poderei resolver este problema? Parabéns ao autor deste script que realmente é otimo, mas infelizmente não estou conseguindo utilizar ele.

    • Rafael Clares outubro 26, 2012 às 11:38 pm

      Rui, manda o link para eu ver. (seu link não será exibido nos comentários)

      • ruilaranjeira outubro 26, 2012 às 11:44 pm

        Ele apenas fica carregando a imagem de “carregando local, aguarde…”.
        Apenas consegui verificar os erros através da console de erros do firefox e do arquivo de logs da UOL.
        Grato pela ajuda,
        Rui

      • Rafael Clares outubro 26, 2012 às 11:46 pm

        Altera o método getAddress do gmaps.class como está no link:
        http://pastebin.com/pULs5ejS

        crie também um arquivo php.ini com o seguinte conteúdo:
        allow_url_fopen=on

        Coloque o php.ini na raiz da aplicação, ou seja, junto dos demais arquivos;

      • ruilaranjeira outubro 27, 2012 às 12:18 am

        Infelizmente não funcionou. O erro persiste…
        No link que me informou existem 2 funções getAddress, deduzo que seja para utilizar a 2ª, mas de qq forma utilizei as 2 e o erro se mantem.
        Também criei o arquivo php.ini e coloquei ele junto com os outros arquivos na pasta gmaps.

      • Rafael Clares outubro 27, 2012 às 2:45 am
      • ruilaranjeira outubro 27, 2012 às 3:42 am

        Sua última dica também não funcionou, mas gerou um outro erro que me permitiu chegar na solução final, a qual deixo abaixo. Não dava para ir dormir e deixar essa pendência na cabeça rsrsrs. Muito obrigado pela ajuda.

        Deixo abaixo a solução para quem tiver problemas com o provedor de hospedagem que utiliza o safe_mode ou open_basedir ativo.

        public function getAddress($url){
        $site_url = $url;
        $ch = curl_init();
        $timeout = 5; // set to zero for no timeout
        curl_setopt ($ch, CURLOPT_URL, $site_url);
        curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

        ob_start();
        curl_exec($ch);
        curl_close($ch);
        $file_contents = ob_get_contents();
        ob_end_clean();
        if(!$file_contents){
        return false;
        }else{
        return trim($file_contents);
        }
        }

    • Rafael Clares outubro 26, 2012 às 11:45 pm

      Altera o método getAddress do gmaps.class como está no link:
      http://pastebin.com/pULs5ejS

      crie também um arquivo php.ini com o seguinte conteúdo:
      allow_url_fopen=on

      Coloque o php.ini na raiz da aplicação, ou seja, junto dos demais arquivos;

  23. ruilaranjeira outubro 27, 2012 às 2:25 am

    Caro Rafael,

    pesquisando na internet consegui chegar nessa dica que funcionou em parte. Na função getAddress trocando CURLOPT_FOLLOWLOCATION por CURLOPT_HEADER o mapa abre, mas não mostra o endereço utilizado em seu demo, parece que ele vai parar em algum lugar na Tunísia. rsrsrs

    Veja a dica que encontrei na net e se tem ideia de como devo adapar o código para a visualização correta. Grato.

    1)Don’t use CURLOPT_FOLLOWLOCATION
    2)Use curl_setopt($ch, CURLOPT_HEADER, true)
    3)Grab from the header cookies like this:
    preg_match_all(‘|Set-Cookie: (.*);|U’, $content, $results);
    $cookies = implode(‘;’, $results[1]);
    4)Set them using curl_setopt($ch, CURLOPT_COOKIE, $cookies);

Os comentários estão desativados.

%d blogueiros gostam disto: