Campo de busca

Categoria Programação

Google Maps API v3: Criando um mapa personalizado

Google Maps API v3: Criando um mapa personalizado

Por | 23 de maio, 2013 | 1112 comentários

Atualização em 05/08/2017:
Pessoal, escrevi esse post há uns bons anos atrás e infelizmente atualmente não o mantenho atualizado, nem respondo os comentários. Caso você tenha alguma dúvida, dê uma lida nos comentários para ver se a sua dúvida já foi respondida.

---------

Fala pessoal, tudo certo?

Depois de termos visto como fazer uma busca de endereço personalizada no Google Maps, agora é hora de aprendermos a pegar todos esses endereços marcados no mapa e exibí-los em uma mapa personalizado, utilizando a API do próprio Google Maps.

Nesse tutorial, mostrarei como carregar um mapa que contenha vários pontos pré-definidos, bem como personalizá-los para tornar a experiência do usuário mais agradável. Vamos nessa?

API Key

Para começarmos, siga esse tutorial do próprio Google para pegarmos a API key, que nos permitirá monitorar a nossa aplicação e também é útil ao Google, caso ele tenha que entrar em contato conosco para falar a respeito da nossa aplicação.

O uso da API key não é obrigatório se a sua aplicação não exceder o limite de consultas diário. Caso você exceda o limite diário, você precisará da API key para aumentar o limite de consultas ou para comprar uma quota de consulta maior.

Exibindo o mapa

Para exibirmos o mapa padrão do Google Maps, vamos criar um simples documento HTML, onde teremos um elemento com altura e largura definidos, uma chamada para o Maps API Javascript, que é a API do Google Maps, e uma chamada para o mapa.js que contém a inicialização padrão do nosso mapa.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <title>Google Maps API v3: Criando um mapa personalizado</title>
    </head>

    <body>
     <div id="mapa" style="height: 500px; width: 700px">
        </div>

        <!-- Maps API Javascript -->
        <script src="http://maps.googleapis.com/maps/api/js?key=ColoqueASuaKeyAqui&amp;sensor=false"></script>

        <!-- Arquivo de inicialização do mapa -->
        <script src="js/mapa.js"></script>
    </body>
</html>

No nosso arquivo mapa.js, nós temos a chamada padrão para inicializar o mapa:

var map;

function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();

Agora que exibimos o mapa, é hora de inserirmos nossos pontos personalizados dentro do mapa.

Inserindo os pontos no mapa

Para podermos inserir os pontos no mapa, precisamos de no mínimo a latitude e a longitude desses pontos. No meu caso, irei criar um arquivo JSON que irá conter esses pontos, mas você pode armazená-los onde achar melhor. De início, o nosso mapa terá 3 pontos: Um no estado de Minas Gerais, outro em São Paulo e outro no Rio de Janeiro. A latitude e longitude desses pontos eu peguei na demo de busca de endereço no Google Maps.

Depois de criado, o nosso arquivo pontos.json ficará assim:

[
    {
        "Latitude": -19.212355602107472,
        "Longitude": -44.20234468749999
    },
    {
        "Latitude": -22.618827234831404,
        "Longitude": -42.57636812499999
    },
    {
        "Latitude": -22.57825604463875,
        "Longitude": -48.68476656249999
    }
]

Em seguida, criaremos uma função para colocar esses três pontos no mapa:

function carregarPontos() {

    $.getJSON('js/pontos.json', function(pontos) {

        $.each(pontos, function(index, ponto) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                title: "Meu ponto personalizado! :-D",
                map: map
            });

        });

    });

}

carregarPontos();

Notem que estou usando jQuery para obter o arquivo JSON e devido a isso nós temos que incluir a biblioteca jQuery na nossa página.

O código acima é simples:

  1. Uso o $.getJSON para pegar todos os pontos;
  2. Usando o $.each, pego cada ponto e vou colocando-os no mapa, definindo sua posição (position), título (title) e qual mapa (map) ele pertence.

O próximo passo é personalizar esses pontos, trocando o marcador padrão do Google Maps e exibir uma caixa de informação personalizada ao clicar em cada marcador do mapa.

Personalizando os marcadores

Primeiro de tudo, vamos alterar o ícone do marcador, colocando um personalizado. Aqui você tem, basicamente, duas opções: Criar um ícone próprio ou pegar um pronto. Caso queira pegar um pronto, recomendo o site Icon Finder. No meu caso, usarei esse marcador.

Depois que você escolher o marcador, nos parâmetros do google.maps.Marker, passe o parâmetro icon com o valor do endereço do seu marcador. Ficará assim:

...

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
    title: "Meu ponto personalizado! :-D",
    map: map,
    icon: 'img/marcador.png'
});

...
Pontos Personalizados Google Maps

Está começando a ficar bonito! Agora vamos criar o balão de informação de cada ponto, que será exibido ao clicar nos marcadores dentro do mapa.

Personalizando a caixa de informação

É interessante para o usuário poder clicar nos marcadores do mapa e ver alguma informação relacionada ao marcador em questão. Para exibir essas informações de cada marcador, temos duas opções:

Utilizar a caixa de informação padrão

Nesse tutorial não irei utilizar a caixa padrão do Google Maps, mas se caso ela atenda as suas necessidades, deixo abaixo o código para implementá-la.

var marker = new google.maps.Marker({...

var infowindow = new google.maps.InfoWindow(), marker;

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent("Conteúdo do marcador.");
        infowindow.open(map, marker);
    }
})(marker))
Caixa Informação Padrão Google Maps

Utilizar uma caixa de informação personalizada

Para criar uma caixa de informação totalmente personalizada, irei utilizar o InfoBox, o qual faz parte do Google Maps Utility Library v3.

Vamos baixar o InfoBox e referenciá-lo na nossa página HTML. Em seguida, escreveremos um pouco de código para exibir o InfoBox ao clicar nos marcadores do nosso mapa.

1. Identificadores únicos em cada ponto

Iremos garantir que no nosso mapa nós teremos apenas um ponto aberto por vez, ou seja, ao clicar em um marcador, se houver algum InfoBox aberto, iremos fechá-lo e abrir o InfoBox do marcador clicado. Para isso, vamos editar o arquivo pontos.json e colocar um identificador único em cada ponto, pois será com ele que faremos essa verificação.

[
    {
        "Id": 1,
        "Latitude": -19.212355602107472,
        "Longitude": -44.20234468749999
    }
    ...
]

2. Relacionando cada marcador com o InfoBox

Para cada marcador que colocamos no mapa, temos que fazer uma referência ao InfoBox, criando um objeto do tipo InfoBox, referenciando qual é o seu marcador e um listener para garantir a abertura do InfoBox no evento clique do marcador.

...
var idInfoBoxAberto;
var infoBox = [];

function abrirInfoBox(id, marker) {
    if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
        infoBox[idInfoBoxAberto].close();
    }

    infoBox[id].open(map, marker);
    idInfoBoxAberto = id;
}

function carregarPontos() {
    ...

    var myOptions = {
        content: "<p>Conteúdo do InfoBox</p>",
        pixelOffset: new google.maps.Size(-150, 0)
    };

    infoBox[ponto.Id] = new InfoBox(myOptions);
    infoBox[ponto.Id].marker = marker;

    infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
        abrirInfoBox(ponto.Id, marker);
    });
}

3. Definindo o visual do InfoBox

Por último, vamos personalizar o visual do nosso InfoBox através da CSS:

.infoBox { background-color: #FFF; width: 300px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 2px solid #3fa7d8; border-radius: 3px; margin-top: 10px }
.infoBox p { padding: 0 15px }
.infoBox:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #3fa7d8; top: -10px; content: ""; height: 0; position: absolute; width: 0; left: 138px }
InfoBox

Voilà! Nosso mapa está ficando cada vez melhor!

Agrupando pontos próximos

Imagine que tenhamos muitos marcadores em uma determinada rua da cidade de Campinas. Ao carregar o mapa com pouco zoom (como estamos fazendo atualmente), iremos ver um ponto em cima do outro, dificultando assim o clique nos marcadores para visualizar suas informações.

Marcadores muito próximos

Para resolver esse problema, iremos agrupar esses marcadores quando o mapa estiver com pouco zoom, e conforme aumentarmos o zoom, iremos separar esses marcadores, de tal forma que eles fiquem claramente separados. Para fazer esse processo, utilizaremos o Marker Clusterer Plus, do Google Maps Utility Library v3.

Primeiro de tudo, baixe o Marker Clusterer Plus e referencie-o em nossa página HTML. Após isso, basta criar um array markers, o qual irá conter cada um dos marcadores, e passá-los para o MarkerClusterer:

...
var markers = [];

function carregarPontos() {
    $.getJSON('js/pontos.json', function(pontos) {

        $.each(pontos, function(index, ponto) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                title: "Meu ponto personalizado! :-D",
                icon: 'img/marcador.png'
            });

            ...

            markers.push(marker);
        });

        var markerCluster = new MarkerClusterer(map, markers);
    });  
};

Agora o MarkerClusterer irá agrupar automaticamente os marcadores muito próximos um do outro. Perceba que no lugar dos marcadores, ele exibe um ícone e um número, que indica a quantidade de marcadores agrupados. Clicando em cima desse número, o mapa aumenta o zoom nesse ponto, e conforme os pontos vão se separando, esse número vai diminuindo.

Marcadores agrupados

Zoom automático para caber todos os pontos na tela

O nosso mapa agora possui marcadores personalizados, agrupamento de marcadores e caixas de informação totalmente estilizadas por CSS. O último passo é, ao carregar o mapa pela primeira vez, colocar um zoom automático de forma com que todos os marcadores sejam exibidos na tela do usuário, sem esconder nenhum ponto.

Para fazer isso, utilizaremos o google.maps.LatLngBounds() e fitBounds:

...

    $.getJSON('js/pontos.json', function(pontos) {

        var latlngbounds = new google.maps.LatLngBounds();

        ...

            markers.push(marker);

            latlngbounds.extend(marker.position);

        });

        var markerCluster = new MarkerClusterer(map, markers);

        map.fitBounds(latlngbounds);

    });

...
Fitbounds

Veja que o mapa carregou com um zoom de modo a exibir todos os pontos no mapa: Os que havíamos colocados previamente no Brasil, e um outro no extremo norte do mapa, na Colômbia.

E é isso! Terminamos nosso humilde mapa ;)

O código completo da criação de mapa personalizado utilizando a API v3 do Google Maps está no meu GitHub, caso você queira estudar melhor o código ou fazer alguma alteração.

Qualquer dúvida, sugestão, crítica ou doação de cerveja, deixe um comentário :)

Até a próxima!

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[1112] Comentários  

Jonathan Felipe

Ótimo post cara :D

28-05-2013 às 10:36 Responder

Júnior

Parabéns.. sempre quis fazer isso!. Obrigado

29-05-2013 às 16:13 Responder

Natália

Em resposta a Júnior

Rodolfo como faço para inserir um marcador direto na aplicação, através de um form ou simplemeste arrastando? ou seja, para que o usuário possa inserir

25-10-2013 às 17:28 Responder

Mário

Em resposta a Natália

Quase um ano depois... rsrs

Natélia,
você só precisa colocar o código de criar um marcador (igual está no quarto exemplo dessa página) dentro de uma função executada quando você quiser (seja form, botão, clique, tempo...). Só vai ter que passar os parâmetros direitinho (pelo menos Lat e Lng).

=D

05-09-2014 às 14:40 Responder

Natália

Em resposta a Mário

Rodolfo,

Possp usar esse código para criar um mapa com a api do google place para encontrar por exemplo restaurante?

Obrigada

13-11-2014 às 10:41 Responder

Mário

Em resposta a Natália

(desculpa estar me metendo, mas...)

Natália, você pode usar a Places Library: http://goo.gl/I2GFw4
Aqui tem um exemplo: http://deliveryfortaleza.com/js/main.js

14-11-2014 às 12:33 Responder

Adair Neto

Como faço pra por um texto em cada InfoBox?

29-05-2013 às 18:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adair Neto

Fala Adair!

Basta alterar o conteúdo de “content” do “myOptions” do Infobox.

Abs!

03-06-2013 às 10:11 Responder

Juliano Caetano

“o MarkerClusterer irá agrupar automaticamente os marcadores muito próximos um do outro. Perceba que no lugar dos marcadores, ele exibe um ícone e um número”

Baixei o script e não fiz nenhuma alteração, porém só aparece o numero, o icone não está aparecendo o que pode ser?

12-06-2013 às 11:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Juliano Caetano

Fala Juliano,

Você pode colocar o seu script em alguma página para eu dar uma olhada?

Abs!

14-06-2013 às 13:11 Responder

Ferreira

O mapa nao aparece.

12-06-2013 às 16:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ferreira

Oi Ferreira,

Você pode colocar o seu script em alguma página para eu dar uma olhada?

Abs!

14-06-2013 às 13:12 Responder

Fernando Júnior

Como faço para ter uma descrição ou 1 var myOptions = {
content: “Conteúdo do InfoBox”,

para cada marcador

17-06-2013 às 14:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando Júnior

Fala Fernando,

Como o código do myOptions está dentro do $.each, ele já é único para cada marcador. Para colocar uma descrição única para cada ponto, basta:

1. Adicionar um atributo “Descricao” para cada ponto no json:

[
   {
      "Id": 1,
      "Latitude": -19.212355602107472,
      "Longitude": -44.20234468749999,
      "Descricao": "Ponto 1"
   },
   {
      "Id": 2,
      "Latitude": -11.212355602107472,
      "Longitude": -42.20234468749999,
      "Descricao": "Ponto 2"
   }
]

2. Trocar o myOptions para:

var myOptions = {
   content: “<p>” + ponto.Descricao + "</p>”,
   pixelOffset: new google.maps.Size(-150, 0)
};

20-06-2013 às 09:34 Responder

Dirceu

Oi Rodolfo

Primeiro quero te parabenizar pelo excelente trabalho.

Sou programador desktop e este está sendo meu primeiro contato com js. Não consegui fazer teu exemplo funcionar. Certamente por falta de conhecimento.

Peço tua gentileza de examinar o que fiz.

Coloquei tudo em:
http://www.topfaces.com.br/apigoogle/rodolfo/

Desde já te agradeço

Forte abraço.
Dirceu

02-07-2013 às 16:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dirceu

Fala Dirceu!

Dei uma olhada e vi que o seu arquivo json está retornando 404, veja: http://www.topfaces.com.br/apigoogle/rodolfo/js/pontos.json

Algumas hospedagens não tem por padrão suporte a arquivos com a extensão .json. Nesse caso, você precisa adicionar esse suporte. Você tem duas opções:

- Caso tenha acesso ao painel de controle da hospedagem, procure nas configurações uma maneira de adicionar MIME media type. Se você achar, adicione a extensão “.json” com o MIME media type “application/json” (sem aspas);

- Na linguagem de programação que você está utilizando, procure uma maneira de adicionar mime types, aí você adiciona a extensão “.json” com o MIME media type “application/json” (sem aspas).

Abs!

30-07-2013 às 15:57 Responder

joao paulo

Excelente post, estava procurando uma solução como essa e você foi o único que mostrou passo a passo.
Mas ainda ficou faltando uma coisa pra ficar perfeito gerar esse json em php pegando os dados do mysql.
uma boa dica para os próximos posts.

Gostei muito do seu blog, atualizado e com muitas dicas.

03-07-2013 às 21:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a joao paulo

Olá João,

Para gerar JSON em PHP, recomendo esse artigo: http://gustavopaes.net/blog/2010/php-como-ler-e-escrever-dados-no-formato-json.html

Abs!

30-07-2013 às 15:48 Responder

Alexandre

Em resposta a joao paulo

Em primeiro lugar, Obrigado Rodolfo pelo post, vlw mesmo

Joao Paulo
tem esse link aqui:
http://mariohercules.blogspot.com.br/2012/04/utilizando-mysql-e-php-para-gerar-json.html

nesse eu entendi melhor como conectar com banco de dados

vlw

11-10-2013 às 02:50 Responder

Adriano dos Santos

Em resposta a joao paulo

Sem querer reviver seu comentário, mas já revivendo (rsrs), é bem simples fazer isso. Estou trabalhando e um projeto que faz justamente isso.

Eu salvei todos os dados no meu banco, e criei um arquivo chamado pontos.php com uma query buscando esses dados e organizei eles em um array. O array ficou assim:

$c[] = array('Id' => $b['referencia'], 'Latitude' => $b['latitude'], 'Longitude' => $b['longitude'], 'Descricao' => $b['descricao']);

Depois de organizar os dados no array, basta usar a função json_encode() e dar um echo nela. Assim:

echo json_encode($c);

No Javascript, eu puxei esse arquivo via ajax:

$.ajax({
   url: 'js/pontos.php',
   type: 'GET',
   dataType : "json",
   success: function (data) {

      $.each(data, function(index, ponto) {

         var latlngbounds = new google.maps.LatLngBounds();

         ....

      ...
   }
});

E é isso! Fazendo assim ele puxa direto do banco.

Passando mais alguns parâmetros, dá pra buscar os pontos dinamicamente. (:

Eis o projeto: https://apps.facebook.com/credenciadasalgar/

Abraço

22-07-2014 às 14:21 Responder

Wilson

Em resposta a Adriano dos Santos

Estou com um problema, pois o arquivo .json é gerado a cada consulta do banco de dados, porém se ocorrer consultas simultaneas a última cinsullta grava o .json e portanto alguém irá ver informações que não solicitou.
Exemplo:
usuário 1 seleciona Paraná / Curitiba
usuário 2 seleciona Santa Catarina / Florianópolis

Se as conultas ocorrerem juntas , mas o último a gravar for usuário 1 tanto o usuário 1 como o usuário 2 irão ver os dados de Paraná / Curitiba.

Tem como impedir que isso ocorra ??

Abraços

01-04-2016 às 10:35 Responder

Anderson

Parabéns pelo Artigo, Excelente! dúvida, como traço uma rota entre pontos?

12-07-2013 às 08:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson

Anderson,

Para traçar rotas entre pontos, utilize o Directions Service da API: https://developers.google.com/maps/documentation/javascript/services?csw=1#Directions

Abs!

30-07-2013 às 15:18 Responder

Anderson

Em resposta a Rodolfo Pereira

Rodolfo, obrigado por responder. Mas preciso que a rota contenha vários pontos, preciso acompanhar o deslocamento em 5 em 5 minutos. Directions service lendo na documentação posso criar uma rota de 2 pontos, de uma origem ao um ponto de destino.
Você pode me ajudar com alguma dica?

02-08-2013 às 16:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson

Não achei nada desse tipo... talvez no meu próximo post aqui no Blog eu trate desse assunto, aí com mais estudo eu possa te ajudar melhor. Abs!

02-08-2013 às 18:19 Responder

Anderson

Rodolfo,
Como faria para passar as coordenadas direto do banco de dados teria que criar o arquivo json?

12-07-2013 às 14:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson

Anderson,

Não entendi a sua pergunta. Você pode me explicar melhor?

Abs!

31-07-2013 às 11:37 Responder

marlon

como faço para fazer os marcadores andarem pelo mapa caso mude de lat ou long. sem dar refresh na tela(piscar a tela)

20-07-2013 às 14:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a marlon

Marlon, você quer que o marcador mude de posição automaticamente caso a sua latitude e longitude sejam alteradas no arquivo json?

Abs!

30-07-2013 às 15:40 Responder

marlon

Em resposta a Rodolfo Pereira

isso mesmo.

30-07-2013 às 22:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a marlon

Marlon,

O que você pode fazer nesse caso, é executar a função "carregarPontos" a cada X segundos através do "setInterval" do Javascript. Dentro da função "carregarPontos", não esqueça de limpar os marcadores antes de populá-los no mapa. Segue alguns links para te ajudar:

Executar um trecho de código a cada X segundos: http://stackoverflow.com/questions/15548559/execute-code-every-10-seconds-but-start-on-0-seconds-too

Remover todos os marcadores do mapa: http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers

Abs!

02-08-2013 às 13:11 Responder

marco tulio

Em resposta a Rodolfo Pereira

fiz isso aqui e deu certinho.
setInterval(function() {
limpa(); // function limpa pontos
carregarPontos();// desenha pontos atualizados
}, 30000);

21-10-2013 às 12:44 Responder

Fabio Pulzi

Ótimo artigo Rodolfo

Tenho apenas uma dúvida com relação a uma aplicação usando esta informação. Vi que você cria o mapa passando o json com todas as informações de todos os lugares de uma só vez, porém se pensarmos em alguma aplicação com alguns milhares de pontos, esse json se tornaria um problema pelo tamanho, certo ? Você sabe se existe alguma forma de fazer algo tipo um lazy load, para carregar os pontos por por grupos e não todos de uma vez ?

Abraço,
Fabio

26-07-2013 às 08:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fabio Pulzi

Dei uma pesquisada sobre utilizar o Lazy Load no carregamento dos pontos, e no Stack Overflow achei isso: http://stackoverflow.com/questions/3153059/strategy-for-lazy-loading-markers-into-a-google-maps-javascript-api-map

O mais próximo que fiz disso, e que não é uma ótima solução, é carregar no JSON apenas os IDs dos pontos, e ao clicar no ponto, fazer uma requisição no banco de dados e obter todas as informações necessárias.

02-08-2013 às 17:30 Responder

Hemerson

Primeiro parabenizar pelo trabalho. segundo, queria saber como posso personalizar cada marcados pelo tipo por exemplo, vi em outro exemplo mais não consegui incorporar ao seu. Sou leigo em JS. Se poder ajudar.

Agradeço desde já por compartilhar o conhecimento.

31-07-2013 às 22:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hemerson

O que você gostaria de personalizar no marcador e quais seriam esses tipos?

02-08-2013 às 17:39 Responder

Eduardo

Em resposta a Rodolfo Pereira

Oi Christian Herzog você pode me explicar como fez os resultados MySql aparecerem no arquivo Json?

Grato.

23-09-2013 às 13:30 Responder

Christian Herzog

Fala Rodolfo,

Parabéns pelo post, altíssimo nível!

Veja se você pode me ajudar. Eu tenho um banco de dados com endereços de academias. Eu sei que existe o Geocoder do Google Maps, que pega os endereços e transforma em latitude e longitude.

Fazer os resultados do MySql aparecerem no arquivo Json não é problema, minha dificuldade está em juntar seu exemplo com o Geocoder e colocar tudo em prática.

Ficaria mais ou menos assim:

1) Leio as informações no banco MySql e jogo no arquivo Json.

2) Transformo os endereços (Ruas ou cep) com o Geocoder para Lat Long.

Como fazer??

Abraço e parabéns mais uma vez, seus posts são excelentes!

01-08-2013 às 16:10 Responder

Anderson

Em resposta a Christian Herzog

Olá Christian,
Veja se esse tutorial pode lhe ajudar
http://blog.clares.com.br/google-maps-com-marcadores-personalizados/

02-08-2013 às 16:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Christian Herzog

Christian, como você já tem essa lista de endereços, basta passar cada endereço dessa lista para o geocoder.geocode, o qual irá retornar a latitude e a longitude desse endereço para você. Com a latitude e a longitute, é só adicionar o ponto no mapa. Ficaria algo assim:

var enderecosAcademia = new Array();
var geocoder = new google.maps.Geocoder();
  
enderecosAcademia[0] = "Av. Júlio Diniz, 191, Jardim Ns. Auxiliadora, Campinas - SP";
enderecosAcademia[1] = "Av. Barão de Itapura, 1518 - Jardim Guanabara";
  
for (var i = 0; i < enderecosAcademia.length; i++) {
    endereco = enderecosAcademia[i];
   
    geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();

                // Código para adicionar o ponto no mapa
            }
        }
    })
}

02-08-2013 às 17:42 Responder

Christian Herzog

Em resposta a Rodolfo Pereira

Obrigado Rodolfo!

05-08-2013 às 13:19 Responder

Christian Herzog

Em resposta a Rodolfo Pereira

Olá Rodolfo,

Infelizmente não consegui colocar o código para adicionar os marcadores no mapa... afffff!!!

Dá uma luz ai!

Muito obrigado.

06-08-2013 às 14:03 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Christian Herzog

Christian, entre em contato comigo pelo e-mail rodolfo@princiweb.com.br e envie o seu código inteiro para eu analisar. Abs!

09-08-2013 às 15:33 Responder

Gabriel Pirondi

Em resposta a Rodolfo Pereira

Estou tentando fazer o geocoder funcionar com a função carregarPontos()....mas não está dando certo alguma ideia?

var javascript_array = new Array();
var geocoder = new google.maps.Geocoder();

var javascript_array[1] = "Travessa Amazonas,770,Aviario,69.910-700-AC";
var javascript_array[2] = "rua Jos\u00e9 Julio Sawer,38,Ponta Verde,57.035-390-AL";
var javascript_array[3] = "Rua S\u00e3o Francisco de Assis,891,Santa Monica,44.077-720-BA";

function carregarPontos() {
   for (var i = 0; i < javascript_array.length; i++) {
      endereco = javascript_array[i];

      geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
               var latitude = results[0].geometry.location.lat();
               var longitude = results[0].geometry.location.lng();

               var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(latitude, longitude),
                  title: "Meu ponto personalizado! :-D",
                  icon: 'img/marcador.png'
               });
            }
         }
      })
   }
}

carregarPontos();

24-04-2014 às 11:39 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Pirondi

Troque isso:

var javascript_array[1] = "Travessa Amazonas,770,Aviario,69.910-700-AC";
var javascript_array[2] = "rua Jos\u00e9 Julio Sawer,38,Ponta Verde,57.035-390-AL";
var javascript_array[3] = "Rua S\u00e3o Francisco de Assis,891,Santa Monica,44.077-720-BA";

por isso:

javascript_array[1] = "Travessa Amazonas,770,Aviario,69.910-700-AC";
javascript_array[2] = "rua Jos\u00e9 Julio Sawer,38,Ponta Verde,57.035-390-AL";
javascript_array[3] = "Rua S\u00e3o Francisco de Assis,891,Santa Monica,44.077-720-BA";

23-05-2014 às 18:21 Responder

George

Em resposta a Rodolfo Pereira

Tambpem não consegui implantar, você pode passar o mapa.js já com essa modificação?

29-03-2014 às 03:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a George

Mas qual erro que deu?

09-04-2014 às 20:41 Responder

LUAN

Em resposta a Christian Herzog

Como que eu faço o Arquivo Json ler dados do mysql ?

03-08-2013 às 13:32 Responder

Christian Herzog

Em resposta a LUAN

Olá Luan,

Vej este exemplo:
http://stackoverflow.com/questions/6752783/how-to-retrive-php-data-from-mysql-and-convert-it-to-json

05-08-2013 às 13:20 Responder

Walfredo de Sá

É possível desagrupar os pontos próximos? Obrigado!

02-08-2013 às 14:55 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Walfredo de Sá

Se você está utilizando o MarkerClusterer, basta dar zoom no mapa que os pontos irão se desagrupar.

Se você não quer que os pontos se agrupem em nenhum momento, é só não utilizar o MarkerClusterer.

Abs!

02-08-2013 às 17:55 Responder

Tati

Em resposta a Rodolfo Pereira

Olá Rodolfo

Parabéns pelo script e detalhamento na explicação de como implementar =D
Estou testando o script e observei que se eu tenho dois endereços com a mesma latitude e longitude (em um prédio comercial por exemplo) ao clicar no "grupo", quando ele vai tentar desagrupar para mostrar os "ícones soltos" ele não exibe os ícones, você já viu isso?

Obrigada
Abs. Tati

19-02-2014 às 10:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tati

Sim, acontece isso pois não há como desagrupá-los, já que eles estão na mesma latitude e longitude.

Nesse caso, onde você já tem um ponto inserido em uma determinada localização, você não deve adicionar outro ponto nesse mesmo lugar, mas sim apenas adicionar as informações no infobox desse novo ponto, ficando no final as informações do ponto que já estava inserido, mais as informações desse novo ponto que você iria inserir.

20-02-2014 às 16:22 Responder

Tati

Em resposta a Rodolfo Pereira

Oi Rodolfo

Obrigada pelo retorno, eu consegui resolver definindo gridSize e maxZoom
var markerCluster = new MarkerClusterer(map, markers, {
maxZoom: 19,
gridSize: 40,
zoomOnClick: true
});

Abraços ;)

20-02-2014 às 17:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tati

Legal! Dessa eu não sabia.

Valeu por compartilhar :D

20-02-2014 às 17:29 Responder

Allan Gaspar

Em resposta a Tati

Olá Tati,

tentei implementar a solução descrita por você porém quando o mapa mostra os marcadores ele mostra apenas o último daquele grupo, tipo se eu tenho 5 clientes em um shopping antes minha aplicação não exibia os ícones como o problema descrito por você, agora ele só mostra o último destes que estão no mesmo endereço, isso aconteceu com você ou o seu está mostrando todos????

30-09-2014 às 09:26 Responder

Henrique

tem como eu ter um icone para cada ponto?

03-08-2013 às 00:11 Responder

Rogério Souza

Em resposta a Henrique

Ola colega Henrique,

Estive com a uma necessidade semelhante a sua, colocar um ícone diferente para cada marcação ou para um grupo de pontos. Então dupliquei a função de carregamento dos pontos, alterei meu arquivo .php de geração do json vindo do mysql e criei um ícone diferente. O resultado foi que eu tive um grupo de pontos com ícone azul e outro grupo com ícone vermelho.

Não sei se essa é a forma correta, porém foi a que eu encontrei para resolver meu problema.

05-08-2013 às 13:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Henrique

Oi Henrique!

Tem sim. Você pode colocar o nome do arquivo do ícone em cada ponto do JSON. Ficaria assim:

[
   {
      "Id": 1,
      "Latitude": -19.212355602107472,
      "Longitude": -44.20234468749999,
      "Icone": "icone-1.png"
   },
   {
      "Id": 2,
      "Latitude": -11.212355602107472,
      "Longitude": -42.20234468749999,
      "Icone": "icone-2.png"
   }
]

Aí lá no marker, onde você define o icon, é só colocar:

icon: 'img/' + ponto.Icone

06-08-2013 às 11:15 Responder

Alexandre F. Silva

Olá Rodolfo o seu artigo me ajudou muito. Parabéns.
Incluir outras funcionalidades junto e foi show de bola.
Só estou com um problema que achei que foi o código que complementei. Mais hoje baixei o seu código e percebi que ele não está funcionando no Chrome.

05-08-2013 às 22:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre F. Silva

Fala Alexandre! Tudo certo?

Abri a demo do código no Chrome e funcionou normalmente. Dê uma olhada: http://www.princiweb.com.br/demos/google-maps-api-v3-criando-mapa-personalizado/

Abs!

06-08-2013 às 11:11 Responder

Jean Ferreira

parabéns pelo script, o melhor até agora da web.

vi que em resposta ao Marlon, você menciona da um setInterval para atualizar as coordenadas, passei o json para o db e busco ele em asp: o mapa.js abaixo do carregarPontos(); ficou assim:

window.setInterval(function(){
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray = [];
}

clearOverlays();

carregarPontos();
}, 30000);

Ele carrega sempre o mesmo ponto toda vez, se eu não limpo, ele atualiza o mesmo ponto 100 x, aonde estou errando?

Pode me ajudar?

08-08-2013 às 14:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jean Ferreira

Olá Jean,

O seu array que contém os marcadores se chama "markersArray"?  Pois no meu exemplo, o "markersArray" seria o "markers".

Se você alterou o nome do array certinho, me envie o seu código por e-mail para eu dar uma olhada.

Abs!

20-08-2013 às 00:01 Responder

joao paulo

Em resposta a Jean Ferreira

Fala jean eu tava com o mesmo problema e resolvi da seguinte forma, eu criei uma funcao
function clearMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
setTimeout(function() { carregarPontos(); }, 10000);//200000); atualiza de 2 em 2 minutos
}


e dentro da função carregarPontos() eu chamo a função clearMarkers()

24-08-2013 às 09:17 Responder

Jean Ferreira

Em resposta a joao paulo

Obrigado Joao Paulo, vou testar a função, mas se já funcionou desde já grato.

Obrigado

26-08-2013 às 10:44 Responder

João Rodrigues

Muito obrigado pelo tutorial.
É possivel inserir icon por ponto?

12-08-2013 às 19:17 Responder

Douglas

Em resposta a João Rodrigues

Leia os comentários...!

14-08-2013 às 21:18 Responder

Douglas

Boa noite Rodolfo,
Como limitar a exibição de pontos por uma quantidade de Km? exemplo: tenho 300 pontos, sendo 10 pontos em cada capital e outros pontos em interiores distantes da capital, ao utilizar o sensor, ele me mostre somente os pontos proximos de "x" Km...
Agradeço desde já.

14-08-2013 às 21:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Douglas

Oi Douglas,

Explique-me melhor a utilização do sensor... pois pelo que eu sei, ele não muda nada na sua aplicação.

Abs!

20-08-2013 às 00:05 Responder

Douglas

Em resposta a Rodolfo Pereira

O sensor serve pra determinar a posição do usuário, então tendo como base a localização do usuário, queria que mostrasse apenas os pontos proximos dele, tipo 100km. Entendeu?

20-08-2013 às 13:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Douglas

Entendi. Vivendo e aprendendo! :-)

Nunca fiz isso que você mencionou, mas axei isso aqui: http://stackoverflow.com/questions/4057665/google-maps-api-v3-find-nearest-markers

Sei que não é exatamente o que você precisa, mas acho que dá uma luz.

Caso consiga fazer funcionar, compartilhe com a gente!

27-08-2013 às 18:01 Responder

Fernando Romenski

Ótimo!!! Parabéns cara muito bom o tutorial me ajudou muito.. Obrigado

16-08-2013 às 11:18 Responder

Anderson

Só deixando meu agradecimento aqui por tu ter disponibilizado esse material, foi de grande ajuda.
Sucesso pra ti!

16-08-2013 às 15:00 Responder

Ataides

Muito bom o post, me ajudou um monte.

Parabéns pelo ótimo trabalho.

20-08-2013 às 14:38 Responder

Hugo Rafael Alves

Olá gostei muito do post e me ajudou bastante, parabéns pelo trabalho. Gostaria de saber se existe alguma maneira de mudar a cor do mapa, por exemplo colocar a cor do mapa cinza. Desde já agradeço! abraços!

20-08-2013 às 16:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hugo Rafael Alves

Hugo, dê uma olhada aqui: https://developers.google.com/maps/documentation/javascript/styling

Abs!

27-08-2013 às 17:55 Responder

Hugo Rafael Alves

Em resposta a Rodolfo Pereira

Olá obrigado por responder =]! puxa bem legal em obrigado novamente vai me ajudar bastante! Abraços e parabéns de novo. hehehe

28-08-2013 às 08:28 Responder

Hugo Rafael Alves

Olá de novo, mais uma vez parabéns pelo post. estou com um problema, o mapa funciona perfeita no firefox, ie, safari, mas nao funciona no chrome. o que pode ser? desde já agradeço

21-08-2013 às 09:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hugo Rafael Alves

Fala Hugo!

Coloca o link do seu mapa aí para eu dar uma olhada :-)

Abs!

27-08-2013 às 17:53 Responder

Hugo Rafael Alves

Em resposta a Rodolfo Pereira

Então na verdade eu apenas fiz o download do seu projeto e abri no chrome e não funcionou! Agradeço desde já

28-08-2013 às 08:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hugo Rafael Alves

Abri a minha demo (http://www.princiweb.com.br/demos/google-maps-api-v3-criando-mapa-personalizado/) e está funcionando corretamente no Chrome.

No seu, só no Chrome que não está funcionando? Se você conseguir colocar online o seu projeto, ficaria mais fácil de te ajudar.

30-08-2013 às 17:42 Responder

Leo Neves

Em resposta a Rodolfo Pereira

Olá Rodolfo e Hugo,
Estou com o mesmo problema. Apenas o chrome não carregar os pontos.
Baixei do github e nao fiz nenhuma alteracao. Mas ao jogar o html no navegador do google o mapa abre sem pontos.
Rodolfo, preciso instalar alguma coisa no computador ou é só codificar e rodar no navegador mesmo?

19-03-2014 às 19:13 Responder

Leo Neves

Em resposta a Hugo Rafael Alves

Esse é um problema de segurança para o chrome
Se o json estiver hospedado em um link da web ele abre normalmente, porém para acessar um arquivo local ele nao abre, logo não carrega os pontos.

Não sei explicar bem, mas aqui tem a explicação mais completa:
http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin

19-03-2014 às 22:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leo Neves

Opa, valeu pela dica! :D

09-04-2014 às 20:59 Responder

Diego

Em resposta a Leo Neves

O meu está em Link e não funcionou, da uma olhada: http://tutores.com.br/mapas-unidades/

18-07-2014 às 17:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego

Mas o que não funcionou? Aqui abriu normal.

30-07-2014 às 16:03 Responder

José Silva

Olá Rodolfo.
Preciso de uma ajudinha. Tenha uma lista de simbolos criados no Visio stencil, tipo circulos, quadrados estrela etc.. e preciso colocar esses simbolos em cima do google earth e poder editar, manipular, fazer zoom agarrado ao mapa, arrasta-los de um lado para o outro, como posso fazer isso? Obrigado.

21-08-2013 às 19:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a José Silva

Oi José!

Sugiro você dar uma estudada na API do Google Earth: https://developers.google.com/earth/

Abs!

27-08-2013 às 17:52 Responder

Wallax Matos

cara mande o endereço ae que a caixa de cerveja ta chegando, rsrsrsr bom post Obrigado

24-08-2013 às 22:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wallax Matos

Huhauehaue, valeu, abs!

27-08-2013 às 17:50 Responder

Márcio Reis

Merece um engradado inteiro! ótimo Post,, estava precisando muito disso!

26-08-2013 às 09:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Márcio Reis

Opa, fico no aguardo então. Huaheuaheuae, abs!

27-08-2013 às 17:49 Responder

Luiz Eduardo

Olá, primeiramente parabéns pelo trabalho. Excelente trabalho mesmo.

Estou com uma pequena dúvida, como posso limitar o zoom máximo desse sistema. É que tenho um banco de dados com cadastros no mesmo endereço, e quando clicado o zoom vai no máximo.

Abraço

29-08-2013 às 15:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz Eduardo

Fala Luiz,

Dê uma olhada aqui, na propriedade "maxZoom": https://developers.google.com/maps/documentation/javascript/reference?hl=pl&csw=1#MapOptions

Abs!

30-08-2013 às 17:35 Responder

Henrique

Amigo, bom dia. Excelente post. Só que, estou com uma dúvida. Na versão 2 da api do google maps, existia um marcador gerado utilizando um StyledMarker e um StyledIcon. Com isso, automaticamente, eu poderia mudar a cor do marcador e o texto dentro dele. Agora, não funciona mais. Quando adiciono vários marcadores no mesmo mapa, todos eles ficam com a mesma cor/conteúdo. Como posso fazer isso na v3 dessa api? Terei que ter uma imagem para cada um? Desde já agradeço. Abraço.

03-09-2013 às 11:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Henrique

Fala Henrique,

Nesse caso, eu criaria imagens de diferentes cores para cada marcador.

Abs!

16-09-2013 às 17:51 Responder

Márcio Reis

Cara, como havia dito antes, ótimo post, mas estou com um problema, se puder me ajudar, eu ficaria muito grato mesmo, estou rachando a cabeça com isso dês do ultimo comentário, haha

Eu tenho que tornar os marcadores "dinâmicos", ou seja, eles serão exibidos por meio de uma pesquisa (por data) que vai puxar as latitudes e longitudes de um banco de dados MySQL e exibi-los nos seus devidos lugares, "pode isso Arnaldo"? haha

Obrigado pela atenção e desculpe a burrice =/

03-09-2013 às 11:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Márcio Reis

Fala Márcio,

A regra é clara: Pode sim!

Como você está pegando direto do banco de dados, você deve tirar o "getJson" e fazer um post em uma URL, a qual irá no banco, pegará todos os pontos e irá gerar um JSON dinâmico. Com esse JSON, você faz a iteração normalmente, como se fosse um JSON estático. Ficaria algo assim:

$.ajax({
            type: "POST",
            url: "gerarJsonDinamico.php",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (pontos) {
                        for (var i = 0; i < pontos.length; i++) {
                                   var latitude = pontos[i].Latitude;
                                  
                                   // E assim por diante...
                        }
            }
});

16-09-2013 às 17:47 Responder

Márcio Reis

Em resposta a Rodolfo Pereira

Muito obrigado pela atenção e pela ajuda =) Funcionou perfeitamente bem.

17-09-2013 às 11:38 Responder

Eduardo

Em resposta a Rodolfo Pereira

Seria assim????

function carregarPontos() {
$.ajax({
type: "POST",
url: "pontos.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (pontos) {
for (var i = 0; i < pontos.length; i++) {
var Id = pontos[i].Id;
var latitude = pontos[i].Latitude;
var Longitude = pontos[i].Longitude;
var Descricao = pontos[i].Descricao;

var latlngbounds = new google.maps.LatLngBounds(); .......

10-10-2013 às 23:14 Responder

Eduardo

Em resposta a Eduardo

Seria assim???? arquivo mapa.js abaixo:

function carregarPontos() {
$.ajax({
type: "POST",
url: "pontos.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (pontos) {
for (var i = 0; i < pontos.length; i++) {
var Id = pontos[i].Id;
var latitude = pontos[i].Latitude;
var Longitude = pontos[i].Longitude;
var Descricao = pontos[i].Descricao;

var latlngbounds = new google.maps.LatLngBounds(); .......


no arquivo pontos.php eu pego os dados que quero do BD e já transformei num array json, mas não aparece nada no mapa, dá uma olhada, por favor.

http://www.brotas.com.br/mapa.php

15-10-2013 às 10:14 Responder

Elizama

Em resposta a Rodolfo Pereira

Muito obrigada. Consegui :)

17-10-2013 às 13:59 Responder

Angelina

Em resposta a Rodolfo Pereira

Rodolfo Pereira seu tutorial e explicação são ótimos e me ajudaram muito. Obrigada!

Só precisava de uma ajuda quanto a exibir os pontos que pego do banco. Já fiz gerei o arquivo Json dinamicamente e vejo os dados. Mas não consigo exibi-los como marcadores.
Peguei seu exemplo (que antes mostrava todos os marcadores) e alterei o código (conforme sua orientação), mas os marcadores não aparecem no mapa. Eu usei as variáveis criadas.
O que fiz de errado?

for (var i = 0; i < pontos.length; i++)
{
  var id = pontos[i].Id;
  var latitude = pontos[i].Latitude;
  var longitude = pontos[i].Longitude;
  var nome = pontos[i].nome;
  var latlngbounds = new google.maps.LatLngBounds();

  // $.each(pontos, function(index, ponto)
  //{
  var marker = new google.maps.Marker(
  {
    // position: new google.maps.LatLng(ponto.latitude, ponto.longitude),
    position: new google.maps.LatLng(latitude, longitude),
    title: "PONTO",
    icon: 'img/marcador.png'
  });

Obrigada e aguardo sua ajuda.

08-12-2013 às 13:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Angelina

O seu código parece estar correto. Você tem algum link para que eu possa ver o código completo?

06-01-2014 às 17:04 Responder

Angelina

Em resposta a Rodolfo Pereira

Rodolfo,

você pode ver o http://pontos.hol.es e o arquivo json criado pelo http://pontos.hol.es/gerarJsonDinamico.php, ou ainda posso te enviar o código.

Obrigada pela atenção,

08-01-2014 às 23:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Angelina

Tentei abrir a URL http://pontos.hol.es/gerarJsonDinamico.php mas deu o seguinte erro:

Warning: mysql_connect(): Access denied for user 'u914682753_eco'@'10.1.2.11' (using password: YES) in /home/u485511012/public_html/gerarJsonDinamico.php on line 6 Não foi possível estabelecer uma conexão com o gerenciador MySQL. Warning: mysql_select_db(): Access denied for user 'root'@'localhost' (using password: NO) in /home/u485511012/public_html/gerarJsonDinamico.php on line 9 Warning: mysql_select_db(): A link to the server could not be established in /home/u485511012/public_html/gerarJsonDinamico.php on line 9 Não foi possível estabelecer uma conexão com o banco. Warning: mysql_query() expects parameter 2 to be resource, boolean given in /home/u485511012/public_html/gerarJsonDinamico.php on line 14 Warning: mysql_fetch_array() expects parameter 1 to be resource, null given in /home/u485511012/public_html/gerarJsonDinamico.php on line 17 null

Você pode corrigir por favor? Valeu!

13-01-2014 às 16:25 Responder

Angelina

Em resposta a Rodolfo Pereira

Rodolfo,

foi uma falha de teste. Já corrigi e agora está aparecendo:

{"pontos":[{"id":"1","nome":"TESTE1","latitude":"-23.6758774","longitude":"-54.56003590000000"},{"id":"2","nome":"TESTE2","latitude":"-23.4187144","longitude":"-47.40832030000001"}]}
Por favor verifique.

Obrigada,

13-01-2014 às 17:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Angelina

Hm, de acordo com o seu JSON, troque o seu "for" por:

for (var i = 0; i < pontos.pontos.length; i++)

13-01-2014 às 17:21 Responder

Angelina

Em resposta a Rodolfo Pereira

Rodolfo deu certo a sua dica, mas também tive que fazer a conversão do tipo da latitude e longitude.

Obrigada!

14-02-2014 às 21:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Angelina

De nada!

20-02-2014 às 16:31 Responder

Frederico

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo.
Não estou conseguindo fazer os pontos aparecerem no mapa.
Estou usando um json dinâmico, poderia me ajudar a achar onde está o problema?

Link do mapa
http://deriks.net/mapa-da-dengue/
Arquivo json
http://deriks.net/mapa-da-dengue/js/pontos.php
JS mapa
http://deriks.net/mapa-da-dengue/js/mapa.js
Desde já obrigado.

27-02-2015 às 13:05 Responder

Saulo

Em resposta a Márcio Reis

Marcio, também preciso disso. Você conseguiu? Poderia me ajduar? Já fizemos um arquivo PHP que consulta o BD, cria o array e converte em uma variável JSON, que é imprimida por um echo.... mas e agora? Como integramos isso com os mapas no JS?

10-10-2013 às 23:31 Responder

Márcio Reis

Em resposta a Saulo

Fala Saulo.

Olha, se no banco de dados você está armazenando as coordenadas, então é simples, você coloca um Echo na parte do código do mapa que deveria ir as coords e cria um laço de repetição para exibir todos os resultados, a partir dai você pode fazer campos de busca para tornar essa consulta mais filtrada. Simples não? qualquer dúvida, me adicione no Facebook e podemos ver com mais calma, vou ficar muito feliz em poder ajudar.

https://www.facebook.com/marcio.reis.108

14-10-2013 às 09:19 Responder

Alberto

ótimo post!!! Obrigado por ta compartilhando do conhecimento ;)

mas poderia me ajudar com algo, no meu mapa tem vários pontos alguns, utilizei o agrupamento e ficou ótimo, mas alguns pontos possuem a mesma lat e long (representando apts de prédios), teria alguma forma de no agrupamento verificar que tds tem a mesma lat e long e alterar o ícone para um prédio ?

desde ja obrigado ;D

03-09-2013 às 12:13 Responder

Márcio Reis

Em resposta a Alberto

Ué, porque você não deixa só um marcador nesse ponto e coloca o icone de prédio? se todos tem exatamente a mesma lat e long.

05-09-2013 às 11:37 Responder

Alberto

Em resposta a Márcio Reis

Obrigado Márcio Reis.

Eu recebo os dados de um JSON, a priori não da pra saber quais lat e long são iguais... queria fazer isso de forma dinâmica

05-09-2013 às 12:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alberto

Seguindo o raciocínio do Márcio, você poderia checar para cada ponto, antes de inserí-lo no mapa, se há um ponto com a mesma latitude e longitude já inserido no mapa.

Nessa verificação, se já houver um ponto no mapa, você pode remover esse ponto que está no mapa e adicionar outro igual, só que com o ícone de prédio, ou alterar o original, mudando somente o ícone para um prédio.

16-09-2013 às 17:40 Responder

Pedro Goulart

Exelente post Rodolfo, ajudou muito!!

Tenho duas perguntas:

1) Tem como eu usar essa API dentro de uma aplicação Android?

2) Estudando um pouco mais, percebi que posso usar imagens próprias, e é exatamente isso que quero... Imagens de dentro de estabelecimentos... Será que você poderia me ajudar, indicando um artigo? Ou então, me indicando como faço isso?

Grato

05-09-2013 às 17:55 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro Goulart

Fala Pedro,

Respondendo:

1) Sim, dê uma olhada aqui: https://developers.google.com/maps/documentation/android/?hl=pt-BR

2) Não entendi direito... onde você quer colocar essas "imagens próprias"?

Abs!

16-09-2013 às 17:38 Responder

Pedro Goulart

Em resposta a Rodolfo Pereira

Então Rodolfo,
Minha aplicação será nada mais nada menos que um mapa do interior de grandes estabelecimentos... Para isso, tenho que usar imagens próprias, certo?
Porque o Google ainda não me possibilita entrar em todos os estabelecimentos, então eu mesmo terei que "fazer" as fotos... Entende? Estou com grande dificuldade nisso, já faz 1 mês que não tenho progressão no projeto.. Se tiver alguma outra sugestão... Um método mais fácil para fazer isso.. Toda ajuda é bem vinda!! Desde já, agradeço e aguardo nova resposta!

16-09-2013 às 21:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro Goulart

Pedro, isso me parece meio complexo... não sei como te ajudar no momento. O máximo que posso fazer, é te desejar boa sorte hehehe.

18-09-2013 às 15:26 Responder

Fábio Monteiro

Rodolfo, primeiramente parabéns pelo tutorial, gostaria de saber como integrar um lightbox, tipo abrir um lightbox por exemplo com um iframe de algum conteúdo quando clicar nos pontos do mapa? Outra pergunta é como não agrupar os pontos?

Abraço.

09-09-2013 às 22:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fábio Monteiro

Fala Fábio,

Qual plugin Lightbox você quer utilizar?

Para não agrupar os pontos, basta não utilizar o MarkerClusterer.

Abs!

16-09-2013 às 17:34 Responder

Fábio

Em resposta a Rodolfo Pereira

Estou querendo usar o fancybox 2 http://fancyapps.com/fancybox/. Seguindo todos os passos do seu tutorial funciona normalmente agrupando os marcadores, quando excluo a chamada do MarkerClusterer os marcadores desaparecem. Mais alguém tá tendo esse problema?

Abraço.

16-09-2013 às 18:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fábio

Fala Fábio,

Vamos lá:

Abrir o conteúdo do marcador dentro do fancyBox:

1. Coloque as referências do fancyBox na sua página;

2. Abra o arquivo "mapa.js";

3. Na linha 52, altere de:

abrirInfoBox(ponto.Id, marker);

para:

abrirFancyBox(ponto.Id, marker, myOptions.content);

Veja que aqui, apenas mudei o nome da função (para ficar de acordo com o plugin que estamos utilizando) e passei um novo parâmetro, que é o conteúdo do InfoBox, onde definimos na linha 44.

4. Na função "abrirFancyBox", adicione o parâmetro "content":

function abrirFancyBox(id, marker, content) { ...

5. Adicone dentro da função "abrirFancyBox":

$.fancybox.open(content);

no lugar de:

infoBox[id].open(map, marker);

6. É isso! Agora o conteúdo abrirá dentro do fancyBox.

O código final ficará algo assim:

function abrirFancyBox(id, marker, content) {
  if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
    infoBox[idInfoBoxAberto].close();
  }

  $.fancybox.open(content);

  idInfoBoxAberto = id;
}

...

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
  abrirFancyBox(ponto.Id, marker, myOptions.content);
});

Para não agrupar os pontos:

1. Retire as linhas 55 e 61 do arquivo "mapa.js";

2. Passe o parâmetro "map" para o marker:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
  title: "Meu ponto personalizado! :-D",
  icon: 'img/marcador.png',
  map: map
});

Abs!

25-09-2013 às 12:53 Responder

Fábio Monteiro

Em resposta a Rodolfo Pereira

Rodolfo, muito obrigado pela solução, consegui de uma forma muito parecida com essa, vou testar a sua forma. Postarei o resultado do meu mapa com o código no git para quem se interessar. Além desses recursos ainda colori regiões do mapa com polígonos customizados por região, tô criando uma vídeo aula pra mostrar o passo a passo e tudo num só mapa.

Abraço,

25-09-2013 às 16:03 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fábio Monteiro

Show! Quando ficar pronto, coloque o link do GitHub aqui, que eu coloco no post como um case :-)

26-09-2013 às 09:38 Responder

joao

Eu preciso do mapa do espirito santo e Rio de janeiro juntos para que eu possa marcar onde eu tenho operações


att

16-09-2013 às 10:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a joao

João, você precisa do mapa pronto, é isso?

16-09-2013 às 17:33 Responder

Higor

Muito bom, ajudou demais. valeu :)

17-09-2013 às 08:28 Responder

Fernando

Opa blz Rodolfo, e se eu quizer personalizar um icone para cada marcador, como ficaria?

17-09-2013 às 09:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando

Fala Fernando!

Dê uma olhada na minha resposta da dúvida do Henrique: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-254

18-09-2013 às 15:21 Responder

Shilton

Maravilhoso..!
Ótimo meu cara!!!!

18-09-2013 às 09:53 Responder

Shilton

Rodolfo, to precisando de exemplo em que eu informo o local de origem e o local de destino e ele me mostre na tela no mapa o caminho e a distancia e rotas...

18-09-2013 às 09:55 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Shilton

O meu próximo post tratará sobre esse assunto, fique ligado! :-)

18-09-2013 às 15:20 Responder

Wérick

Excelente post! Está me ajudando bastante.
Entretanto, estou com alguns problemas em relação a exibição da caixa de informação.

18-09-2013 às 12:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wérick

Qual problema?

18-09-2013 às 15:20 Responder

Werick

Em resposta a Rodolfo Pereira

Rodolfo, obrigado por me responder.

Na verdade estava com problemas para adicionar a descrição para cada ponto marcado no mapa utilizando a caixa de informação padrão.
Ai acrescentei a Descrição no arquivo JSON e mudei o infowindow.setContent() e funcionou de boa.

Mais uma vez, obrigado :D

18-09-2013 às 16:48 Responder

Manoel Liberato

Em resposta a Rodolfo Pereira

Bom dia a todos, parabéns Rodolfo pelo excelente post. Eu precisava realmente de um artigo com essa qualidade para poder fazer uma tentativa de implementação aqui. Fiz algumas modificações:

1 - Coloquei full screen(melhor para visualizar aqui);
2 - Tracei uma polyline em torno de uma área específica;
3 - Tracei alguns polígonos para diferenciar as cores de setores dentro dessa área.
4 - Coloquei marcadores diferentes de acordo com sua instrução nos comentários.
5 - Coloquei as informações do arquivo pontos.json em um banco de dados MySQL e fiz um arquivo php que busca essas informações e gera o arquivo pontos.json.

Preciso de ajuda em duas questões:

1 - Gerar o arquivo json assim é correto? Tem alguma maneira melhor que vocês possam me mostar? Eu tentei a dica acima de deixar apenas o id do ponto no json e pegar as informações no banco de dados quando clicar e não consegui(não sei nada de inglês);
2 - Eu preciso poder selecionar os pontos que quero de acordo com os marcadores, tipo eu coloco marcadores amarelos, azuis e verdes. Preciso poder clicar em algo ou consultar e selecionar apenas uma cor ou duas ou todas, e ainda preciso separar por data a consulta.

Me ajudem aew, que não estou conseguindo... :-)

Segue o link do mapa para vocês verem o que fiz até agora:

http://www.amigosdecaserna.com.br/teste

18-09-2013 às 22:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Manoel Liberato

Fala Manoel!

Parabéns pelo seu mapa, ficou animal! \o/

Respondendo suas questões:

1. Pelo que eu entendi, você gravou o conteúdo inteiro do arquivo JSON no banco, certo? É uma opção válida (digo, funciona hehe), mas deixo aqui outras opções para você pensar a respeito:

a) Gravar cada ponto do mapa em uma tabela "Pontos", com as informações separadas (latitude, longitude, conteúdo, etc.), e através de uma linguagem de programação, criar o arquivo JSON "on the fly". Se esses pontos não mudassem com frequência, você poderia usar um recurso de cache para não precisar consultar o banco de dados toda hora que alguém fizer uma requisição à URL que contém o JSON com os pontos;

b) Gravar os pontos direto no arquivo JSON, ou seja, a cada novo registro, você pega o arquivo JSON que está no seu FTP, abre ele, e insere o ponto em questão.

Sobre deixar apenas o "Id" de cada ponto no arquivo, e no clique do marcador recuperar as demais informações no banco de dados, eu cheguei a fazer isso no projeto http://www.cidadereclama.com.br/. Abra o arquivo http://www.cidadereclama.com.br/scripts/mapa/jquery.mapa.js e veja que para cada ponto, estou colocando no listener dele um "makeClosure", o qual contém a função "openInfoWindow", que possui a função "openInfoWindow" (isso aqui está parecendo um "Inception", hauehuaehua), que possui a função "abrirBalao", a qual dá um POST para recuperar as demais informações do ponto.

Creio que essa estratégia, pelo que eu vi no seu mapa, não seja uma boa. Eu ficaria entre a opção "a" ou "b" que te falei.

2. Você quer que, por exemlo, ao clicar em um marcador amarelo fora do mapa (como se fosse uma opção de filtro), todos os marcadores amarelos dentro do mapa abram?

25-09-2013 às 12:34 Responder

Alexandre

Rodolfo, primeiramente parabéns pelo post.

Consegui fazer funcionar tudo correto. Mas preciso quando existem 2 marcadores no mesmo ponto(LatLng), abrir o balão com as informações dos 2 endereços. Por exemplo um condominio de apartamento. O latlong é o mesmo então ele agrupa, não deixando abrir o balão com as informações. Queria que conseguisse clicar e no mesmo balão abrisse as informações de 2 apartamentos diferentes

Não sei se fui claro?

Obrigado desde já.

20-09-2013 às 10:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Fala Alexandre!

Antes de colocar cada ponto no mapa, você precisa verificar se já existe um ponto inserido na latitude e longitude em questão. Se houver, recupere esse ponto inserido previamente no mapa e adicione as informações necessárias do novo ponto.

Seria isso.

Abs!

25-09-2013 às 12:29 Responder

Adriano dos Santos

Olá, Rodolfo!

Primeiramente, parabéns pelo excelente post.

Estou fazendo um webapp que utiliza o google maps e, pra isso, usei como base o arquivo que vc disponibilizou pra download.

Meu problema é que, quando clico em um marcador e existem outros abertos, eles não estão fechando automaticamente.

Sabe me dizer o que pode ser isso?

Esse é o exemplo do meu arquivo online: http://sicapps.com.br/testes/maps/maps/

Obrigado desde já.

23-09-2013 às 15:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adriano dos Santos

Fala Adriano!

O mapa o qual você está se referindo é este: http://sicapps.com.br/testes/maps/maps/credenciadas.php?

Se sim, aqui está fechando normalmente, quando abro um outro marcador.

Abs!

25-09-2013 às 12:27 Responder

Adriano dos Santos

Em resposta a Rodolfo Pereira

É que antes de você responder eu consegui resolver. Rsrs

Eu dei uma classe pra meus infoboxes, e usei o hide() do jquery pra ocultar todos, antes de abrir um novo.

25-09-2013 às 12:52 Responder

Jonathan

Olá, eu gostaria de saber se é possível utilizar o MarkerClusterer determinando uma cor fixa, ou seja, mantê-lo na cor azul, independente do valor que nele estiver apresentando. Seria ainda melhor se houver uma forma de determinar a cor que eu quero para ele. Obrigado!

24-09-2013 às 08:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jonathan

Fala Jonathan,

Abra o arquivo do markerclusterer que não está comprimido: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/src/markerclusterer.js

Procure pelo trecho de código abaixo:

/**
* The default root name for the marker cluster images.
*
* @type {string}
* @constant
*/
MarkerClusterer.IMAGE_PATH = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m";

Altere o valor do IMAGE_PATH para um valor que seja do seu site, ficando algo assim:

MarkerClusterer.IMAGE_PATH = "http://www.princiweb.com.br/mapa/imagens/m";

Aí é só você criar as suas imagens, indo de m1.png até m5.png, e colocando-as na pasta imagens. Quanto maior o número, maior é o número de pontos agrupados.

Você pode ver as imagens padrões do Marker Clusterer aqui: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/images/

24-09-2013 às 17:24 Responder

Jonathan

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo,
acho que essa dica irá resolver o meu problema,
muito obrigado!

24-09-2013 às 17:49 Responder

Jonathan

Em resposta a Rodolfo Pereira

Bom dia Rodolfo, consegui resolver o meu problema do MarkerClusterer utilizando o seguinte exemplo:

...
var clusterStyles = [
  {
    color: 'black',
    url: 'img/markers/m1.png',
    height: 50,
    width: 55
  },
  {
    color: 'black',
    url: 'img/markers/m2.png',
    height: 55,
    width: 60
  },
  {
    color: 'black',
    url: 'img/markers/m3.png',
    height: 60,
    width: 65
  }
];

var mcOptions = { gridSize: 50, maxZoom: 19, styles: clusterStyles};
var Cluster = new MarkerClusterer(map, Markers, mcOptions);
...

Imagino que isso poderá ajudar mais pessoas. Obrigado!

25-09-2013 às 09:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jonathan

Boa Jonathan! Obrigado por compartilhar conosco o seu código. Abs!

25-09-2013 às 11:46 Responder

Guilherme

Excelente post Rodolfo, parabéns.
Estou trabalhando num projeto mobile, usando PhoneGap, a fim de ter um mesmo código rodando em várias plataformas, e pretendo utilizar a clusterização de markers que você exemplificou. Obrigado

25-09-2013 às 15:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme

Legal Guilherme! Se possível, quando você finalizar o seu projeto, compartilhe o seu código conosco :-)

04-10-2013 às 10:33 Responder

Wagner Nascimento

Ola Rodolfo boa tarde, estou tentando construir um mapa com dados vindo do BD. Quando a consulta tem apenas 1 registro o mapa é mostrado corretamente, mas quando tem mais de um registro ele só mostra o marcador do último registro da lista. Você pode me ajudar ? Abaixo segue o código :

$.getJSON("http://localhost:8083/control/estabelecimentoBE.php?metodo=obterPorLocal&cidade=" + cidade + "&bairro=" + bairro, function(pontos) {
  $.each(pontos, function(key, data) {
    var latLng = new google.maps.LatLng(data.latitude, data.longitude);
    var marker = new google.maps.Marker({
      position: latLng,
      title: data.razao_social,
      map: map
    });

    var myOptions = {
      center: latLng,
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
    };

    var map = new google.maps.Map(document.getElementById("mapa"), myOptions);
    marker.setMap(map);
  });

Obrigado desde já

25-09-2013 às 16:38 Responder

Rubens Laine

Em resposta a Wagner Nascimento

parabéns pelo post.

estou tendo problemas na visualização, pois tenho apenas um endereço para configurar, o mapa fica com o zoom tão grande que não se consegue ver as ruas ao redor. como posso fazer para que o zoom não ficasse tão grande visto que o mesmo faz automaticamente.

desde já agradeço a atenção dispensada,

26-09-2013 às 17:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rubens Laine

Fala Rubens,

O zoom você define no "options", dentro da fução "initialize":

var options = {
  zoom: 5,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Quanto maior o número, mais zoom o seu mapa terá, e vice-versa.

27-09-2013 às 11:35 Responder

Rubens Laine

Em resposta a Rodolfo Pereira

sim eu já tentei, mas parece que não importa o valor que coloco ele aparece sempre do mesmo tamanho. veja como fica : www.novadirecaorh.com.br/teste/mapa/

27-09-2013 às 16:37 Responder

Juliano Caetano

Em resposta a Rubens Laine

Não sei se é a forma mais correta, mas se vc definir esta linha " marker.setPosition(latlng); " (sem aspas) no final da função initialize, o mapa vai assumir o zoom que você definir.

02-10-2013 às 12:14 Responder

Rubens Laine

Em resposta a Juliano Caetano

Juliano, colocando a linha no final da função inicialize o problema com o zoom foi corrigido ... mas agora não aparece o ícone da posição.

abcs.

03-10-2013 às 09:00 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rubens Laine

Rubens, vi que o link do seu mapa não está mais disponível. Você conseguiu resolver o seu problema?

16-10-2013 às 21:55 Responder

Ricardo

Em resposta a Rodolfo Pereira

Estou com o mesmo problema do rubens, e se eu coloco o tal de marker.setPosition(latlng);

o ICONE Desaparece e ainda perde as propriedades de cor que e coloquei.... ... como eu resolvo isso? meu mapa e esse

http://rochemoveis.com/apimapa/
o unico problema e o zoom que fica mto grande e nao da pra ver as ruas em sua volta.... eu coloquei la embaixo um map.setZoom(16);

e ai o mapa abre ENORME e se eu der um Refresh ele fica no tamanho certo....

23-11-2013 às 13:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wagner Nascimento

Fala Wagner,

No seu código, a variável "map" é inicializada para cada ponto que o JSON retorna. Nesse caso, você precisa inicializar o "map" somente 1 vez, já que ele é único para todos os pontos. Veja no meu código que essa variável é inicializada na função "initialize", e declarada no começo de código. Mesma coisa para o "myOptions".

Sugiro que você utilize o meu código de base, e a partir dele, construa o seu.

27-09-2013 às 11:30 Responder

Jefferson

Boa noite, eu achei perfeito seu post, e gostaria de saber se tem como fazer que o mapa mostre os pontos cadastrados mais próximos quando uma pessoa pesquisar o endereço, seria para fazer um onde estamos, e que eu to querendo da uma atualizada na pagina da empresa, segue o link do onde estamos atual, http://www.prevtruck.org.br/onde-estamos.php
E mais uma vez parabéns pelo trabalho.

26-09-2013 às 18:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jefferson

Fala Jefferson!

Talvez esse tutorial possa te ajudar: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

04-10-2013 às 10:27 Responder

Jefferson

Em resposta a Rodolfo Pereira

Rodolfo, valeu mesmo muito obrigado, ficou muito bom o novo onde estamos, ele é baseado em muitas partes do seu tutorial, assim que for ao ar eu te mando o link. Mais uma vez muito obrigado.

04-10-2013 às 12:14 Responder

Henrique

Valeu brother, estava difícil de achar algo que envolvesse o desenvolvimento.
Pode me ajudar?
Eu estou trabalhando em um projeto na faculdade, gostaria de criar um site onde usuário clicasse em um link e aparecesse diretamente no mapa aquilo, no caso é uma obra da prefeitura, se possível ter uma visão de rua. É possível fazer isso correto?

Então as ferramentas web que sei trabalhar.
JavaScript
Html
Css3
O que mais vou precisar? Terei muitas dificuldades?
Eu conheço outras linguagens tbm, mas com web só sei isso e nada muito avançado.
Então, com o meu conhecimento consigo por em prática tudo o que vc dispõe aqui na sua página? O que eu posso precisar?

Cara obrigado mesmo pela suas postagens foi difícil achar algo em português.
Ótimo trabalho!
Abraço!

27-09-2013 às 00:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Henrique

Fala Henrique!

É possível sim, ao clicar em um link, aparecer as informações em um mapa. Agora, com a visão da rua, nunca fiz nada desse tipo... aí recomendo você dar uma lida na API do Street View: https://developers.google.com/maps/documentation/javascript/streetview?hl=pt-br

Acho que essas tecnologias que você listou são suficientes para trabalhar nesse projeto. O importante é se dedicar bastante e não desistir facilmente :-)

Boa sorte no seu projeto! Quando você o concluir, se possível, deixe o link do projeto aqui para compartilhar com o pessoal.

Se precisar de uma força, estamos aí.

27-09-2013 às 10:53 Responder

Taynah

Oi Rodolfo!

Adorei seu post! Parabéns! Eu tive uma dúvida quanto ao info box, gostaria de acrescentar informações como gráficos e fotos, é possível editar e inserir html dentro do json? ou fazer com que ele redirecione para uma página onde tenha o conteúdo e acione ?

Obrigada,

Taynah

27-09-2013 às 09:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Taynah

Oi Taynah!

É possível adicionar código HTML no JSON sim. O seu código ficaria assim:

pontos.json

...
{
  "Id": 1,
  "Latitude": -19.212355602107472,
  "Longitude": -44.20234468749999,
  "Conteudo": "<p>Imagem:</p><img src=\"http://www.princiweb.com.br/blog/content/upload/imagens/criando-mapa-personalizado/caixa-informacao-google-maps.jpg\" alt=\"Uma imagem qualquer\" width=\"100\" height=\"100\" /><strong>Que imagem bonita!</strong>"
},
...

mapa.js

var myOptions = {
  content: ponto.Conteudo,
  pixelOffset: new google.maps.Size(-150, 0)
};

Isso deve funcionar. Eu só tentaria separar ao máximo o HTML do JavaScript, digo, no arquivo JSON temos código HTML, o que não é algo muito elegante de se fazer. Tente fazer um template em HTML, e para cada ponto que você estiver iterando no "$.each", passe as informações desse ponto para esse template, o qual ficará responsável de renderizar o HTML. Assim você separa melhor as responsabilidades.

27-09-2013 às 10:46 Responder

Taynah

Em resposta a Rodolfo Pereira

Muito obrigada Rodolfo! Ja ajudou bastante!
Voce poderia me explicar melhor o $.each ?
No caso eu passaria o comando no arquivo mapa.js na parte do inbox e ele alimentaria esse template html que apareceria dentro da caixa?
Beijos,

Taynah

28-09-2013 às 16:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Taynah

Sim, na teoria seria isso mesmo.

Sobre o método ".each()", você pode ler mais sobre ele aqui http://api.jquery.com/each/.

Caso você já tenha algum código para me mostrar, fica mais fácil te ajudar.

04-10-2013 às 10:24 Responder

joilson

como faço pra criar um mapa com endereço e tudo mais?
e que eu to criando um app e só falta o mapa/
você pode me ajudar?

29-09-2013 às 15:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a joilson

Poder ajudar, eu posso... mas qual é exatamente a sua dúvida? "tudo mais" fica muito subjetivo, sabe como é né...

04-10-2013 às 10:21 Responder

Max

Antes de mais nada, parabéns pelo tutorial, muito bem explicado> Gostaria de aproveitar e lhe pedir uma ajuda, caso eu queira exibir mapas variáveis de acordo com o endereço de cadastro do cliente informado num formulário para criação de uma conta, como ficaria o script? Obrigado

02-10-2013 às 19:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Max

Fala Max!

Tente ser um pouco mais específico na sua pergunta... achei um pouco genérico demais. Você tem algum código que você tenha alguma dúvida?

04-10-2013 às 10:20 Responder

Max

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo, vou ser mais claro referente a minha duvida citando um exemplo:

Suponhamos que um cliente ( usuário ) se registre no site para criar uma conta.
Ao se registrar ele vai preencher um formulário com alguns de seus dados ( estado, cidade, etc...) esses dados irão ser armazenados num BD mysql. Quando ele acessar sua conta deve de aparecer um mapa indicando sua localização apartir desse dados registrados no BD. Como serão clientes diferentes e localizações, cada um terá digamos assim em sua página "seu mapa". Eu estaria utilizando JavaScript para isso ser possivel? O site está feito em ASP.
Muito Obrigado

04-10-2013 às 18:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Max

Fala Max,

Nesse caso, o que você acha de usar isso http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html para o usuário cadastrar o seu endereço? O bom é que você já vai ter a latitude e longitude do endereço do cliente.

Caso não seja possível fazer o mapa acima, e sim somente um formulário com campos de estado, cidade, endereço, número etc, dê uma olhada aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-250

16-10-2013 às 21:51 Responder

elizama

Gostei do post, estou mexendo com a Api do google. Preciso lançar pontos no mapa, mas sem usar $.getJSON? tem como?

03-10-2013 às 22:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a elizama

Sim, é possível. O "$.getJson" é apenas uma das várias maneiras que você tem para obter os dados dos pontos e inserí-los no seu mapa.

Onde e como os dados dos pontos estão armazenados no seu caso?

04-10-2013 às 10:17 Responder

elizama

Em resposta a Rodolfo Pereira

Meus dados estão armazenados no Banco de Dados MySql, preciso pegar latitude e longitude do BD para marcar os meus pontos. Como faço isso?

04-10-2013 às 11:44 Responder

Diego

Em resposta a Rodolfo Pereira

E ai Rodolfo!

Excelente post, muito bem explicado!

Estou começando com desenvolvimento WEB, e desenvolvo em PHP.
E queria saber com voce, se voce já teve aquele problema famoso:

" The Google Maps API server rejected your request. The 'sensor' parameter specified in the request must be set to either 'true' or 'false "

Já declarei verdadeiro e falso e nada, sempre da o mesmo problema.

Valeu Rodolfo!

04-10-2013 às 18:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego

Fala Diego,

Certifique-se que na inclusão do script da API do Google Maps você está utilizando o parâmetro sensor:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Pelo que você comentou, você já colocou isso, então é estranho dar esse erro. Você tem o link do mapa para que eu possa dar uma olhada?

16-10-2013 às 21:48 Responder

Rivaldo Rosendo

como colocar rotulo no ícone.. tipo titulo fixo

04-10-2013 às 16:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rivaldo Rosendo

Dê uma olhada aqui: http://sub1.econym.org.uk/gmap/elabel.htm

16-10-2013 às 23:44 Responder

Carlos Antonio

Jovem ótimo tutorial,
Estou com uma duvida, queria mudar o incone, no caso teria que vir junto com a coordenadas no aquivo .json. Como não manjo muito lhe pergunto, teria como?

07-10-2013 às 02:53 Responder

Carlos

Em resposta a Carlos Antonio

Esta na Mesmo modo do tutorial, se eu levar a variable icon. Para o Aquivo json como pego ela on .js?

07-10-2013 às 12:35 Responder

Márcio

Caro Rodolfo,

Como ligar dois pontos com o "google earth" faz.

Ótimo artigo

Obrigado

08-10-2013 às 15:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Márcio

Fala Márcio,

Você tem um link para eu ver esse "ligamento"?

16-10-2013 às 21:43 Responder

Bruno Machado de Melo

Boa noite meu amigo, primeiramente gostaria de dizer que é bastante interessante a forma como vc descrever o que fez. Estou testando aqui em meu computador, e tudo está funcionando perfeitamente.
Tenho uma pergunta: Tem como colocar o nome do local em cima do ponto azul? Eu gostaria de carregar em cima do ícone do ponto o nome dele que eu criasse por exemplo, ponto 1 em cima do ícone, tem como??

09-10-2013 às 22:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Machado de Melo

Dê uma olhada aqui: http://sub1.econym.org.uk/gmap/elabel.htm

16-10-2013 às 23:46 Responder

Ricardo

Bom dia Rodolfo

Como eu faço para o mapa abrir em uma cidade específica, ao invés do Estado?

12-10-2013 às 11:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Fala Ricardo,

Coloque a lontitude e longitude do estado, e um zoom suficiente para aparecer somente o estado em questão.

16-10-2013 às 21:40 Responder

Ricardo

Em resposta a Rodolfo Pereira

Deu certo, muito obrigado.

Mais uma pergunta, como eu faço para colocar fotos no conteúdo do inbox ?

Obrigado

16-10-2013 às 23:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Dê uma olhada nessa resposta: www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-390

16-10-2013 às 23:41 Responder

Ricardo

Em resposta a Rodolfo Pereira

Entendido. Mais uma vez, obrigado pela ajuda.

17-10-2013 às 00:41 Responder

Edison

Oi, estou tentando rodar, e não estou conseguindo... o que pode ser?

Há parabéns ficou muito legal mesmo!

13-10-2013 às 22:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Edison

Fala Edison,

Sem você explicar o que está acotecendo, fica difícil ajudar hauhauhua. Você pode explicar melhor o seu problema? Se possível, coloque um link para que eu possa visualizar o seu mapa.

16-10-2013 às 21:39 Responder

edison

Em resposta a Rodolfo Pereira

Conseguir resolver, falta de atenção minhas rsrsrs :-)... funcionou certinho cara....

16-10-2013 às 23:06 Responder

Mario

Cara, tá show.
Me ajudou muito.

Obrigado!

14-10-2013 às 14:15 Responder

Ricardo

Muito bom o post Rodolfo!!

Mas tenho uma duvida.. seria possível um infobox com as informações de um estabelecimento já cadastrado no mapa?
Pergunto isso pois o que eu gostaria de fazer seria já carregar o mapa com o infobox aberto e com as informações do proprio google

Obrigado!

14-10-2013 às 22:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Fala Ricardo,

Creio que não seja possível obter as informações de um estabelecimento direto do Google. Mas caso você encontre algo relacionado a isso, nos avise :-)

16-10-2013 às 21:38 Responder

César

Seu artigo é de grande serventia, me ajudou bastante. Obrigado pela contribuição.

14-10-2013 às 23:13 Responder

Tiago Borges

Cara, parabéns. Naveguei a internet inteira em busca de soluções, a sua foi a mais pratica e eficaz. Mas se não for abusar demais, gostaria de uma ajuda sua. Como eu faço pra criar um link para um marcador? Tipo, vou ter um botão com uma url que vai me levar até um ponto do mapa onde vai existir um marcador.

Desde já agradeço, e mais uma vez, parabéns.

15-10-2013 às 10:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tiago Borges

Fala Tiago,

É possível sim. Mas deixe eu entender melhor:

Você quer que ao exibir o marcador (vindo de um determinado link), abra o balão de informações dele? Tipo isso aqui: http://www.cidadereclama.com.br/1053. Perceba que ao entrar nesse link, abre o mapa com o marcador em destaque, e o seu balão de informações aberto.

16-10-2013 às 21:33 Responder

Tiago Borges

Em resposta a Rodolfo Pereira

Grande Rodolfo,

É exatamente isso. Vou ter uma lista de lojas em um menu, sendo assim, gostaria que quando clicar em um link, o mapa abrisse já no ponto da loja clicada. O mapa está aqui, já com alguns pontos: http://www.redecomprecerto.com.br/upload/lojavirtual/teste/

Desde já, agradeço.

17-10-2013 às 08:08 Responder

Tiago Borges

Em resposta a Rodolfo Pereira

Não tem como? =(

21-10-2013 às 09:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tiago Borges

Fala Tiago,

Tem como sim. Basta através desse link você conseguir a latitude e longitude do ponto, passar essas informações no "center" do "options" do mapa, com um zoom grande. Só isso.

29-10-2013 às 18:08 Responder

Guilherme Harrison

Em resposta a Rodolfo Pereira

Opa, isso responde minha pergunta.

Mas pode ser um pouco mais específico para um amigo novato em js?

Obrigado!

22-08-2014 às 17:55 Responder

Guilherme Harrison

Em resposta a Guilherme Harrison

Consegui! O segredo foi alimentar o marker com as propriedades do local e colocar um listener para o link do menu (que chama a função). Ficou assim:

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
var latlng = new google.maps.LatLng(-19.922787, -43.945141);

var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};

map = new google.maps.Map(document.getElementById("innerMapa"), options);
}

initialize();

function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}

infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}

function carregarPontos() {

$.getJSON('/boca/wp-content/themes/boca/assets/pontos.json', function(pontos) {

$.each(pontos, function(index, ponto) {

var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Encontre o Boca do Forno mais perto de você!",
map: map,
icon: '/boca/wp-content/themes/boca/img/icons/ponto.png'
});

var myOptions = {
content: ponto.Texto,
pixelOffset: new google.maps.Size(-150, 0)
};

infoBox[ponto.Id] = new InfoBox(myOptions);
infoBox[ponto.Id].marker = marker;

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(ponto.Id, marker);
});

markers[ponto.Id]=marker;

});
});

};

function clicarNoMenu(i) {
google.maps.event.trigger(markers[i], "click");
}

carregarPontos();

e o menu tem o link chamando a função clicarNoMenu com a ID do local.

nota: não vou precisar agrupar os pontos, então não incluí no código.

25-08-2014 às 10:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Harrison

Boa!

27-08-2014 às 11:48 Responder

caio robaldo

TOP.

15-10-2013 às 14:57 Responder

Tiago

Olá!

É possível ter esse nível de personalização utilizando a Api static? Pergunto isso porque só consigo capturar a imagem no modo static.

15-10-2013 às 15:17 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tiago

Fala Tiago,

Não tenho conhecimento na API do Google Static Maps estático. Recomendo que você dê uma lida aqui: https://developers.google.com/maps/documentation/staticmaps/?hl=pt-br

Bons estudos!

16-10-2013 às 21:32 Responder

caio robaldo

Olá Rodolfo!
Usando seu tutorial fiz um mapa pegando os dados direto do meu banco postgres ao invés do arquivo JSON.
Funcionou tudo ok as informações X marcadores no mapa, porém um detalhe está me deixando intrigado: a posição do InfoBox sempre aprece em um ponto fixo no mapa e não em cima de cada marcador! Estou a dias procurando onde pode ser e não acho, talvez por não ter experiencia em js.. Vc pode me dar uma luz ?

Pesquisando eu entendi algumas uma coisas: o ponto sempre vai aparecer no meio por causa do "pixelOffset: new google.maps.Size(-150, 0)". Tentei colocar dentro do myOption a localizacao de cada ponto: "position: new google.maps.LatLng($lat[$x],$long[$x])" porem não adiantou!

A única função que não alterei, por pegar os dados no banco, foi a "abrirInfoBox". Pode ser alguma coisa nela ?

Se precisar mando o codigo.

Obrigado, abraço.

16-10-2013 às 11:21 Responder

Thiago

Excelente conteudo cara, Consegui fazer, mesmo com uns erros estranhos, como não exibir os pins, porém baixei o seu modelo pra comparar e vi que não tinha basicamente nada diferente, estranho... Mas alterei pelo seu codigo e deu certo.

mas minha duvida real é essa:

Quando acesso o link via mobile ( celular ) Os pins não aparecem... como corrigir isso?dá pra criar esse mesmo layout de um jeito responsivo? '-'

Me dá uma luz em relação a isso, pq nao tenho conhecimentos em javascript e nunca tinha mexido na api do maps, achei mt legal, parabens.

Brigadão.

16-10-2013 às 14:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Fala Thiago,

A não exibição dos marcadores se deve ao endereço errado das imagens dos mesmos. No "icon", você está colocando o endereço correto? Por exemplo, se você colocar "icon: 'img/marcador.png'" e o endereço da sua página que exibe o mapa for "http://www.princiweb.com.br/mapa/", você tem que garantir que há o arquivo "marcador.png" na pasta "/mapa/img/".

E o fato de carregar no celular não muda nada... funcionando no desktop, funcionará normalmente no celular.

16-10-2013 às 21:25 Responder

thiago

Em resposta a Rodolfo Pereira

Então Rodolfo, estou vendo a questão do ponto no mapa, mas queria pedir pra vc acessar via smartphone se possivel, pra ver se com voce é a mesma coisa... Aqui no meu, fica lento e pequeno, sabe? eu queria uma coisa mais foursquare... rs... eu realmente nao entendo de API`s e afnis, vc pode me explicar melhor como adaptar isso?

link onde está hospedado pra vc dar uma visualizada:
http://enterapi.com.br/testemapa/

18-10-2013 às 02:58 Responder

Thiago

Em resposta a thiago

Desculpa te encher de perguntas, parece spam, rs...
Eu dei uma lida na api do Foursquare e infelizmente entendi menos ainda.
kkkkk, até porque queria um sistema de badges e tal, mas isso fica pra depois, a minha duvida principal é a seguinte:

Como ficaria para receber estes pontos atraves do banco de dados?
Gracas ao seu outro tutorial, criei uma página com um mapa que pega as coordenadas, estou indo pra adaptar e adicionar esses arquivos no banco de dados (porque tentei ler o artigo que vc postou pra adicionar via json e nada funcionou, enfim) Como faria pra assim que o maps da minha página entrar, ele acessar o banco de dados e receber o local desses pontos? ficaria mais seguro e creio que eu conseguiria desenvolver com mais facilidade.


A página que criei para adicionar seria essa:
http://enterapi.com.br/testemapa/adicionar.htm

Ainda tenho a duvida com relacao ao maps pra smartphone, achei meio ruim sabe... caso eu quisesse criar um layout responsivo pra funcionar como um app hibrido, penso talvez em criar apenas uma interface pra a pessoa fazer download e acessar diretamente do site, fica muito feio, o mapa está nesse link ( http://enterapi.com.br/testemapa/ ) e via celular não fica legal

18-10-2013 às 15:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Fala Thiago,

Sobre a velocidade do mapa no celular, creio que seja assim mesmo... hehehe.

Sobre a outra dúvida, creio que te respondi aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-479

29-10-2013 às 17:53 Responder

Caio Robaldo

Fala Rodolfo, blza?
Fiz o mapa pegando os dados direto do banco postgres ao invés do arquivo JSON. Funcionou tudo ok as informações X marcadores, porém um detalhe está me deixando intrigado: a posição do InfoBox sempre aprece em um ponto fixo no mapa e não em cima do marcador! Estou a dias procurando onde pode ser e não acho, talvez por não ter experiencia em js.. Vc pode me dar uma luz ?
Já tentei alterar na myOptions o "pixelOffset: new google.maps.Size(-150, 0)" e usar o "position: new google.maps.LatLng({$lat[$x]},{$long[$x]})" mas não funcionu.
Alguma dica?
Obrigado.

16-10-2013 às 18:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Caio Robaldo

Fala Caio!

Estranho... nunca vi isso huaehuae. Você tem um link que eu possa ver esse mapa?

16-10-2013 às 21:24 Responder

Caio

Em resposta a Rodolfo Pereira

Fala Rodolfo, blza!
è intranet, então não tem como te enviar o link.
Eu enviei o codigo por email pra vc dar uma olhada, pq não consegui enviar por aqui ok?
Valeu um abraco

17-10-2013 às 14:19 Responder

Silva

Em resposta a Caio

Caio, poderia mostrar o código? estou em uma situação parecida. :/

21-01-2016 às 12:24 Responder

Gilmar Nunes

Parabéns Rodolfo, aprendi bastante com o post.

18-10-2013 às 11:16 Responder

victor

você teria um exemplo de exibir um único ponto no mapa, só que ao invés de usar a latitude e longitude, usar o endereço informado ?

18-10-2013 às 16:26 Responder

Nilton

Parabéns Rodolfo, belo trabalho!
Gostaria de utilizar esse mapa com apenas 3 pontos em cidades próximas.
No entanto, como faço para que ao clicar no ícone de um dos pontos ao invés de abrir a caixa de texto, o mapa dar um zoom mostrando a rua?
Grato.

19-10-2013 às 13:03 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Nilton

Fala Nilton,

Altere o "listener" para:

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
   aumentarZoom(marker);
});

Crie a função "aumentarZoom":

function aumentarZoom(marker) {
   map.setZoom(15);
   map.setCenter(marker.position);
}

Altere o valor do "setZoom" para o que achar melhor. Lembre: quanto maior o valor do zoom, maior será o mesmo, e vice-versa.

29-10-2013 às 17:45 Responder

Nilton

Em resposta a Rodolfo Pereira

Grande Rodolfo.
Muito obrigado pela ajuda.
Forte abraço.

29-10-2013 às 18:09 Responder

Cesar Guterman

Prezado Rodolfo, quero parabenizá-lo pelo seu blog, extremamente positivo e instrutivo. Votei no Peixe Grande e, pode acreditar, somente voto em quem realmente merece. Espero poder esclarecer pontos dos posts com você sempre que precisar.

20-10-2013 às 09:21 Responder

Edson Bezerra

Muito importante a forma em que transmitiu as informações facilita o entendimento e auxilia na utilização da ferramenta.

Parabens

20-10-2013 às 21:25 Responder

Thiago

Primeiramente obrigado pela resposta via e-mail, pelas respostas nos comentários e pelo post, tá mt bom, parabens...

Pelo fato de eu nao ter mt conhecimento em javascript, fiquei meio perdido e nao to sabendo adicionar os pins no mapa via bd.

é o seguinte:
Quero criar um sistema onde o usuário vai poder cadastrar os dados, (usuarios que eu liberaria, no caso) esses dados iriam conter um endereço também, e seriam pins do mapa.

No form de cadastro ele coloca o endereço, o endereço é salvo, junto com as coordenadas, no banco de dados

adaptei o máximo do tutorial ao que eu sei, ou seja, está assim:
http://enterapi.com.br/testemapa/adicionar.htm

os campos estao ocultos, de latitude e longitude, mas ficam salvos no bd (imagem) http://uploaddeimagens.com.br/images/000/101/581/full/Untitled-1.jpg?1382374042

Eu quero uma maneira de assim que entrar na pagina inicial
http://enterapi.com.br/testemapa/

Ao invés de carregar o json ele carregue via mysql, pra ver os usuarios cadastrados, logo, mostrar apenas os endereços cadastrados.


Li todos os comentários e nao consegui aplicar isso ao meu, desculpe a chatice... é possivel fazer isso?

21-10-2013 às 14:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Fala Thiago,

Gere o arquivo JSON pela linguagem de programação back-end (PHP, C#, etc.). Isso resolverá o seu problema.

29-10-2013 às 17:43 Responder

Thiago

Em resposta a Rodolfo Pereira

Não sei se é algum problema comigo, sei lá... mas não consegui entender.

Você podia criar um tutorial assim, se possível... porque vi esses tutoriais de links espalhados pelos comentários e caso eu gere o json como eu faria pra salvar ele num arquivo externo?

Acho que por meu nivel de programação ser pequeno, precisava de uma coisa mais detalhada.

Dá pra fazer pegando os dados via mysql e exibindo direto no mapa?

29-10-2013 às 20:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

A ideia não é salvar o arquivo .json gerado pelo back-end, e sim termos uma URL que gere dinamicamente o .json. Quem sabe num futuro post eu fale sobre isso :-)

Sobre a última pergunta, direto assim não dá. Você precisa de alguma forma disponibilizar esses dados do MySQL em algum formato para ler por JS.

02-12-2013 às 16:06 Responder

Tiago

É possível fazer uma alteração pra carregar o mapa com todas as infobox abertas?

22-10-2013 às 10:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tiago

Sim. No seu arquivo mapa.js, dentro da função "carregarPontos", adicione o "infoBox[ponto.Id].open(map, marker);":

...

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
   abrirInfoBox(ponto.Id, marker);
});

infoBox[ponto.Id].open(map, marker);
                       
markers.push(marker);

...

29-10-2013 às 17:38 Responder

Augusto

Rodolfo,
Meus parabéns, o seu tutorial "matou a pau".
Continue assim.
Abraços!

22-10-2013 às 14:48 Responder

Rafael

Olá Rodolfo, parabéns pelo blog muito boa as informações... pois poucos entendem bem dessa API... como eu que me atrapalho direto, rsrs...

Cara, eu precisava de um mapa onde vou passar umas 5 ou 6 coordenadas, e ele tem que traçar a rota traçada por estas coordenadas deixando os pontos e colocando o endereço na tela por onde passou.. por exemplo:
A -- rua etca
B -- rua etcb
C -- rua etcc

Só que to apanhando muito... só consegui colocar o ponto inicial e final, mais não consigo passar os outros pontos... não quero colocar o código aqui para não poluir seu blog... mas se quiser eu te mando por email, se vc puder me ajudar...

22-10-2013 às 15:28 Responder

Rafael

Em resposta a Rafael

Consegui com polyline, pois meus pontos não são apenas na rua....

Só precisava saber como faço para colocar os endereços em cada marcador e mostrar o endereço com o caminho de um ponto a outro

23-10-2013 às 15:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael

Não basta adicionar os marcadores em cima da linha que você desenhou?

29-10-2013 às 17:37 Responder

Rafael

Em resposta a Rodolfo Pereira

Não, precisava dos endereços... consegui assim:

Criar Marcador:

function createMarker(point,info,dt,map) {
   var iconURL = 'img/pata.png';
   var iconSize = new google.maps.Size(32,34);
   var iconOrigin = new google.maps.Point(0,0);
   var iconAnchor = new google.maps.Point(15,30);

   var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

   var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
      icon: myIcon
   });

   google.maps.event.addListener(marker, 'click', function() {
      endereco(info,this.position,dt);
      infowindow.open(map,this);
   });

}

Função endereço():

function endereco(info,point,dt){
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode({'latLng': point}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK){
         infowindow.setContent(results[0].formatted_address);
      } else {

      }
   });
}

Precisava me livrar daquele (OVER QUERY LIMIT) não consegui adicionar aqueles timeout para poder ler...

30-10-2013 às 10:05 Responder

Antonio

Boas, estou a utilizar o teu código no entanto deparo-me com um problema pertinente. A situação é a seguinte eu estou a gerar os pontos via getJSON na função carregar pontos . agora o que eu quero é actualizar os meus pontos consoante os novos dados recebidos. Para isto usei aqui o setTimeout de um dos utilizadores que aqui comentaram. Onde apago todos os pontos e em seguida volto a chamar a função carrega pontos. Até aí tudo bem, no entanto quando faço zoom in ou zoom out aparece me um duplicado do ponto que anteriormente foi apagado, ou seja tenho o novo ponto actualizado, e tb o antigo que foi apagado. Mas isto só quando faço zoom in ou out. Alguma sugestao?

24-10-2013 às 15:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Antonio

Você possui algum link para que eu possa ver esse mapa funcionando?

29-10-2013 às 17:35 Responder

Clodoaldo Maia

Como faço para ao clicar no marcador aparecer no Infobox, além da descrição, uma imagem ou conjunto de imagens que o usuário possa ir passando, como por exemplo um slide show.

24-10-2013 às 19:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Clodoaldo Maia

Clodoaldo, a ideia é que você carregue no HTML do Infobox todas as imagens, e na abertura do mesmo, você faça uma chamada a alguma biblioteca a qual irá transformar essas imagens em um slideshow.

29-10-2013 às 17:34 Responder

Halina Veloso e Zarate

Boa Noite, Rodolfo

Achei alguns posts seus em blogs, acerca do Google Maps Api, e resolvi pedir ajuda para você.
Sou estudante de arquitetura e meu trabalho final de graduação é um projeto de intervenção urbana relacionado com mobilidade e transportes. Para definir, por exemplo, onde cada ponto de onibus se localizaria em meu projeto, pretendo fazer uma analise de isocronas, para que um ponto esteja a uma distância de 10min. a pé do próximo ponto.
Achei tutoriais ensinando a fazê-lo: http://www.youtube.com/watch?v=_r74pl0RyD0

Porém, não sei instalar ou acessar essa janela do google maps, na qual aparece um espaço para preencher com a localização e outro para por os minutos de distancia. Só sei entrar na pagina do google maps comum.
No começo achei que o api do google maps era um programa a ser baixado como o google earth.. mas não achei em lugar nenhum para download, então concluí que é um diretório de acesso direto pelo navegador.

Por favor, me ajude, como posso acessar esse api?

25-10-2013 às 09:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Halina Veloso e Zarate

Oi Halina!

A página a qual você se refere, com um campo para preencher a localização e um campo para colocar os minutos, está aqui: http://sandropaganotti.com/wp-content/goodies/demos/isochrone/index.html

Para fazer o que você precisa, você precisa dar uma olhada no código fonte dessa página - https://github.com/sandropaganotti/isochrone-with-google-map - e fazer as alterações necessárias, caso hajam.

29-10-2013 às 17:29 Responder

Halina

Em resposta a Rodolfo Pereira

Muitíssimo obrigada!!
Nossa, era exatamente isso mesmo que eu precisava!!
Mais uma dúvida, estou fazendo o trabalho na cidade de Goiânia, Goiás. Porém, quando digito, por exemplo, Praça Cívica, ele gera os pontos mas fica muito afastado, não consigo identificar onde estão os pontos, nem consigo movê-los.
Tem como aproximar a imagem, dando zoom?

Desculpa a ignorância, mas o que é código fonte?

30-10-2013 às 09:10 Responder

Halina

Em resposta a Halina

Neste outro, ele gera as isocronas a pé, de carro ou bicicleta, mas também só consegui em paris, e não em goinânia... http://www.richanalysis.net/aroundme/paris/ Como posso obter essas informações para meu objeto de estudo?

30-10-2013 às 09:43 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Halina

Realmente, tentei aqui e a ferramenta não funciona para Goiânia.

E sim, a API do Google Maps permite esse zoom e criar a máscara. Mas aí, você teria que programar isso tudo.

02-12-2013 às 16:04 Responder

Halina

Em resposta a Rodolfo Pereira

Neste outro aplicativo, é gerada uma máscara, ou seja, uma zona de isocrona, e é possível dar zoom e aproximar para ver onde exatamente estão os pontos.
http://www.youtube.com/watch?v=c5VsbCDWPLk Porém, eu não consegui que ele funcionasse para Goiânia.
O API do Google Maps permite esse zoom, ou cria também uma máscara?

30-10-2013 às 09:32 Responder

Laís

Oi Rodolfo!


Não consegui carregar os pontos no mapa.

Como faço para incluir a biblioteca jQuery na página?

Como eu vinculo o Json no HTML?

Sou leiga, então seja compreensivo com as minhas dúvidas hehe :D

29-10-2013 às 09:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Laís

Oi Laís!

Para incluir a biblioteca jQuery na sua página, basta fazer o download da mesma, e colocá-la no seu HTML, antes de fechar a tag body. Dê uma olhada aqui: https://github.com/rodolfoprr/GoogleMapsAPIv3MapaPersonalizado/blob/master/index.html

Sobre vincular o JSON no HTML, é só seguir o código que expliquei no post... caso você tenha algum código para eu dar uma olhada, ficaria melhor para te ajudar.

29-10-2013 às 17:20 Responder

Jose Silvestre

Em resposta a Rodolfo Pereira

Olá! Como posso fazer um mapa igual ao que está no site www.nomeubairro.pt?
Será que você pode me ajudar a conseguir? Poderia fazer esse código para mim por favor?

Obrigado!

18-11-2013 às 13:00 Responder

Laís

Mais uma pergunta.

Se eu quiser que o mapa abra com a visualização 'Satélite', o que devo fazer?

29-10-2013 às 09:52 Responder

Laís

Em relação a deixar o mapa como satélite, já consegui... pode desconsiderar ;D

29-10-2013 às 10:14 Responder

Alessandro

Bom dia Rodolfo, estava pesquisando na net sobre como eu colocar no meu banco de dados um certo ponto para quando eu estiver próximo dele, aparecer no meu sistema a tantos metros de tal lugar(no caso o tal lugar seria o nome que teria dado aquele lugar) eu vi que vc entende muito sobre este assunto, ai resolvi te pedir uma ajuda se puder me ajudar é claro, eu tenho um sisteminha de rastreamento de veículos e queria add nele um ponto por ex: vc para seu carro na sua casa ai vc olha no rastreamento e marca (casa do Rodolfo) quando o carro estiver próximo de lá ele avisa a tantos metros de casa do Rodolfo entende?



Seria possível uma ajuda sua, desde já agradeço.





Meu sistema se vc quiser dá uma olhada,



www.rasttrear.com.br



usuário: carro

senha: carro

29-10-2013 às 21:01 Responder

Diogo Ramos

Rodolfo, bom dia. Ótimo post. Tenho o seguinte problema: abro o exemplo e no infobox as acentuações são exibidas corretamente. Na aplicação em produção a acentuação não funciona. Estou trabalhando na aplicação com a mesma codificação que o exemplo, ou seja, UTF-8. O que pode estar ocorrendo? Grato desde já.

30-10-2013 às 09:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo Ramos

Hm, estranho. Você tem algum link para que eu possa ver o problema?

02-12-2013 às 15:53 Responder

Rogerio Nunes

MUITO BOM!! Obrigado mesmo, salvou meu tcc Hehe

30-10-2013 às 10:43 Responder

Miguel

Em resposta a Rogerio Nunes

Legal seu tutorial. Eu também gosto de fazer adaptações no google mapa.
de uma olhada neste meu blog...http://xyz3m.blogspot.com.br/

31-10-2013 às 13:25 Responder

Mario

Em resposta a Miguel

Olá Rodolfo,

Gostei muito do seu tutorial. É excelente! Porém ainda tenho uma dúvida: é possível adicionar um link externo como a href para abrir um infobox e fechar outros no mapa? Não encontrei isso em lugar nenhum.

04-11-2013 às 00:45 Responder

Wilson Roberto Mantovani

Em resposta a Miguel

Miguel gostei muito o seu exemplo, como posso estuda-lo, to pensando em algo para disponibilizar para a população a localização de praças com academias, bosques, equipamentos públicos e outros...obrigado

06-11-2013 às 11:50 Responder

Miguel Matos

Em resposta a Wilson Roberto Mantovani

Envie-me um email, que eu te envio o html , alerto que somente adaptei de um exemplo que encontrei na net (meu email pu2mnq@gmail.com)

06-11-2013 às 16:31 Responder

Bruno Machado de Melo

Meu amigo, estou com um problema na hora de pegar as informações de latitude e longitude do banco de dados e jogar para o mapa. Já olhei todos os post que fizeram a mesma pergunta mas não consegui implementar no meu...A função carregarPontos () está assim:

function carregarPontos() {
   $.ajax({
      type: "POST",
      url: "pontos.php",
      dataType: "json",
      contentType: "application/json;
      charset=utf-8",
      success: function (pontos) {
         for (var i = 0; i < pontos.length; i++) {
            var Id = pontos[i].Id;
            var Nome = pontos[i].Nome;
            var Latitude = pontos[i].Latitude;
            var Longitude = pontos[i].Longitude;
            var latlngbounds = new google.maps.LatLngBounds();
            $.each(pontos, function(index, ponto) {
               var marker = new google.maps.Marker({ position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude), title: ponto.Nome, icon: 'img/marcador.png' });
               var myOptions = { content: "

" + ponto.Descricao + "

",
               pixelOffset: new google.maps.Size(-150, 0)
            };
            infoBox[ponto.Id] = new InfoBox(myOptions);
            infoBox[ponto.Id].marker = marker;
            infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
               abrirInfoBox(ponto.Id, marker);
            });
            markers.push(marker);
            latlngbounds.extend(marker.position); });
            var markerCluster = new MarkerClusterer(map, markers);
            map.fitBounds(latlngbounds);
         }
      }
   });
}

carregarPontos();

A função Pontos.php está assim: $valores) { if (is_string($indices)) { $array[mysql_field_name($sql,$i++)] = $valores; } } $pontos [ ] = $array; } print json_encode($pontos); ?>

Ele gera o arquivo Json, mas não aparece o ponto no mapa, o que pode ser? Aguardo respostas.

01-11-2013 às 17:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Machado de Melo

Hm, não entendi o motivo de você estar utilizando um $.each dentro do for. Nesse caso, por que não utilizar somente o for?

Outra coisa, dando um console.log() na latitude e longitude das linhas 12 e 13, esses valores estão sendo exibidos corretamente?

02-12-2013 às 15:49 Responder

Olavo Pereira

Como eu retiro o zoom automático? Irei utilizar seu mapa com apenas um ponto e preciso deixá-lo com o zoom um pouco menor...Obrigado e Parabéns!

01-11-2013 às 18:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Olavo Pereira

Para retirar o zoom automático, basta tirar os seguintes trechos de código:

var latlngbounds = new google.maps.LatLngBounds();

...

latlngbounds.extend(marker.position);

...

map.fitBounds(latlngbounds);

02-12-2013 às 15:47 Responder

Rogerio Nunes

Muito bom cara!! Putz, deu tudo certinho! Agradeço demais mesmo!! Queria saber se você podia me dar uma ajudinha! O meu mapa ta funcionando igual esse do seu exemplo, mas queria saber se tem como fazer da seguinte forma, assim que o mapa abrir, mostrar minha localizacao atual (com um marcador diferente) em vez de abrir mostrando todos os pontos que estão no mapa! Você poderia me dar essa força? abraço!

02-11-2013 às 08:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rogerio Nunes

Através do Geolocation, pegue a latitude e longitude do usuário, e crie um marcador com uma imagem diferente.

Para saber como utilizar o Geolocation nesse caso, veja o item "Utilizando a localização atual do usuário" do post: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

02-12-2013 às 15:43 Responder

Victor

Parabéns cara! Muito bom.

02-11-2013 às 14:56 Responder

Mario

Excelente tutorial!!! Gostaria que pudesse me ajudar.

Estou procurando a dias e não consigo!

Eu preciso de vários links que sejam clicáveis fora do mapa ( como a href="link para abrir o infobox dentro do mapa") e abram um infobox dentro do mapa fechando outros infobox se tiverem abertos. Porém não estou conseguindo.

Já pesquisei em um monte de sites e não achei uma única solução sequer. Please, help me!!!

04-11-2013 às 02:24 Responder

Mario

Em resposta a Mario

A idéia é igual a do link http://jsfiddle.net/kjy112/FEexA/ porém para cada link do json. Tem alguma idéia de como fazer?

04-11-2013 às 13:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mario

No seu index.html, crie uma lista vazia, onde iremos armazenar os links:

<ul id="links"></ul>

Após isso, no arquivo mapa.js, dentro do $.each, vamos criar um link para cada ponto e fazer uma associação entre o link e o ponto:

// Criamos o link
var linkExterno = document.createElement('a');  
var linkTexto = document.createTextNode("Link para o ponto " + ponto.Id);
  
linkExterno.appendChild(linkTexto);
linkExterno.href = "#";
  
// Adicionamos o evento
linkExterno.onclick = dispararEvento(marker, "click");
  
// Inserimos o link na lista  
var listaLinks = document.getElementById('links');  
var listaItem = document.createElement('li');
  
listaItem.appendChild(linkExterno);  
listaLinks.appendChild(listaItem);

Por último, crie a função dispararEvento antes da função carregarPontos:

function dispararEvento(object, eventType) {
  return function() {
    google.maps.event.trigger(object, eventType);
  };
}

Agora é só correr pro abraço!

02-12-2013 às 15:20 Responder

Geraldo

Rodolfo, boa tarde.
Preciso de aula particular, pois necessito fazer mapas em meu trabalho.
Você ministra aulas particulares ? Se sim, qual o preço ?

Favor responder diretamente no meu e-mail.

Obrigado.

05-11-2013 às 15:39 Responder

Ricardo

Olá Rodolfo como vai ? Eu queria tirar uma dúvida antes de rodar o mapa que criei com seu post, é possível eu criar links, dentro ou fora do mapa para que ao clicar em determinado link possa ser redirecionado para um ponto específico dentro do mapa ?

Desde já agradeço.

08-11-2013 às 02:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Sim, é possível.

02-12-2013 às 15:16 Responder

joey

hey como iniciar o mapa no satélite?

15-11-2013 às 04:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a joey

Basta colocar o valor do mapTypeId como google.maps.MapTypeId.SATELLITE: https://developers.google.com/maps/documentation/javascript/maptypes?hl=pt-br#MapTypes

02-12-2013 às 15:15 Responder

Bruno

Cara muito Obrigado vlw mesmo estava procurando isso faz muito tempo mas todos os tutoriais estavam muito complicados e o seu me ajudou muito, continue assim...

17-11-2013 às 12:01 Responder

Wilson Roberto

Rodolfo bom dia, não estou conseguindo desagrupar os marcadores conforme sua orientação, ao faze-la não carrega o mapa. pode me auxiliar ?

Para não agrupar os pontos:

1. Retire as linhas 55 e 61 do arquivo "mapa.js";

2. Passe o parâmetro "map" para o marker:


var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Meu ponto personalizado! :-D",
icon: 'img/marcador.png',
map: map

});

18-11-2013 às 11:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wilson Roberto

Há como você disponibilizar para mim todo o seu código? Pode ser um link, ou envie no meu e-mail rodolfo@princiweb.com.br

02-12-2013 às 15:14 Responder

Leonardo

Rodolfo, veja se pode me ajudar.

tenho uma planilha em excel com nomes e endereços e esta lista muda constantemente, várias vezes ao dia.

quero encontrar uma forma que o google maps importe a localização de cada endereço automaticamente e diretamente do excel, ou seja, sem precisar separar os dados, encontrar a localização etc...

existe alguma forma de fazer isso?

18-11-2013 às 17:52 Responder

Weberth

Em resposta a Leonardo

Fala brother, eu tive o mesmo problema que vc, basta comentar a linha

var markerCluster = new MarkerClusterer(map, markers);

21-11-2013 às 11:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leonardo

É necessário fazer um script que leia esse Excel e pegue a latitude e longitude de cada endereço. Basicamente, é isso.

02-12-2013 às 15:11 Responder

Accioli

Rodolfo Pereira parabéns pelo post. Gostaria de saber se é possível rodar o mapa com marcadores e infobox na máquina local. pois eu preciso criar o mapa para apresentar um trabalho e irei integrar a uma time line.Obrigado!

21-11-2013 às 23:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Accioli

Para rodar o mapa, você precisa de internet. De resto, você pode rodar local mesmo.

02-12-2013 às 15:10 Responder

Ricardo Caldeira

Rodolfo parabens pelo POST, rapaz eu tenho apanhado muito e nao descubro o motivo...

estou com problema no ZOOM... ja mudei todos os niveis... ja coloquei ate um

map.setZoom(16);

estilizei um pouco a cor.. mas nao inicia de jeito nenhum no ZOOM que eu quero... eu posso mudar o numero do ZOOM na inicializacao mas nao funciona....

oq vc me sugere... olha o link

http://rochemoveis.com/apimapa/
um detalhe, ele inicia assim com o zoom errado, mas se vc fer um f5, ele fica com o zoom 16 que eu quero..

nao entendo pq na entrada ele fica errado e apos o refresh ele funciona.

pode me ajudar:

23-11-2013 às 02:50 Responder

João Lindoso

Muito bom o tutorial. Sou iniciante e gostaria de saber quem pode me indicar um tutorial sobre como fazer algo parecido com isso, pois tenho que jogar um mapa svg por cima do google maps: http://cidades.ibge.gov.br/xtras/uf.php?lang=&coduf=21&search=maranhao

24-11-2013 às 14:15 Responder

Alexandre

Rodolfo em primeiro lugar parabéns pelo artigo. Vi que ninguém falou nada a respeito, e com certeza sou eu o burrão. Mas vamos lá, eu baixei os arquivo para download e executei o arquivo HTML mas o mapa não monta com seus pontos de exemplo. Onde eu errei???

25-11-2013 às 11:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Sem ver o seu código rodando fica um pouco difícil te responder com certeza, mas chuto que o problema seja na hora de ler o arquivo .json.

Tem como você colocar esse código online para que eu dê uma olhada?

02-12-2013 às 15:03 Responder

Eduardo Mattos

Rodolfo,

Muito bom este teu tutorial !

Parabéns !

Como fazer para o php criar um arquivo .json com as coordenadas extraídas de uma query ao banco de dados ?


26-11-2013 às 12:43 Responder

Marco Antonio

Muito didático, objetivo e completo. Nota 10.

26-11-2013 às 20:01 Responder

Paulo

Muito bom o artigo Rodolfo, me ajuda numa coisa por favor ... é possível estilizar o infobox sem o infobox [ ... rs ...]? Onde posso encontrar os parâmetros diretamente ? Obrigado e sucesso!

27-11-2013 às 09:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo

Sim, é possível, mas é trabalhoso... por isso existem essas bibliotecas prontas.

Infelizmente não sei te dizer onde você pode encontrar uma documentação sobre isso, mas já que o Infobox faz isso, creio que lendo o script dele você pode encontrar alguma coisa útil.

02-12-2013 às 14:57 Responder

Marcelo Souza

Olá Rodolfo,

ao informar uma série de coordenadas existe a possibilidade da API gerar um traço ligando os pontos fornecidos?

27-11-2013 às 20:44 Responder

Eduardo Mattos

Rodolfo,

Muito legal este teu tutorial !

Mas fiquei com algumas dúvidas:
1) Como faco para inserir quebras de linhas no infobox ?
2) Como crio um arquivo .json apartir de um arquivo php que pega os valores do mysql atraves de um select ?
3) Existem eventos com mesma latitude e longitude mas com Descricao diferentes. Elas nao aparecem quando vou dando zoom no mapa. Somente aparece o valor correspondente ao total de eventos proximos ou de mesma localizacao (markerCluster). Como faco para que mostre estes eventos de mesma localizacao ?

Abracos

27-11-2013 às 22:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eduardo Mattos

1. Utilize tag HTML. Nesse caso, pode ser <br />.

2. Veja esse comentário: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-219

3. É necessário fazer uma verificação: Se já há um ponto no mapa em uma determinada localização, você irá pegar esse ponto e acrescentar as informações.

02-12-2013 às 14:53 Responder

Lucas Soares

Excelente artigo Rodolfo....gostaria de aproveitar e tirar uma dúvida com vc. Gostaria de criar um sistema onde o usuário poderá criar um projeto e associar a este projeto vários layers, onde esses layers podem ser importados através de um arquivo, por exemplo .csv ou criar os layers através da ferramenta do google drawing..........pergunta: os atributos de pontos, poligonos, circulos, etc são padrão do google maps v3 e como criar um banco pra salvar essas informções no formato JSON....Grato!!

28-11-2013 às 09:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas Soares

Sim, são padrão. Sugiro que você estude o link: https://developers.google.com/maps/documentation/javascript/overlays?hl=pt-br

Sobre como criar o banco, basta seguir as informações de cada tipo de sobreposição. Creio que o LatLng seja padrão em todos eles, mudando apenas algumas configurações relacionadas à cada tipo de sobreposição.

02-12-2013 às 14:47 Responder

Silvio

Olá!!!
Este material é simplesmente fantástico.
Parabéns.
Mas estou com uma dúvida: tem como gerenciar o marker cluster?
Exemplo: num mapa temos 10 pontos sendo que 3 estão agrupados.
Tem como saber que temos 1 marker cluster no mapa?
Obrigado.

28-11-2013 às 10:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Silvio

Silvio, desculpe-me mas não entendi a sua dúvida. Poderia me explicar melhor?

02-12-2013 às 14:45 Responder

Paulo

Olá, procurei e não encontrei nenhum tutorial em português, somente o seu, parabéns pelo excelente tutorial, muito bem explicadinho.

Agora só fico com uma dúvida, como faço para que todas infowindows apareçam por default quando o mapa for carregado?

Obrigado pela ajuda.

28-11-2013 às 14:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo

O "aparecer por default", seria aparecer todas abertas? Se sim, olhe esse comentário: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-507

02-12-2013 às 14:43 Responder

Ewerton

Seria possível colocar linkagens no texto que fica no balão? Quando a Pessoas clicar abrir a pagina Google mapas.

28-11-2013 às 16:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ewerton

Sim, basta utilizar código HTML dentro do conteúdo do balão, assim como está a tag p.

02-12-2013 às 14:41 Responder

Ewerton

Em resposta a Rodolfo Pereira

Muito Obrigado ajudou muitãoooooooooooooooooooo...

03-12-2013 às 10:25 Responder

Juliano

fala brother, gostaria de saber se seria possivel fazer uma busca por zona de entrega dentro dos mapas personalizados tipo em esse site: http://www.pedidosja.com.br
tipo eu teria o restaurante cadastrado no meu banco de dados e com uma mapa personalizado dizendo a zona de entrega do delivery desse restaurante, o usuario do site digitaria seu endereço e o sistema buscaria todos os restaurantes que atendem aquela regiao. Me de uma luz por favor onde devo buscar e como devo buscar essa função. Obrigado

02-12-2013 às 18:51 Responder

claudioworker

Em resposta a Juliano

O cara.! Vc fez isto no servidor do google ficou bom. Podemo ver o senario desta boa obras, trabalhos, com dados importante, mais oque aconteceria se vc tives sua conta desativada pelo google ou não recuperace a senha como milha de pessoa que tiveram este pobrema. Acho melhor preucuramos servidores ultize tecnologia livres. Na era da informação o governo e corporações rouba cara com nos.
Valeu!

02-12-2013 às 22:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a claudioworker

Se acontecer isso, senta e chora hauehuahe.

Caso você encontre servidores que utilizem tecnologias livres, dá um toque.

06-01-2014 às 17:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Juliano

Hm... eu faria algo assim:

Deixaria uma área para cada restaurante desenhar no mapa qual é a sua área de atuação. Após o término desse desenho, transformaria isso em pontos com latitude e longitude, e gravaria esses pontos no banco de dados.

Quando o usuário fazer a busca no site, pegaria esse endereço, e através da API do Google Maps veria se esse endereço está dentro dessa área desenhada pelo restaurante.

Como é algo trabalhoso de ser feito, não vou colocar o código aqui no comentário hehehe... mas daria um post novo, o que acha?

06-01-2014 às 17:35 Responder

Leonardo

Olá,

como eu faço para aparecer a localização atual de quem está acessando o mapa?

Não consegui fazer com que apareça no mapa, eu pego a localização mas não sei como colocar na tua função

carregarPontos

Abraço

04-12-2013 às 13:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leonardo

Tem algum link para que eu possa ver o seu mapa?

06-01-2014 às 17:33 Responder

Joaquim Neto

Rodolfo, primeiramente parabéns pelo post.
Como faço para polígonos usando JSON?
Tenho uma aplicação (www.pesquisasocial.com/mapas) que gera, mas eu uso o seguinte script (https://developers.google.com/maps/documentation/javascript/overlays?hl=pt-br#Polygons).
Por acaso achei um arquivo de coordenadas em JSON e achei o arquivo mais organizado que da forma que venho fazendo normalmente.
E como pretendo incluir clusterers e seu código está excelente, penso que seria uma alternativa mudar meu código.

Obrigado

04-12-2013 às 18:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joaquim Neto

Como esse JSON está formatado? Você pode me mostrar?

06-01-2014 às 17:24 Responder

Thiago

Tá indo, mesmo devagar ... to comecando a entender! kkk

adaptei o mapa, coloquei os pins personalizados:
http://promuu.com/reclama/
Alterei o "mapa.js" na linha 31, pra: $.getJSON('../consulta.php') ao inves de pontos.json.

Acho que era isso né?

Consegui um arquivo que gerasse do php o json, nao é dinamico ainda, nao consegui fazer pegar.

a pagina consulta.php é:
http://promuu.com/reclama/consulta.php
e gera o json, creio que certo...


isso que fiz é oq devia sedr feito mesmo, ou ha uma maneira de o php salvar os dados json em um arquivo externo?

05-12-2013 às 00:39 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Me parece que está tudo 100%!

06-01-2014 às 17:19 Responder

Rodrigo Sousa

Parabéns pelo excelente trabalho e obrigado por compartilhar.

05-12-2013 às 18:33 Responder

Alexandre Marinuchi

Parabéns pelo blog...existe como eu criar um polígono e receber os endereços que constam no polígono...
Obrigado
Abraço

06-12-2013 às 10:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre Marinuchi

Talvez pegando todas as latitudes e longitudes dos pontos possíveis dentro do polígono e aplicando a localização reversa, tenha como. Porém, creio que seja algo trabalhoso de ser feito.

06-01-2014 às 17:11 Responder

alexandre marinuchi

Em resposta a Rodolfo Pereira

Ola Rodolfo... andei dando uma olhada e acho que o caminho seria por calculo de área do polígono... isso faz algum sentido?? rsrs..
Ou seja verificar as distancias entre os pontos do polígono e dessa forma calcular se a lat e long se encontra dentro.
Sera?? como faço calculo de área no mapa?
Valeu... abraço

06-01-2014 às 18:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a alexandre marinuchi

Mas nesse caso, você pegaria todos os endereços possíveis e um por um verificaria se está dentro do polígono? Seria algo inviável.

13-01-2014 às 15:30 Responder

Guilherme Eduardo Hernandez

A questão de 2 anos atras, lembro que eu conseguia no Google Maps ou no Google Heart (acho que era no Hearth), pesquisar a localização de um hotel (nas Peninsula Iberica), e se escolhido tendo o GPS Garmin conectado ao computador, por intermedio de um clique eu conseguia jogar a localização do referido Hotel no Garmin.
Fazendo hoje um novo roteiro de viagem relativamente identico Espanha e Portugal, não estou conseguindo encontrar a rotina que elabora essa função.
Será que as novas versoes do Google Maps ou Google Heart excluiram essa opção?
Att - Guilherme

08-12-2013 às 16:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Eduardo Hernandez

Hm, não sei viu... infelizmente não sei como te ajudar :(

06-01-2014 às 17:03 Responder

Guilherme Eduardo Hernandez

Em resposta a Rodolfo Pereira

De qualquer maneira obrigado.
Parabens pelo apoio que voce dá ao pessoal. Muito bacana.
Um abraço
Guilherme

08-01-2014 às 22:43 Responder

Tom Mendes

Rodolfo, achei demais o teu exemplo. Mas na prática não funcionou comigo. Os pinos de localização não aparecem. Pode dar uma olhada e ver se eu fiz tudo direitinho? Eu entendi o exemplo e a utilização mas não consegui montar. Baixei os arquivos e os coloquei numa única pasta raiz e refiz as chamadas dos métodos para localizá-los. Tipo: js/mapas.js eu troquei para mapas.js.
Estão no endereço: mygsoft.net/sistemas/pgi/MapaPersonalizado/. Será que vc pode me ajudar?

10-12-2013 às 15:18 Responder

Tom Mendes

Rodolfo,

Dei uma procurada nos comentários abaixo e ví q vc já havia dado a solução em 02-07-2013 às 16:13 ao Dirceu. Fiz o que vc lhe sugeriu e deu certo.

Obrigado e parabéns mais uma vez. A comunidade é forte por causa de caras como vc.

10-12-2013 às 15:39 Responder

Marciano Olinski

Muito bom seu tutorial...mas eu estou com uma duvida, gostaria de saber como posso fazer para abrir o infowindow do marcador a partir de uma lista de endereços...
Esse é um modelo da duvida: http://www.flexpro.com.br/Downloads/modeloGmaps.jpg Já fiz quase de tudo e não deu certo.
Muito obrigado.

10-12-2013 às 17:29 Responder

paulo rogiero

Tenho um site de busca e gostaria de mostrar o resultado de busca no mapa como faço, desde já agradeço.

14-12-2013 às 20:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a paulo rogiero

Primeiramente você precisa ter o endereço ou a latitude e longitude de cada resultado de busca. Após isso, é só seguir o que está explicado aqui no post :-)

06-01-2014 às 16:50 Responder

Marcelo

Excelente esse post, muito bem explicado !!! Parabéns... Por acaso você sabe como eu faço para deixar uma marcador diferente para cada coordenada ??? Abs....

15-12-2013 às 01:44 Responder

Marcos

Em resposta a Marcelo

Marcelo, alguém já perguntou isso nos comentários acima ... de uma olhada ...

16-12-2013 às 11:52 Responder

Marcial

Em resposta a Marcos

Ola caros programadores, esto precisando da vossa ajuda
sto criando um sistema que necessitara a localizacao dos usuarios em tempo real por intermedio do ip

25-12-2013 às 21:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcial

Certo. E qual dificuldade você está tendo?

06-01-2014 às 16:28 Responder

Weslley

Olá Rodolfo, tudo bem?

Estou desenvolvendo um site para um corretor de imóveis o qual quer um filtro avançado no mesmo. Este filtro irá trazer Cidade, Zona/Bairro, Tipo, Status e Valor. O problema é que ele quer que quando exibir um imóvel na Vila Mariana (exemplo) o sistema mostre outros que estão próximos (exemplo Ana Rosa).

Estudando o API do google maps eu descobri que através da propriedade "radius" eu posso a partir de uma Latitude e Longitude inicial EXIBIR em um Raio X de Km quais os locais que tenho (lojas, posto de gasolina, bancos... etc).


Até aí tudo bem, mas eu preciso que quando eu selecionar os imóveis desejados no Filtro do Site o DB exiba em um raio de 10 km (exemplo) quais os imóveis próximos que estão cadastrados no MEU banco de dados. Eu pensei em cadastrar a Lat. e Lgn. no DB e fazer com que o sistema compare com as outras Lat. e Lng. as quais estão dentro desse raio X de km, porém não sei como fazer.


Como você pode me ajudar?

20-12-2013 às 18:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Weslley

Exatamente! Faça isso que você disse: grave no seu banco de dados a latitude e longitude de cada endereço.

Após isso, vamos colocar o código que irá exibir somente os pontos (imóveis no seu caso) que estão dentro de um raio de 10KM:

var diametro_circulo = 10.0;
var pontoCentral = new google.maps.LatLng(latitude, longitude);

for (var i = 0; i < pontos.length; i++) {

  var distancia = google.maps.geometry.spherical.computeHeading(pontoCentral, pontos[i].position);

  var p2 = pontos[i].position;
  var p1 = pontoCentral;

  var R = 6371;

  var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
  var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;

  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c;

  if (d < diametro_circulo) {

    // O ponto está dentro do círculo de 10KM!

    pontos[i].setVisible(true);

  } else {

    // O ponto não está dentro do círculo de 10KM!

    pontos[i].setVisible(false);

  }
}

Entendeu?

06-01-2014 às 16:30 Responder

Rodolfo

Em resposta a Rodolfo Pereira

Chará, parabéns pelo post. Me ajudando muito num projeto da faculdade. Mas como sou iniciante, o que posso fazer para adicionar uma pesquisa de endereço nesse mapa? Exemplo de uso: já com os pontos marcados pesquiso um endereço qualquer e vejo quais pontos marcados estão próximos àquele endereço pesquisado.

21-04-2014 às 14:14 Responder

Joel Henrique Rother

Olá, amigo show de bola seu POST, cara fiz tudo certo, a página não gera erro nenhum, porém não consegue abrir a caixa de dialagos ao clicar em cima, não acontece nada.... Sendo que se eu der um alert uma linha antes da função open para abrir a caixa ele exibi a id do ponto certinho....

22-12-2013 às 17:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joel Henrique Rother

Fala Joel,

Você tem algum link para eu dar uma olhada?

06-01-2014 às 16:29 Responder

Joel

Em resposta a Rodolfo Pereira

http://cartaodoaluno.com.br/new/
Tirei o evento echo que exibia... Se quiser ver os arquivos posso lhe enviar por e-mail

07-01-2014 às 10:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joel

Onde você inicializa o map, não declare-o novamente, pois essa variável precisa ser global para que possamos ter acesso a ela na função que abre o infoBox.

Onde está:

//map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Troque por:

//map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

13-01-2014 às 15:41 Responder

Joel

Em resposta a Rodolfo Pereira

Show, obrigado... Muito 10 seu artigo

13-01-2014 às 16:43 Responder

Joel Henrique Rother

Em resposta a Joel

Opa... Cara fui trabalhar no código e não tinha percebido... O Balão do ponto está aparecendo ao clicar, mas somente em um ponto, conseguiria identificar para mim... Posso lhe enviar por e-mail o arquivo.... Mas o link é www.cartaodoaluno.com.br/new
Agradeço

16-01-2014 às 11:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joel Henrique Rother

No seu arquivo all_pontos.php, deixe o atributo Identifica como inteiro e não string:

[{"Identifica":1,"Latitude":"-29.601660899002674","Longitude":"-51.16231775609742","Titulo":"Boliche"},{"Identifica":2,"Latitude":"-29.726539","Longitude":"-51.162947","Titulo":"Tete"},{"Identifica":3,"Latitude":"-29.685965","Longitude":"-51.139668","Titulo":"Tata"}]

Faça isso e me avise.

28-01-2014 às 10:44 Responder

Joel Henrique Rother

Em resposta a Rodolfo Pereira

Não consegui :(

Tenho assim no meu all_pontos:
****************************************************************************************

$SelContratos = $Sv->selectDB("SELECT * FROM contratos_ca_anuncio WHERE latitude_x <> ''");

foreach($SelContratos as $Pontos){

$pto["Identifica"]= $Pontos["codigo"];
$pto["Latitude"] = $Pontos["latitude_x"];
$pto["Longitude"] = $Pontos["longitude_y"];
$pto["Titulo"] = $Pontos["titulo"];

$retorno[] = $pto;
};

echo json_encode($retorno);
****************************************************************************************

Pode me sugerir alguma solução?

30-01-2014 às 10:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joel Henrique Rother

Tem como converter o "$Pontos["codigo"]" para inteiro antes de atribuí-lo ao "$pto["Identifica"]"?

20-02-2014 às 17:14 Responder

Mauricio Melo

Muito bom, parabéns!

23-12-2013 às 04:14 Responder

Alisson Jr

Rodolfo, teria como eu fazer um código onde ele faria com que o usuário, ao clicar no ponto, este mesmo iria para o centro da página?

28-12-2013 às 07:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alisson Jr

Sim! Quando o usuário clicar no ponto, basta chamar o "setCenter" do objeto do mapa, passando a posição do ponto em questão. Ficaria algo assim:

map.setCenter(marker.getPosition());

06-01-2014 às 16:06 Responder

Leandro

Olá Rodolfo,

Tenho uma dúvida que não consigo achar em lugar nenhum. Tem como eu proibir um determinado ponto no mapa.
Exemplo: Tenho uma rota calculada do ponto A ao ponto B, mas eu quero que ele desvie de uma determinada Latitude / Longitude, um bom exemplo, eu queria que ele desviasse de um pedágio, como faço isso.

Valeu,

03-01-2014 às 12:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leandro

Fala Leandro,

Creio que tenha como fazer isso sim. No seu caso, é o usuário que fornece o ponto A e o ponto B, ou ambos são fixos?

06-01-2014 às 16:02 Responder

Leandro

Em resposta a Rodolfo Pereira

Olá Rodolfo a situação é a seguinte.

Eu trabalho com um sistema de Gerenciamento de Risco. O cliente cadastra a viagem no sistema. Origem "A" e Destino "C", a aplicação gera automaticamente a rota passando pelo ponto "B", porem em alguns clientes, por critérios de suas seguradoras, especificam que a Rota do ponto "A" ao "C", não deve passar pelo ponto "B". Por isso da minha questão sobre, ao invés de incluir ponto de passagens, eu teria de incluir pontos de restrição. Já pesquisei e não encontrei nada parecido. E eu não posso deixar pontos fixos, pois são diversas rotas para diversas viagens, é impossível deixar pontos fixos para realizar estes desvios. Tem alguma ideia de como fazer isso.
Valeu,

09-01-2014 às 10:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leandro

Você está utilizando a API de Rotas do Google Maps, certo? Nesse caso, infelizmente não há como fazer isso.

13-01-2014 às 16:35 Responder

Leandro

Em resposta a Rodolfo Pereira

Olá Rodolfo,

Tirando a API do google, você conhece alguma tecnologia que realize este processo, pois terei de desenvolver isso de qualquer maneira. Qualquer ajuda seria útil.

Valeu,

14-01-2014 às 09:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leandro

Infelizmente eu não sei... boa sorte!

28-01-2014 às 10:41 Responder

samuel

Muito bacana mesmo, Parabens!!!

04-01-2014 às 19:16 Responder

irzelindo Joaquim

Oi Rodolfo como faco pa pegar minha posicao atual por gps ou qualquer coisa

06-01-2014 às 14:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a irzelindo Joaquim

Fala Irzelindo,

Para fazer isso, basta usar o Geolocation: http://dev.w3.org/geo/api/spec-source.html

Nesse post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html no item "Utilizando a localização atual do usuário" eu explico a utilização do Geolocation.

Abs!

06-01-2014 às 15:59 Responder

Thiago

Em resposta a Rodolfo Pereira

Ola Rodolfo,
Baixando os arquivos anexo, o mapa nao esta conforme o Demo.
Algum ajuste a ser feito?

07-01-2014 às 15:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Você tem algum link para que eu possa dar uma olhada?

13-01-2014 às 16:23 Responder

Thiago Gomes

Rodolfo,
No Firefox esta rodando perfeitamente, mas nos outros navegadores não, os pontos no mapa nao aparecem.
Sabe nos dizer o que fazer a respeito dessas incompatibilidades?
Parabéns pelo conteúdo!

07-01-2014 às 16:00 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago Gomes

Isso não é para acontecer... O GMaps geralmente funciona normalmente em todos os navegadores atuais.

Tem algum link para que eu possa dar uma olhada?

13-01-2014 às 16:24 Responder

Adriano

Ola Rodolfo!

Parabéns pelo post!

estou utilizando ele para gerar um único ponto no mapa, coisa simples.
Eu alterei o ICON por uma outra imagem .png que eu mesmo fiz, Local funciona normalmente, porem quando subo ele para um servidor o ícone não aparece.
ele foca no local correto porem não aparece o ícone
também subi o código com o marcador normal que você colocou e também não apareceu.

http://www.allapps.com.br/Demareste/api_google_v3/

sabe me dizer porque?

09-01-2014 às 11:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adriano

O arquivo JSON está retornando 404: http://www.allapps.com.br/Demareste/api_google_v3/js/pontos.json

Para corrigir isso, veja essa minha resposta: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-217

13-01-2014 às 16:43 Responder

Marcos Italo

Alguem sabe como faço para fazer um mapa de um loteamento, onde o visitante do site, pode clicar num lote para reservar? Tipo assim... tenho o desenho do mata de um loteamento onde alguns lotes estão disponíveis, eu gostaria de disponibilizar este mapa online , e quando uma pessoa se interessasse por um lote, ela clicaria no lote desejado (este ficaria marcado) e nós entraríamos em contato com ela (a pessoa), seria do tipo daqueles que tem no momento da escolha de uma assento de uma passagem aerea.

09-01-2014 às 23:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcos Italo

Basicamente você teria que desenhar esses lotes no mapa através de Polígonos (https://developers.google.com/maps/documentation/javascript/examples/polygon-simple?hl=pt-br) e relacionar um evento click para cada um deles.

13-01-2014 às 16:45 Responder

Alberto Wowtilla

Poderia me ajudar por que o código (links abaixo) não consegue ler as strings, mas se no código eu colocar o endereço manualmente, ele funciona perfeitamente.

Bem pra simplificar, abaixo tenho dois códigos: um conforme (inserção manual) e um não conforme (puxando direto do banco), acontece que gostaria que o item "conforme" puxasse diretamente do banco de dados.

Para auxiliar vossa análise, a diferença nos códigos está linha 174.

Não Corforme: http://www.acheimaracanau.com.br/empresa.php?id=1589&tp=1502&cat=1509&scat=1638
Conforme: http://www.acheimaracanau.com.br/exemplo-conforme.php?id=1589&tp=1502&cat=1509&scat=1638

13-01-2014 às 19:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alberto Wowtilla

No seu exemplo "não conforme", na linha 342 do seu HTML, está assim:

var latlng = new google.maps.LatLng(, );

Sendo que você precisa informar uma latitude e uma longitude para o LatLng, ficando igual o exemplo "conforme":

var latlng = new google.maps.LatLng(-3.8682502, -38.622291);

28-01-2014 às 10:21 Responder

James

Olá Rodolfo

quero primeiramente lhe parabenizar por todos os seus posts, os quais tem me ajudado bastante.

tenho algumas dúvidas que até agora não consegui tirar.

com a utilização de todas as APIs que o google oferece com mapas, em relação a resolução que pode ser utilizada em um site é realmente limitada a 640 x 640 ou posso colocar qualquer resolução?

e em relação ao limite de requisições que podem ser feitas, o que acontece quando a cota diaria acaba o site deixa de exibir o mapa e oferecer os serviços durante o restante do dia?

obrigado desde já

13-01-2014 às 22:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a James

A resolução do mapa você define de acordo com a sua preferência... não é limitada a 640x640.

Sobre o limite, eu não sei exatamente o que acontece quando você ultrapassa a cota diária.

28-01-2014 às 10:39 Responder

James Silva

Olá Rodolfo

primeiramente gostaria de lhe parabenizar por esse ótimo post.
gostaria de tirar algumas duvidas:
qual a resolução maxima que posso utilizar o mapa em um site com a Api key?
e se você sabe o valor que é necessario pra obter a versão para empresas ou o que é necessario pra obter!

obrigado desde já.

14-01-2014 às 15:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a James Silva

Você pode escolher a resolução que preferir.

Sobre a API para empresas, dê uma olhada aqui: http://www.google.com/enterprise/mapsearth/

28-01-2014 às 10:43 Responder

DOUGLAS BERGAMO

Parabens Rodolfo pelo tutorial, estou fazendo as alteracoes conforme a minha necessidade que pode ser visto em http://200.146.47.84:8081/mapas, selecione RADIOS.
O meu problema e que vou aproximando e chega a um determinado momento que ele nao separa mais, pelo que entendo sao clientes com as mesmas coordenadas, porem preciso de uma forma de exibir as informações dos mesmos agrupados ou tirar o agrupador para teste e ver quem sao, podes dar um help.

17-01-2014 às 12:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a DOUGLAS BERGAMO

Quando você possui 2 marcadores na mesma latitude e longitude, é só manter um ponto, e na caixa de informações você coloca o conteúdo de ambos os pontos.

28-01-2014 às 13:56 Responder

douglas

Em resposta a Rodolfo Pereira

mas quando tenho dois pontos ele aparece como agrupado sendo assim, quando clico sobre ele ou passo o mouse nao aparece nada pois tem dois clientes no mesmo local.

28-01-2014 às 15:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a douglas

Antes de adicionar o segundo ponto que irá ficar no mesmo lugar do ponto que já existe no mapa, você deve fazer uma verificação: Se já existe um ponto no mapa para o mesmo local do ponto atual, você ignora a inserção desse ponto no mapa, adicionando apenas suas informações no ponto existente.

28-01-2014 às 15:36 Responder

douglas

Em resposta a Rodolfo Pereira

Opa Rodoldo, estou alterando os codigos para ser utilizado conforme a nossa necessidade, coloquei o codigo var mcOptions = {gridSize: 50, maxZoom: 15}; assim exibe o cliente mesmo se ele estiver na mesma lat e long.

Li o seu artigo de inserir o endereço e aparecer o mapa, como posso unir esta ferramenta a este tutorial ja li e reli tentei "jogar' os scripts de um para outro modelo mas nao tive exito, preciso de uma "luz"

07-02-2014 às 11:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a douglas

Cara, difícil eu te dar uma "luz" assim sem nada de código huaehuahea... tem como você me mostrar o que você já fez? Aí com base nisso eu posso te ajudar melhor.

20-02-2014 às 16:41 Responder

douglas

Em resposta a Rodolfo Pereira

qual o teu e-mail?

20-02-2014 às 16:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a douglas

Não tem como você colocar aqui os comentários?

20-02-2014 às 17:31 Responder

douglas

Em resposta a Rodolfo Pereira

Estou enviando para o seu e-mail devido a estar dando erro aqui

20-02-2014 às 18:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a douglas

Vi aqui, e na função "codeAddress" que você quer pegar o endereço e colocar no mapa, certo?

Tenta estudar melhor o código aqui http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html, pois no que você mandou tem pouca coisa no que diz respeito a busca de endereço e exibição do mesmo no mapa.

26-02-2014 às 19:20 Responder

Eduardo Oliveira

Muito bom seu artigo! Está ajudando muito!
Existe alguma forma de tirar o close button das infoBox?
Obrigado!

22-01-2014 às 02:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eduardo Oliveira

Sim, através do CSS.

28-01-2014 às 13:58 Responder

Eliene Gomes

Rodolfo, parabéns pelo post. Show...
Eu estou precisando muito de ajuda, e acredito que você é a pessoa certa.
Bom, vamos ao meu dilema. Preciso colocar o mapa do brasil em uma página do power point (maps.google.com), e colocar os marcadores numas 30 cidades. Trata-se de uma apresentação para uma hiper empresa em Goiânia e preciso fazer bacana. Irei demonstrar os lugares prospectados para prováveis lançamentos de loteamento.
Dúvida 1 - Como melhoro esta imagem do mapa. Ta simplesmente horrível?
Dúvida 2 - Tem alguma outra melhor?
Dúvida 3 - Este marcador que você usou, pode ter a cor modificada. O fundo do mapa é um azul claro que acaba se confundindo com o marcador.

Aguardo e agradeço imensamente.

Eliene Gomes
Goiânia/GO

23-01-2014 às 15:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eliene Gomes

1 / 2. Essa imagem do mapa é padrão. O máximo que você pode alterar, são as cores. Segue alguns exemplos: http://snazzymaps.com/

3. Sim. Basta usar outro ícone. Veja alguns aqui: https://www.iconfinder.com/search/?q=marker

28-01-2014 às 14:13 Responder

André Tchen

Fala Rodolfo, blz? Encontrei sei blog por acaso e to curtindo as matérias, parabéns!!

Quero aproveitar também pra tentar tirar uma dúvida com vc, se seria possível o seguinte: a partir de um ponto do mapa (longitude e latitude) identificar se aquela ponto está em uma rua e se sim, via API, pegar o tamanho daquela quadra onde o ponto se encontra. Não é a rua toda, e sim só aquela quadra. Eu não vou ter dois pontos pra calcular a distância, eu só vou ter um ponto e quero identificar o tamanho daquela quadra. Ficou meio confuso? rs

Valeu!
abs

24-01-2014 às 09:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a André Tchen

Entendi sim hauehuae. Bom, infelizmente não faço ideia de como fazer isso.

28-01-2014 às 14:16 Responder

André

Em resposta a Rodolfo Pereira

Valeu Rodolfo.
Acho que o Google até possui essa informação, pra desenhar o mapa, mas não disponibiliza via API. Já pesquisei em vários lugares, no Brasil e nos gringos, mas não acho nada. Acho que vou ter q morrer com essa dúvida... rs
Vlw!

29-01-2014 às 01:22 Responder

Fernando Luiz

Parabéns pelo post Rodolfo!

Seguindo seu tutorial, não consegui fazer com que os pontos próximos se agrupassem e nem o zoom automático. Você pode me dar uma ajuda?

Script da página:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Arquivo de inicialização do mapa -->
<script type="text/javascript" src="js/mapa.js"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<!-- Agrupamento dos marcadores -->
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript">
var address = [{ Id: 1, Endereco: "Rua rio tibre, 591 - Novo Riacho", Descricao: "Ponto um referente a um endereço qualquer." }, { Id: 2, Endereco: "Rua José Basílio, 15 - Palmeiras", Descricao: "Ponto dois referente a um endereço aleatório" }, { Id: 3, Endereco: "Rua dona lici, 52 - Palmeiras", Descricao: "Ponto três referente a um endereço aleatório." }/*, { Id: 4, Endereco: "Rua bom, 12 - Planalto", Descricao: "Endereço qualquer"}*/];

$(document).ready(function () {
Inicializar();
MarcarLocalidades(address);
});
</script>

mapa.js:

var geocoder = new google.maps.Geocoder();
var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

var Inicializar = function () {
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10
};

map = new google.maps.Map(document.getElementById("mapa"), options);
}

function AbrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}

infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}

function MarcarLocalidades(address) {
var latlngbounds = new google.maps.LatLngBounds();

$.each(address, function(index, objeto)
{
geocoder.geocode( { 'address': objeto.Endereco}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});

var myOptions = {
content: "<p>" + objeto.Descricao + "</p>",
pixelOffset: new google.maps.Size(-150, 0)
};

infoBox[objeto.Id] = new InfoBox(myOptions);
infoBox[objeto.Id].marker = marker;

infoBox[objeto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
AbrirInfoBox(objeto.Id, marker);
});

markers.push(marker);

latlngbounds.extend(marker.position);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
});

var markerCluster = new MarkerClusterer(map, markers);

map.fitBounds(latlngbounds);
}

Agradeço a ajuda!

24-01-2014 às 11:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando Luiz

Você tem isso online?

28-01-2014 às 15:39 Responder

Fernando Luiz

Em resposta a Fernando Luiz

Infelizmente não. Porém, eu acabei percebendo que é inviável fazer requisições, já que a aplicação desse código seria em uma base com muitos registros. Além disso, em determinado registro, o geocoder retorna o erro "OVER_QUERY_LIMIT".
Então eu acabei por salvar a latitude e a longitude de cada registro, fazendo com que o endereço só seja pesquisado na hora do cadastro.
O seu tutorial funcionou perfeitamente! Obrigado!

28-01-2014 às 19:01 Responder

Lúcio

Rodolfo, boa tarde.

Muito bom o trabalho. Parabéns.
Pode me ajudar com 1 coisa ? Exemplo... dentro do json eu adicionei "Categoria" e coloquei o resultado das categorias A, B e C.

Cada categoria representa uma cor da imagem .png que faz marcação dos pontos.

Como adicionaria outras imagens de cores diferentes de acordo com a categoria A,B ou C.

Não sei se ficou claro.

Abs

24-01-2014 às 14:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lúcio

O jeito mais fácil é você nomear as imagens de acordo com o nome de cada categoria: A.png, B.png e C.png

No JS, ao definir o ícone, você coloca:

icon: 'img/' + ponto.Categoria + '.png'

28-01-2014 às 15:33 Responder

Marco Antônio

Em primeiro lugar, gostaria de te agradecer pela postagem, sempre tive vontade de realizar algo do tipo.

E uma dúvida, Rodolfo, existe a possibilidade de os dados de latitude e longitude serem armazenados em um BD exteno para o mapa unindo todos os pontos se tornar dinâmico?

28-01-2014 às 10:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marco Antônio

Sim, há essa possibilidade.

28-01-2014 às 15:35 Responder

kenny roger

legal vou testar aqui num projeto

28-01-2014 às 13:30 Responder

Luã

Tem alguma função que quando eu clicar, abrir o box e me passar as informação para um input? Ex.: Clico num marcador de Recife, e ele além de abrir o box, salva num input (de busca de endereço) aquele endereço?
Preciso colocar o endereço no json e chamar o parâmetro do endereço para o input?

30-01-2014 às 12:04 Responder

Luã

Em resposta a Luã

Consegui!

:P

31-01-2014 às 19:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luã

Opa, agora que vi hauehuahea. Fechou então!

20-02-2014 às 17:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luã

Sim. Basta criar esse campo no seu HTML, e no seu método "abrirInfoBox(ponto.Id, marker)" passar um parâmetro a mais, que seria o endereço. Aí dentro desse método, você pega esse novo parâmetro e coloca no valor do campo.

Para pegar o endereço, caso você já não o tenha na sua base de dados, você pode usar o geocoder. Veja como utilizá-lo aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

20-02-2014 às 17:15 Responder

William

Muito Bom o artigo parabéns !

30-01-2014 às 16:14 Responder

murilo

Cara parabens pelo tutorial, fiz função de change onde altera o endereço e muda no mapa porém não conseguir focar no ponto existe alguma forma?

02-02-2014 às 23:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a murilo

Sim, utilize o "setCenter" do objeto "map":

map.setCenter(marker.position);

20-02-2014 às 17:20 Responder

murilo

Em resposta a Rodolfo Pereira

Certo mesmo assim não esta indo, você tem algum exemplo na sua propria função?

28-02-2014 às 12:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a murilo

Coloque aqui o trecho de código do seu "change".

05-03-2014 às 10:47 Responder

murilo

Em resposta a Rodolfo Pereira

A função que eu chamo ficou assim, só preciso focar no ponto que foi achado

function carregarPontos(bairro) {
   $.getJSON('php/pontos.php',{
      b:bairro,
      c:cid
   }, function(pontos) {
      $.each(pontos, function(index, ponto) {
         var marker = new google.maps.Marker({
            position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
            map: map,
            icon: 'images/marcador.png'
         });

      });

   });

}

desde de já agradeço

06-03-2014 às 20:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a murilo

Ficaria assim:

function carregarPontos(bairro) {
   $.getJSON('php/pontos.php',{
      b:bairro,
      c:cid
   }, function(pontos) {
      $.each(pontos, function(index, ponto) {
         var marker = new google.maps.Marker({
            position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
            map: map,
            icon: 'images/marcador.png'
         });

         map.setCenter(marker.position);

      });

   });

}

Mas esse $.each vai retornar vários pontos... você que dar foco no bairro em questão que tem esses pontos, não é?

10-03-2014 às 15:30 Responder

murilo

Em resposta a Rodolfo Pereira

Isso mesmo, funcionou certinho mas a idéia é essa preciso que apareça os pontos do bairro em questão e nesse caso ele foca somente um ponto!

vlw pela ajuda

10-03-2014 às 23:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a murilo

Nesse caso, você terá que usar a parte "Zoom automático para caber todos os pontos na tela" do post, utilizando o "latlngbounds" e o "map.fitBounds":

function carregarPontos(bairro) {
   $.getJSON('php/pontos.php',{
      b:bairro,
      c:cid
   }, function(pontos) {

      var latlngbounds = new google.maps.LatLngBounds();

      $.each(pontos, function(index, ponto) {
         var marker = new google.maps.Marker({
            position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
            map: map,
            icon: 'images/marcador.png'
         });

         latlngbounds.extend(marker.position);

      });

      map.fitBounds(latlngbounds);

   });

}

12-03-2014 às 11:14 Responder

murilo

Em resposta a Rodolfo Pereira

Otimo falar com quem manja de verdade!
Cara muito obrigado, funcionou perfeitamente
Parabens mais uma vez pelo Blog e pelo apoio com todas as duvidas aqui.

12-03-2014 às 22:49 Responder

Felipe

Muito bom Rodolfo!
Tava lendo o guide do(a?) próprio Google mas o seu esquema ajudou MUITO!
Excelente cara.. Parabéns!

04-02-2014 às 11:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Felipe

Acho que é "da Google", huahuahuaha.

20-02-2014 às 17:21 Responder

fabio fer@

queria colocar os balãozinhos em alguns locais na minha cidade pois é pequena e no mapa só mostra as ruas e nada mais. como fazer obg.

04-02-2014 às 20:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fabio fer@

No post tem isso explicado :)

20-02-2014 às 17:26 Responder

gonçalves

Boa tarde, muito bacana o seu post.

Estive pensando, será que daria pra ligar os pontos?

05-02-2014 às 14:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a gonçalves

Como assim?

20-02-2014 às 17:26 Responder

Gonçalves

Boa tarde,

Mai uma vez parabéns pelo post.

Gostaria de saber se existe a possibilidade de criar uma função para agrupar e desagrupar os marcados. (um botão por exemplo)

Abraço...

10-02-2014 às 12:44 Responder

Gabriel

Cara como substituo o mapa de fundo? Como por exemplo Botar um mapa do Gta San Andreas usando a ferramenta do Google maps?

11-02-2014 às 03:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel

Cara, a maneira mais fácil de fazer isso é adicionando uma imagem do mapa do GTA dentro do Google Maps.

Dê uma lida aqui:

20-02-2014 às 16:36 Responder

Silvio

Muito bom cara! Você vai longe!

14-02-2014 às 15:47 Responder

Edilberto Costa

Sem dúvida um belo trabalho! Sanei minhas dúvidas quanto a API.
Obrigado Rodolfo!

14-02-2014 às 18:15 Responder

Junior

Prezado Sr Rodolfo, segui boa parte do tutorial, mas quando chegou na parte de instalar o infobox e tal parece que me perdi, nao estou conseguindo fazer o trem funcionar, os marcadores no mapa estao funcionando legal, porém, nao consigo colocar o infobox personalizado, espero que possa me ajudar, me contate por email que mando os arquivos que fiz até agora.

24-02-2014 às 07:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Ok, vê lá o seu e-mail!

26-02-2014 às 19:24 Responder

marcos

olá amigo estou utilizando a api do google para montar meu mapa, mas não estou conseguindo buscar a api key automaticamente, você pode me ajudar ? obrigado

24-02-2014 às 11:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a marcos

Buscar a API Key de forma automática?

Sei da forma manual, é só ver aqui: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

26-02-2014 às 19:25 Responder

Dalcio

Otimo artigo me ajudou muito!

Uma duvida, teria como eu traçar um caminho no mapa e dar destaque nele, como se fosse uma rota?

26-02-2014 às 15:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dalcio

Sim: https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=pt-br

26-02-2014 às 19:21 Responder

Ruben

Em resposta a Rodolfo Pereira

Boa Tarde
É a primeira vez que estou a ouvir falar no google maps api, eu já tenho o mapa feito no notepad e gostaria de saber como faço para o meter na web, existe algum tutorial?

Abraço

27-02-2014 às 08:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ruben

Como é esse "mapa feito no notepad"?

05-03-2014 às 10:46 Responder

Rodrigo Albuquerque

Em qual linha e em qual arquivo eu implemento o arquivo "pontos.json" para ser gerado de uma sentença sql, pra buscar os registros de uma tabela?

28-02-2014 às 22:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo Albuquerque

Você mesmo deve criar um arquivo que irá gerar um json dinâmico.

05-03-2014 às 10:54 Responder

joao

Boas tardes, fiz o download do demo e acontece o seguinte:
Quando testo no meu PC funciona, mas passo para o servidor e os marcadores não aparecem.

Alguma sugestão?

01-03-2014 às 15:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a joao

Mande-me o link do seu mapa no servidor para eu dar uma olhada.

05-03-2014 às 10:55 Responder

joao

Em resposta a Rodolfo Pereira

Já funciona :) era a configuração do servidor

05-03-2014 às 13:26 Responder

Dimas

Parabéns pelo post...Obrigado! Rodolfo, meu mapa está mostrando os pontos corretamente, porém o 1 - O infobox sempre abre no mesmo ponto (independente do ponto do click), e com a mesma informação; 2 - A função clearMarkers não limpa os marcadores. Se puder ajudar...Obrigado!!!! Link : http://179.213.89.171:666/mapaAtual/Index.html

02-03-2014 às 09:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dimas

Troque o "for" por "each":

$.each(pontos, function(index, ponto) {
   ...
});

E troque as declarações de variáveis:

var Id = ponto.Id;
var latitude = ponto.Latitude;
var Longitude = ponto.Longitude;
var Descricao = ponto.Descricao;
var Icone = ponto.Icones;

05-03-2014 às 11:04 Responder

Dimas

Em resposta a Rodolfo Pereira

Jóia...funcionou o infobox certinho, só a função clearMarkers() não está limpando os marcadores...

Obrigado!!!

05-03-2014 às 19:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dimas

Certeza? Pois depois que você chama a função para limpar os marcadores, você chama a função para inserir os marcadores. Aí nesse caso, sempre haverá os mesmos marcadores, o que não faz muito sentido hehehe.

12-03-2014 às 12:31 Responder

Dimas

Em resposta a Rodolfo Pereira

Rodolfo,

Na verdade os marcadores mudam de posição constantemente (via rastreador)...daí a idéia é de limpar os marcadores anteriores e atualizar com as novas posições, assim o mapa não fica "poluído"....pra vc ter uma idéia o rastreador manda as coordenadas a cada 30 segundos...

Obrigado pelo retorno!!

12-03-2014 às 12:40 Responder

guilherme

Boa noite, primeiramente ótimo seu post.

tenho uma duvida quanto ao clicar em um marcador se é possível alterar o ícone do mesmo? exemplo, ao clicar quero que de a entender q o mesmo foi clicado, mudando assim a imagem do marcador.

grato
att

05-03-2014 às 22:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a guilherme

Tem sim. Veja o "marker.setIco" no código abaixo:

function abrirInfoBox(id, marker) {
   if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
      infoBox[idInfoBoxAberto].close();
   }

   marker.setIcon('img/outro-marcador.png');

   infoBox[id].open(map, marker);
   idInfoBoxAberto = id;
}

Abs!

12-03-2014 às 12:40 Responder

Guilherme

Em resposta a Rodolfo Pereira

Muito obrigado, assim que eu conseguir testar sua dica, lhe enviarei um retorno.

att

12-03-2014 às 12:58 Responder

Guilherme

Em resposta a Rodolfo Pereira

Muito obrigado, funcionou certinho.

att

12-03-2014 às 21:59 Responder

Fernando Antunes

Opa blz Rodolfo,
Parabéns pelo POST,
Estou utilizando a API do Maps baseado no seu tutorial, estou trazendo os dados do DB e transformando em JSON e assim montando a estrutura com vários MARKERS de ícones diferentes, estou com uma duvida e gostaria de saber se pode me ajudar, tenho vários MULTI SELECT e queria que ao clicar no valor do MULTI SELECT atualizar automaticamente os MARKERS no MAPA, pode ser também quando terminar de selecionar as opções no MULTI e enviar para assim ele atualizar no MAPA, alguma sugestão, já fez algo parecido?

06-03-2014 às 20:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando Antunes

Sim, é só criar controles externos ao mapa. Dê uma olhada nessa resposta: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-602

17-03-2014 às 10:04 Responder

Vera

Olá Rodolfo,
Adorei o Post..
Eu tenho uma relação no excel de 300 empreendimentos em uma cidade, e gostaria de exibi-los na forma de Mapa. Essa quantidade toda de marcadores daria muito trabalho para inserir.
Pois cada um eu ia ter que procurar a longitude e latitude, isso?

07-03-2014 às 14:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vera

Sim, você terá que procurar a latitude e longitude de cada empreendimento.

A boa notícia, é que você pode fazer isso via programação, como está aqui explicado http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html no tópico "Exibindo no mapa o endereço digitado".

10-03-2014 às 15:24 Responder

Marcelo Marques

Rodolfo, primeiramente gostaria de agradecer seu blog! Me ajuda muito!

Fiz várias modificações no meu mapa e no momento estou querendo separar o HTML do content do infobox para um arquivo separado para deixar a solução mais elegante. Como faço para o script chamar o HTML e para que dentro desse HTML eu tenha informações do meu JSON dinâmico referentes ao ponto em questão?

Tentei fazer algo do tipo e nçao funcionao:

for (var i = 0; i < pontos.length; i++) {
   // Busca variáveis no JSON - PHP On the fly
   var Latitude = pontos[i].Latitude;
   var Longitude = pontos[i].Longitude;
   var Id = pontos[i].id;
   var Address = pontos[i].address;
   var Icone = pontos[i].icone;


   var marker = new google.maps.Marker({
      position: new google.maps.LatLng(Latitude , Longitude),
      title: "Meu ponto personalizado! :-D",
      icon: 'img/'+ Icone
   });


   var myOptions = {
      content: "<?PHP include ('../box.html') ?>",
      pixelOffset: new google.maps.Size(-150, 0)
   };

08-03-2014 às 16:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo Marques

Nesse caso eu teria esse "box.html", e faria um POST nele passando os dados do ponto. Basicamente seria isso.

Aí para escrever esses dados no "box.html", você poderia fazer replace dentro do JS por tags específicas, ou passar pro seu PHP os dados do ponto e tratar isso dentro do próprio "box.html".

10-03-2014 às 10:52 Responder

Marcelo Marques

Em resposta a Rodolfo Pereira

Muito Obrigado, Rodolfo! Deu certinho! Um abraço!

10-03-2014 às 17:08 Responder

Rodrigo

Oi Rodolfo, show esse mapa, funcionou perfeitamente.
Tem um detalhe que eu não estou conseguindo resolver.
Como coloco um link dentro do infobox, para clicar e ir para outra página do site?
Muito obrigado, Rodrigo Schmitz

10-03-2014 às 08:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

É só colocar a tag de link no content do infobox:

var myOptions = {
   content: "<a href='http://www.princiweb.com.br'>Link</a>",
   pixelOffset: new google.maps.Size(-150, 0)
};

10-03-2014 às 10:46 Responder

Diego Fersan

E aí Rodolfo, tudo bem?

Eu consigo pegar Estado, Cidade, Bairro, CEP separados pelo maps?

Abraço.

10-03-2014 às 20:24 Responder

Luiz Weber

Parabéns pelo post Rodolfo, bem detalhado e ainda assim simples de entender.

11-03-2014 às 15:26 Responder

karol

eu segui todas as suas instruções, porém não deu pra ver se funcionou pois meu navegador ( google chrome ) exibiu a seguinte mensagem:
" O Google desativou o uso da API do Google Maps para este aplicativo. A chave fornecida não é uma chave válida de API do Google ou não está autorizada para a API de Javascript v3 do Google Maps neste site. Se você é o proprietário deste aplicativo, saiba mais sobre como obter uma chave válida aqui: https://developers.google.com/maps/documentation/javascript/tutorial#api_key "


o que tenho que fazer? terei que alterar o quê na verdade? por favor, conto com sua resposta!

12-03-2014 às 01:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a karol

Pelo visto a chave que você colocou não é válida.

Você trocou o valor do parâmetro "key" do código abaixo?

<script src="http://maps.googleapis.com/maps/api/js?key=ColoqueASuaKeyAqui&amp;sensor=false"></script>

Se você preferir, pode usar sem o parâmetro "key", ficando:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

12-03-2014 às 11:09 Responder

karol

Em resposta a Rodolfo Pereira

Vou tentar usar sem o parâmetro, mas caso não funcione, onde eu pegaria uma chave válida? você tem?

obrigada por responder minha dúvida! :)

13-03-2014 às 16:41 Responder

Ricardo Armendane

Olá Rodolfo, Meus parabéns! Realmente é um trabalho fantástico!

Me diga uma coisa, existe a possibilidade de buscar os dados em um sistema asp (também disponibilizado em jsp), ou seja em outra página sem ter acesso ao DB? No caso estou fazendo a aplicação em PHP e os dados está em um sistema asp (também disponibilizado em jsp) protegido por login e captcha. Pensei com cURL e o maior desafio está em solicitar o captcha por popup

13-03-2014 às 10:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo Armendane

Cara, não faço ideia hehehe.

17-03-2014 às 11:31 Responder

Luis

Ola
Obrigado pelos tuturiais que disponibiliza, são uma boa ajuda.
Gostava de implementar uma nova funcionalidade no meu mapa e acho que era legal voce também possuir isso no seu site.
Aquilo que eu gostava de realizar era uma pesquisa por filtros aos pontos que estão no mapa, isto é por exemplo o mapa mostra restaurantes e bares e ao clikar numa checkbox esta vai esconder hide(type) ou mostrar show(type) os pontos do determinado tipo.
Ficaria agradecido se pudesse realizar este exercício

13-03-2014 às 16:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luis

É uma funcionalidade legal mesmo... que sabe num futuro post? :D

09-04-2014 às 20:23 Responder

Ueslei

Rodolfo,
Apesar de saber praticamente nada em programação Web, achei muito interessante seus artigos. Bem organizados e bem explicados.
Tenho a seguinte necessidade. Exibir um mapa e marcar pontos de um .json ou banco, que estejam próximos à minha geolocalização ou da geolocalização de um endereço pesquisado.

Tentei unir os 3 artigos (busca por endereço, mapa personalizado e o que monta rota) em um único projeto, mas não tive sucesso. A programação javascript não é muito do meu domínio.

Se não for pedir muito, pode me ajudar de alguma forma?

Parabéns pelos artigos e Obrigado!!!

13-03-2014 às 23:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ueslei

Isso que você me falou, me lembrou a ferramenta Busão Campinas. Veja:

Entra aqui: http://www.busaocampinas.com.br/exibir.html?txtEndereco=av+brasil

Em "Compartilhe a sua localização no seu navegador ou defina manualmente abaixo:" que está dentro do mapa, digite "Av Brasil" e pressione enter. Veja o resultado.

Seria isso? Pois aí seria um assunto para um post novo... precisa fazer bastante coisa hehehe.

09-04-2014 às 20:24 Responder

karol

eu consegui uma api só minha de usuário e coloquei, não sei se tô fazendo algo errado, mas agora não aparece absolutamente nada na minha página, estou criando o site em servidor local por enquanto, pois esse vai ser meu tcc, como faço pra enviar meu projeto a você para que você veja no que estou errando ( se você puder e quiser me ajudar, é claro ), nesse caso você poderia enviar um email pro meu email para que eu enviasse meu projeto pra você ver, estou criando em netbeans na linguagem java.


Aguardo resposta, obrigada!

14-03-2014 às 15:52 Responder

rui quaresma

Em resposta a karol

Parabéns Rodolfo. Muito bom.
Estou iniciando no google maps e já consigo fazer algumas coisas. Mas por mais que leia o tutorial e as sugestões todas não consigo entender. Perco-me no getJson e na infobox. Será que há alguma forma de eu ver um modelo completo pronto para eu poder estudar e tentar fazer o meu? obrigado.

16-03-2014 às 13:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a karol

Tem como você colocar a sua aplicação online? Aí você me passa o link e eu dou uma olhada.

17-03-2014 às 11:41 Responder

fran

Parabéns pela mudança, só que para mim ficou um tanto quanto complicado era bem mais rápido a procura e localização.

16-03-2014 às 19:12 Responder

Juninho

Em resposta a fran

Meu....
Parabéns pelo excelente trabalho....
Utilizei muito do seu código,
Gostei da iniciativa, grande trabalho.

18-03-2014 às 16:03 Responder

Dirceu Antonio Mataes

Boa noite.

Como posso linkar vários arquivos .kml em meu mapa, busquei alguns tutoriais para fazer isso e não consegui nenhum que ajuda-se.

Você poderia me ajudar?

18-03-2014 às 23:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dirceu Antonio Mataes

Hm... nunca mexi com arquivos .kml, mas não seria isso: https://developers.google.com/maps/documentation/javascript/examples/layer-kml?

09-04-2014 às 20:27 Responder

Alex

Ótimo. Você saberia me dizer se a partir de quando clicar num ponto podemos traçar rota.

19-03-2014 às 17:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alex

Você diz clicar em dois pontos já existentes no mapa, e automaticamente calcular a rota entre eles? Se sim, creio que tem como fazer sim!

Quando a pessoa clicar nos pontos, pegue a posição deles e jogue pro directionsService!

Dá uma olhada aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

09-04-2014 às 21:00 Responder

Rodrigo Patto

Ola Rodolfo.
Parabéns pelo projeto.
Muito últil para diversos tipos de aplicações.

Acompanhei todo o post e consegui entender as funcionalidades que você explicou, mas não consegui colocar o projeto pra funcionar.
Fiz o download no formato zip, descompactei na minha area de trabalho, mas quando inicio a pagina index.html aparece o mapa no canto superior esquerdo sem nenhum ponto, apenas o mapa liso.

Você pode me ajudar?

Preciso fazer mais alguma coisa pra funcionar?

Obrigado.

20-03-2014 às 19:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo Patto

Na teoria era para funcionar hehehe.

Deu algum erro de JS? O Firebug do Firefox pode te ajudar a ver isso.

09-04-2014 às 20:57 Responder

Evandro

Rodolfo,
Primeiramente, parabéns pelo seu artigo. Muito bom!
Gostaria de te pedir uma ajuda. Como eu crio links num DIV para acessar os pontos definidos em seu mapa? Não precisa ser dinâmico. Apenas para gerar uma lista e ao clicar no link e faz referência direta ao ponto do mapa.
Obrigado e bom trabalho.
Abs.

21-03-2014 às 11:12 Responder

Diego

Parabéns! pelo excelente post.

Matei a minha dúvida sobre a Agrupando pontos próximos.

Valeu !!

21-03-2014 às 14:01 Responder

Bruno

Rodolfo, eu li praticamente todas as duvidas em relação a buscar a latitude e longitude de um banco de dados e na maioria dos casos a ideia base a ser usada foi gerar um arquivo .JSON dinâmico. Porem no meu caso isso não seria viável, o que eu estava pensando era trazer a latitude e longitude do banco através de uma servlet e jogar estas informações em campos em Hidden dentro de uma pagina JSP e a partir dai jogar estas informações para javascript para gerar os pontos no mapa. Porem além de estar tendo grandes problemas em relação a geração de uma ArrayList dentro da pagina jsp, eu estou achando esta solução muito desagradável, pois não gostaria de misturar códigos Java com HTML.
Com sua experiência no assunto o que você me recomenda fazer? E por favor se você tiver como me dar uma luz no processo como um todo, pois desde o inicio do meu projeto estou tendo que aprender servlets e jsp sozinho sem ajuda de ninguém.... então qualquer ajuda que você pudesse dar seria muito bem vinda.
Obs: Apesar de estar com grandes dificuldades já adquiri algum conhecimento em java web, então não é necessário explicar o "arroz com feijão", porem caso te facilite a esclarecer minha duvida sinta-se a vontade em faze-lo.

Desde já agradeço a atenção.

25-03-2014 às 01:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno

Hm, complicado... eu não tenho experiência com Servlets e afins, então fica difícil pra mim te ajudar.

Mas realmente, colocar essas informações em um campo hidden não me parece uma solução muito elegante. Porém, se essa for a única alternativa, é melhor fazê-la do que ficar sem nada hehe.

Não é possível mesmo gerar o .json dinâmico? Se não, por quê?

09-04-2014 às 20:51 Responder

Bruno G. Silva

Em resposta a Rodolfo Pereira

Eu consegui gerar o ArrayList dentro das páginas .JSP, ficou limpo e simples.... nada alem do que qualquer programador de linguagens orientadas a objeto não faria, porem este código esta misturado com códigos HTML o que para realizar manutenção não é legal por gerar um certo "caos" misturando códigos. Claro que além deste código existe uma servlet DAO que esta fazendo o select no banco e trazendo as informações necessárias. Porem se trata de uma classe simples que qualquer programador tbm faria.
Quanto ao arquivo .JSON a principio para demarcar os pontos de ônibus até seria uma opção, afinal pontos de ônibus não costumam mudar com frequência. Agora para o sistema de rastreio em tempo real dos ônibus utilizando Arduino
(estou usando Arduino para criar um sistema de rastreio em tempo real... (Arduino UNO, uma GPS Shield e uma GPRS)), preciso inserir informações no banco através do Arduino (também já esta funcionando esta parte) só que para passar para a API do Google mapa preciso trazer do banco e jogar em algum lugar para que eu possa pegar e lançar via javascript para a API.
Falando desta forma fica realmente confuso. Eu teria que sentar e te explicar desde o principio pra você.
Atualmente estou pesquisando uma framework em javascript que roda do lado do servidor, oq me possibilitaria realizar um select no banco usando apenas javascript. (pra mim é novidade, pois até a 3 dias atras javascript rodava apenas do lado do usuário, pelo menos pra mim rsrsrsrs).
Resumindo tudo....
Fora tudo isso que tentei explicar ainda existe uma procedure no banco que deleta automaticamente as informações de latitude e longitude de uma tabela a cada 5 min, para que desta forma ao se buscar informações, sempre as ache atualizadas, pois ao busca-las e não encontra-las o sistema ativa o Arduino que atualiza as informações através de um insert.
agora imagina 200 ônibus de uma pequena cidade tendo que ser atualizados a cada 5 min e cada vez atualizar o json.
Posso estar errado por ainda não ter testado, mas a principio para um leigo como eu, gerar 200 atualizações do json (no caso de uma cidade pequena como Americana, próximo de campinas) a cada 5 minutos.... não tenho experiencia para dizer o que poderia acontecer... Agora imaginamos este mesmo procedimento em uma cidade grande.... Campinas, São Paulo capital...
Caso te interessar Rodolfo vc pode me procurar no facebook, apesar de você ter falando que não conversa estes assuntos por lá...
Desta forma te explicaria melhor o que estou fazendo...
Desde já muito obrigado pela atenção.

09-04-2014 às 23:51 Responder

Wellington

Para a API funcionar corretamente, tem que estar publicado em algum servidor web, ou consigo ver local, pois só aparece o mapa sem informação nenhuma.

25-03-2014 às 14:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wellington

Pode ser local! Se não aparece nenhuma informação, é que está dando algum erro na hora de pegar os pontos no arquivo .json

09-04-2014 às 20:48 Responder

Gustavo

Bom dia Rodolfo!

Gostaria de saber qual as ferramentas que você usa para o desenvolvimento desses protótipos e também se você não teria alguma apostila que mostrasse com mais detalhes como desenvolver uma desse projetos.

Obrigado.

26-03-2014 às 08:37 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gustavo

Fala Gustavo!

Eu uso o Notepad++ ou o Visual Studio... depende muito hehe.

Não tenho nenhuma apostila... só os posts que faço aqui no Blog mesmo. O mais próximo de apostila que conheço, seria esse livro aqui: http://www.princiweb.com.br/blog/programacao/google-apis/livro-google-maps-javascript-api-cookbook.html

09-04-2014 às 20:47 Responder

fabio

uso o mapar da google para um site de rastreamento gostaria de mudar o icone já ate achei o link do icone no programa mas nao consigo mudar tem como me ajudar.

27-03-2014 às 10:44 Responder

rui Quaresma

Em resposta a fabio

Olá Rodolfo. Tenho particular dificuldade em inserir a localização dos marcadores em substituição do ficheiro JSON que utiliza. Queria escrevê-los. pode dar uma ajuda? obrigado

27-03-2014 às 11:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rui Quaresma

Sim, manda aí!

09-04-2014 às 20:43 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fabio

Sim, nesse post tem uma parte explicando como mudar o ícone.

09-04-2014 às 20:46 Responder

Alexandre Simon

Rodolfo eu andei pesquisando muito por ai e achei alguns exemplos mas não consegui fazer funcionar nem um deles seria possível implementar auto refresh nos markers (eles ficariam atualizando em um tempo determinado mudando a posição ou a cor do icone algo do gênero) ? se sim teria como você postar algum exemplo disso ?

27-03-2014 às 23:18 Responder

eduardo

rodolfo bom dia.

andei verificando alguns site referente a mapas como o do google, porem não consegui achar algum com as caracteristicas que irei passar.

busca personalizada; (quando vc digita aparece as informações do endereço)
algum que tenha varios endereço; (mas somente um .js)
e tambem que faça a rota.

não sei se me expressei bem, mas porem é isso.

agradeço desde de ja sua atenção.

29-03-2014 às 10:53 Responder

eduardo

rodolfo, fiz uma breve pesquisa e verifiquei que vc tem alguns artigos com alguns mapas bastante interessante.
Mas vi tambem que não tem um mapa com as funções que eu pretendia ter, seria um mais ou menos assim:
pesquisa de endereço - personalizada, semelhante a um que ja tem no seu site;
um sistema de rota - ja vi tambem no seu site;
estou procurando algo que tenha isso e mais um arquivo .js que fizesse todo esse funcionamento.
eu teria alguns arquivos html que puchariam as informações desse arquivo .js
que me traria um ponto no mapa personalizado, a pesquisa de endereço, mais a pesquisa de rota.

sera que vc pode me ajudar com isso?

desde ja agradeço a atenção.

31-03-2014 às 13:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a eduardo

Cara, junta tudo, estude bastante, não desista e você consegue! :D

Caso você tenha um código já pronto e esteja com um problema pontual, terei prazer em ajudá-lo, mas caso contrário fica complicado pra mim.

09-04-2014 às 20:19 Responder

Ricardo

Parabéns pelo post Rodolfo,

Estou tentando fazer um mapa com pontos em json + a busca que você ensinou em outro post, mas não consigo, sempre um anula o outro será que você pode me dar uma luz?

Obrigado

Abs.

31-03-2014 às 17:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Se você puder dispobilizar um link com esse seu mapa, seria bom para eu te ajudar :D

09-04-2014 às 20:18 Responder

Ricardo

Em resposta a Ricardo

Fala Rodolfo,

Então, depois de algumas horas, consegui fazer funcionar kkk

Obrigado pela atenção

Abs ;)

10-04-2014 às 10:34 Responder

Marcelo Morales

Em resposta a Ricardo

Olá Ricardo,

Estou com a mesma dificuldade que você estava, como você conseguiu resolver para unir a busca e os pontos personalizados?

Abraço

25-03-2015 às 21:06 Responder

Joao Lima

Quero lhe agradecer pela enorme ajuda que me prestou e acredito que esteja prestando a muita gente. Tudo muito bem explicado e se vier a João Pessoa a cerveja é certa.

Boa sorte

31-03-2014 às 23:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joao Lima

Opa, obrigado!

09-04-2014 às 20:18 Responder

Mariele Santa Rosa

Olá! Gostaria de saber se vc sabe se existe alguma função ou controle no mapa google que na programação possa ser limitado um estado/cidade/bairro. Quando fazemos a consulta direto pelo google maps e digitamos o estado de São Paulo por exemplo, ele faz uma marcação ao redor do estado de são paulo, mas se clicarmos em outro local (estado/cidade/bairro dependendo do zoom) ele também faz esta marcação. Não consegui encontrar explicação no API do google sobre esta funcionalidade. Por acaso vc a conhece? Sei que fazendo poligonos coloridos é possível, mas é bem trabalhoso. rsss
Desde já agradeço a atenção.

:)

01-04-2014 às 17:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mariele Santa Rosa

Hm, infelizmente não achei nada aqui :(

Se futuramente você achar algo, avisa a gente :D

09-04-2014 às 20:10 Responder

Mariele Santa Rosa

Em resposta a Rodolfo Pereira

Ok Rodolfo, aviso sim! Mas pelo que andei pesquisando isso pode estar na versão paga. Acho que vou partir para os polígonos mesmo..rsss
Muito obrigada pela anteção! ;D

10-04-2014 às 08:01 Responder

Cesar

Olá amigo, muito bom o post! Estou elaborando um mapa e tenho uma dúvida, é possível eu desabilitar os estabelecimentos cadastrados no próprio mapa do google? Ex. quando cadastramos os nossos, aparece os do google junto, clicáveis tbem. será que é possível desabilitar esses? de repente criar um layer por cima com um href = # por exemplo... já pensou nisso? será que existe como? Abração e vamos nos falando.

08-04-2014 às 09:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Cesar

Hm, creio que sim! Os estabelecimentos no GM são chamados de "Point of Interest" (POI).

Se você "setar" o visibility para off, eles somem. Veja aqui: https://developers.google.com/maps/documentation/javascript/styling?csw=1

09-04-2014 às 20:07 Responder

Augusto

Olá Rodolfo,

parabéns pelo trabalho. Seu artigo documentando os passos é de grande ajuda para muitas pessoas.

Minha dúvida se trata de algo que tangencia o seu artigo: existe algum bug que impede a utilização de modals (colorbox, fancybox, etc) em links existentes na infobox? Tenho tentado de tudo, e quando o modal está aplicado em algum elemento que está dentro da infobox, nada acontece.

Você sabe de algo sobre isso?

Valeu e abraços!

08-04-2014 às 10:50 Responder

Augusto

Em resposta a Augusto

Depois de mais pesquisas, cheguei a uma solução que possa talvez também ser útil para outros interessados: para que seja possível acionar eventos de elementos que estão dentro da infobox, basta incluir o seguinte argumento nas opções do construtor da infobox:

enableEventPropagation: true

pronto :)

09-04-2014 às 12:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Augusto

Opa, valeu pela dica! :D

09-04-2014 às 20:02 Responder

Aires amaral

Não consegui colocar os pontos no mapa. alterei o json com as coordenadas que busquei no google. Porem na hora que mando rodar o html, mostra somente o mapa, não aparece os pontos, se puder me ajudar.... obrigado.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Google Maps API v3: Criando um mapa personalizado</title>
</head>

<body>
<div id="mapa" style="height: 700px; width: 900px">
</div>

<!-- Jquery -->
<script src="C:\Multigrain\Moinho Belarina\Vendas\Mapa de vendas\GoogleMapsAPIv3MapaPersonalizado-master\GoogleMapsAPIv3MapaPersonalizado-master\js/jquery.min.js"></script>


<!-- Maps API Javascript -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDa8XzoabexW6Mf3-lsijsYoM7frqj5yco&amp;sensor=false"></script>

<!-- Arquivo de inicialização do mapa -->
<script src="C:\Multigrain\Moinho Belarina\Vendas\Mapa de vendas\GoogleMapsAPIv3MapaPersonalizado-master\GoogleMapsAPIv3MapaPersonalizado-master\js/mapa.js"></script>

<!-- Caixa de informação -->
<script src="C:\Multigrain\Moinho Belarina\Vendas\Mapa de vendas\GoogleMapsAPIv3MapaPersonalizado-master\GoogleMapsAPIv3MapaPersonalizado-master\js/infobox.js"></script>

<!-- Agrupamento dos marcadores -->
<script src="C:\Multigrain\Moinho Belarina\Vendas\Mapa de vendas\GoogleMapsAPIv3MapaPersonalizado-master\GoogleMapsAPIv3MapaPersonalizado-master\js/markerclusterer.js"></script>

</body>
</html>

09-04-2014 às 13:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Aires amaral

Tente mudar a ordem de inclusão dos .js no seu HTML:

<!-- jQuery -->
...

<!-- Maps API Javascript -->
...

<!-- Caixa de informação -->
...

<!-- Agrupamento dos marcadores -->
...

<!-- Arquivo de inicialização do mapa -->
...

09-04-2014 às 19:59 Responder

Viana Patricio

Em resposta a Rodolfo Pereira

Olá Rodolfo! excelente material...
Queria aproveitar da sua experiência, e saber se você tem alguma dica... pelo que vi o exemplo do evento ao clicar em enviar ele nos mostra o endereço completo e a long lat.... eu queria saber se você sabe como desmembrar essas informações, pois eu iria precisar enviar para o banco de dados separadamente, estado, cidade e bairro, para poder criar um filtro no futuro, que me mostrasse apenas os pontos cadastrados no db de determinado bairro.

Obrigado! se puder me mostrar o exemplo prático...

09-04-2014 às 22:14 Responder

Rafael

Em resposta a Rodolfo Pereira

Olá amigo. Ótimo código.
Mas estou precisando de uma ajudinha.
Estou chamando todos os pontos do meu banco de dados e quero dar um zoom apenas em um ponto especifico que estiver aberto, pode ser por GET.

Estou fazendo essa chamada
$query = mysql_query("SELECT * FROM anuncios WHERE ativo = 1 AND aprovado = 1 ORDER BY id DESC");
$items = array();
while($row = mysql_fetch_array($query)){
$items[] = array('Id' => $row['id'],'Latitude' => $row['lat'], 'Longitude' => $row['lng'], 'Descricao' => $row['titulo'], 'Icone' => 'marcador-2.png');
}

echo json_encode($items);

10-04-2014 às 11:38 Responder

Aires Amaral

Em resposta a Rodolfo Pereira

Obrigado pela rápida resposta, fiz conforme sua orientação, porém os pontos não são plotados no mapa.

10-04-2014 às 16:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Aires Amaral

Você tem algum link da sua aplicação online para que eu possa dar uma olhada?

30-04-2014 às 18:54 Responder

Natan

Parabéns pelo post!!! Muito bom!

Me tira um duvida, tem como passar pelo JSON além das latitudes e longitudes, passar um link referente a um certo ID ou de alguma forma inserir um botão dentro do infobox que seria referente a esse mesmo ID ?

10-04-2014 às 00:02 Responder

Douglas Franklin

Gostaria de saber se é possível gravar a cidade de um determinado ponto Long,Lat para visualizar na infoBox

11-04-2014 às 08:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Douglas Franklin

É sim :)

30-04-2014 às 18:53 Responder

Marcelo

Boa tarde,

muito interessante, mas não consigo fazer o script carregar o json, ele chega até o getJSON só que ele não passa daí, já coloquei o json na raiz dos meus arquivos numa pasta js junto aos html's e mesmo assim não deu certo.

o que eu devo fazer?
detalhe... não manja nada de javascript, primeira vez que estou trabalhando com isso.

11-04-2014 às 15:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo

Tem como você me enviar um link da sua aplicação online?

30-04-2014 às 18:53 Responder

Eddie

Olá Muito bacana esse post!!!
Gostaria de saber como faço para ocultar/exibir, com jquery, alguns marcadores ao clicar em um checkbox. Todo processo para ocultar e exibir eu sei fazer, mas não sei qual elemento selecionar para ocultar?
Obrigado!

11-04-2014 às 16:49 Responder

Alexandre

Preciso dos códigos de um site modelo para rastreamento/monitoramento, preferencialmente em VS 2010 ou posterior. Como posso entrar em contato para conversamos? Obrigado.

11-04-2014 às 20:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Basta enviar um e-mail para contato@princiweb.com.br :)

30-04-2014 às 18:52 Responder

wemerson

Estou fazendo um trabalho de faculdade tipo carona solidaria, tem algum algorítimo que posso me indicar para trabalhar com mapa, grafo de uma rota etc?

13-04-2014 às 18:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a wemerson

Hm, tem como você ser mais específico no que você precisa?

30-04-2014 às 18:51 Responder

Aladir Jr.

Ótimo artigo! Parabéns!
Muito bem explicado e muito útil!

Cadastrei alguns pontos no arquivo "pontos.json" e funcionou muito bem. No entanto, só consegui colocar um máximo de 22 pontos no mapa. Será que fiz algo errado? Tem como colocar mais pontos?
Na verdade, minha necessidade seria colocar 290 pontos, distribuídos numa mesma cidade. É possível?

17-04-2014 às 18:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Aladir Jr.

É possível sim hehe. Você tem o link da sua aplicação para eu dar uma olhada?

30-04-2014 às 18:47 Responder

Aladir Jr.

Em resposta a Rodolfo Pereira

Obrigado por sua atenção!

Meu erro foi o seguinte:

Criei uma rotina para buscar as informações dos 290 pontos em um banco de dados e mostrá-las numa página no formato do arquivo "pontos.json" para então gerá-lo manualmente num editor de texto.

O que ocorreu é que alguns pontos não tinham as coordenadas, então nada foi mostrado no mapa.

Após revisar e corrigir o banco todos os pontos apareceram no mapa. Ficou muito legal!!!! Obrigado!!!! :)

30-04-2014 às 19:35 Responder

Adriano Muhongo Barão da Costa

gostei muito, acho que aprendi muita coisa, mas sinto que posso e devo aprender mais, gostaria que me desses uns toques no seguinte caso: localização do cliente em um mapa, quando o mesmo cliente acede a aplicação com telemovel.
sem mais assunto de momento reitero as cordiais saudações. Esperando respostas.

21-04-2014 às 06:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adriano Muhongo Barão da Costa

"mas sinto que posso e devo aprender mais" - Esse é um pensamento de um grande programador! :)

Para obter a localização do cliente em um mapa, veja esse post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html no item "Utilizando a localização atual do usuário".

30-04-2014 às 18:43 Responder

Alexandre

Olá Rodolfo. Desde já agradeço.

Possui algum exemplo lendo as coordenadas lat lng de um banco de dados qualquer? Obrigado.

21-04-2014 às 19:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Não, mas qual seria a sua dificuldade nesse caso?

30-04-2014 às 18:42 Responder

Alisson

Parabens vey manda muito. Tenho skype se puder adicionar alisson..prado

22-04-2014 às 00:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alisson

Ter até tenho, mas raramente uso huahuahua.

30-04-2014 às 18:42 Responder

laurindo

Bom dia, amigo eu trabalho na defesa civil de um município de Pernambuco " Paulista" e vi essa postagem que achei muito interessante porém não sou programador e também não manjo muito da coisa, gostaria de saber de vc se tem como adaptar esse conteúdo para um aplicativo que possamos marcar áreas de risco na cidade e possamos visualizar a real situação postando fotos em visita do local ? como demais funções! será que vc pode me ajudar?

22-04-2014 às 09:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a laurindo

Entre em contato através do e-mail contato@princiweb.com.br explicando os detalhes dessa sua ideia :)

30-04-2014 às 18:41 Responder

Rodolfo

Chará, parabéns pelo post. Me ajudando muito num projeto da faculdade. Mas como sou iniciante, o que posso fazer para adicionar uma pesquisa de endereço nesse mapa? Exemplo de uso: já com os pontos marcados pesquiso um endereço qualquer e vejo quais pontos marcados estão próximos àquele endereço pesquisado.

22-04-2014 às 10:21 Responder

Rodolfo

Em resposta a Rodolfo

Consegui. Mesmo mapa pesquisando pelo endereço já mostrando no mapa os pontos marcados. Porém o autocomplete não está funcionando. O que poderá ser?

24-04-2014 às 18:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodolfo

Pode ser várias coisas hehe. Se você tiver um link da sua aplicação rodando, fica mais fácil eu te ajudar.

De qualquer maneira, dê uma olhada aqui http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html e veja se ajuda em algo.

30-04-2014 às 18:23 Responder

Ramon

Cara, parabéns pelo post. Sou iniciante em programação, vi esse tutorial e o anterior de buscar o endereço, estou precisando dos 2 em um só. Me ajuda por favor. Queria pesquisar um endereço e ver quais os pontos marcados próximos a este endereço, tem como? Vlw!

23-04-2014 às 11:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ramon

Hm, deixa eu ver se eu entendi

1. Entra aqui: http://www.busaocampinas.com.br/exibir.html?txtEndereco=av+brasil

2. Na caixinha azul/verde dentro do mapa, digite "av brasil" (sem aspas). Veja o resultado.

É isso que você quer?

 

23-05-2014 às 18:14 Responder

Adilson

Fala Rodolfo, tudo certo?

Bom, o Post é fantástico, parabéns!

Só tenho uma dúvida... Alterei o código para que, definidos os pontos de latitude e longitude de algumas capitais, conseguisse inserir os pontos no mapa sem utilizar o arquivo json. então criei um array para latitude e longitude.

O código funcionou e os pontos foram inseridos no mapa, porém eu não consegui criar uma forma de ao invés de "montar" o infoBox, eu gostaria de ao clicar no ponto da cidade no mapa, ele me mandasse para outra página passando como parâmetro o "identificador" da cidade, para que em outra página eu trabalhasse minha aplicação de acordo com a cidade que clicou.

se puder me ajudar neste caso eu agradeço. Não conheço muito bem JavaScript.

Abs,

23-04-2014 às 17:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adilson

Vamos lá:

1. No seu array, além da longitude e longitude, adicione um campo que irá conter esse identificador da cidade;

2. Na chamada da função "abrirInfoBox", ao invés de você passar "ponto.Id" e "marker", passe apenas esse identificador;

3. Dentro da função "abrirInfoBox", coloque um código JS para redirecionar a pessoa para uma determinada página, algo assim:

function abrirInfoBox(identificador) {
   location = 'pagina.php?identificador=' + identificador;
}

É claro que precisa mudar o nome dessa função, para ficar de acordo com a sua funcionalidade.

23-05-2014 às 18:17 Responder

Lucas Antonelli

Olá!
Muito obrigado pelo grande ajuda. Estava precisando de um desses para colocar no meu projeto.... Compartilhar a informação ao próximo é essencial.
=D

25-04-2014 às 09:25 Responder

Ronaldo Villa Verde

Olá parabens por ter uma mente brilhante e prestar esses esclarecimentos, tento exibir um HTML ou informações do BD na caixa de informação personalizada, é possivel? sabe como fazer? Obrigado..

26-04-2014 às 10:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ronaldo Villa Verde

É possível sim, veja aqui:

http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-390

Para exibir as informações do BD dentro da caixa, basta colocar essas informações dentro do JSON.

30-04-2014 às 18:19 Responder

Filipe

Parabéns

muito bom. vlwww

28-04-2014 às 11:16 Responder

Anderson

Ótimo post amigo, gostaria de saber se é possivel obter um JSON com a menor distancia entre dois endereços usando CEP ou bairro.

28-04-2014 às 15:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson

Sugiro que você estude a API de rotas:

https://developers.google.com/maps/documentation/javascript/directions?hl=pt-br

30-04-2014 às 18:17 Responder

Matheus

Bom dia Rodolfo, tem como excluir um determinado maker do MakerClusterer ou atualizar ele?

28-04-2014 às 15:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Matheus

Para excluir um marker, basta passar "null" para o "setMap" do marker em questão, por exemplo:

for (i in markers) {
   markers[i].setMap(null);
}

E sobre atualizar, o que você quer atualizar nele?

30-04-2014 às 18:15 Responder

Joni

Rodolfo, Help,..rsrs

Fiz o mapa conforme seu tutorial, mas não aparecem os pontos no mapa...

arquivo php que chama o json:

http://wgpas.com/mk/pontos_mapa.php

onde deveriam aparecer os pontos:

http://wgpas.com/mk
Me da uma ajudinha, onde estou errando

28-04-2014 às 17:37 Responder

Filipe

Em resposta a Joni

tem que ver o arquivo que chama o json como vc colocou um php pra chamar. no mapa tem que chamar o PHP ao inves do JSON

29-04-2014 às 11:18 Responder

Joni

Em resposta a Filipe

Filipe, então, eu estou chamando o php:
$.ajax({
type: "POST",
url: "pontos_mapa.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (pontos) {

mas mesmo assim não esta funcionando... :(

30-04-2014 às 10:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joni

Certifique-se que você está chamando a função "carregarPontos" no carregamento da página. Fiz um teste aqui, e essa função não está sendo chamada, logo, a requisição nunca irá acontecer :P

30-04-2014 às 18:13 Responder

Joni

Em resposta a Rodolfo Pereira

Blz, Rodolfo, esta funcionando agora, so que o problema é outro, agora não aparece a descrição na infobox...

Coloquei um alert(ponto.dexcricao); e esta passando, mas não aparece na infobox???

Novamente te peço um socorro...

http://wgpas.com/mk/

01-05-2014 às 17:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joni

O link não está funcionando.

23-05-2014 às 18:11 Responder

Edson

Rodolfo o seu scritp é otimo so que preciso de uma pequena ajuda... como eu faria para para setar a long e lat no endereço do usuario que ele digitou, e caso esteja na posicão errada no mapa, qual a função para poder mover o ponto e salvar a long e lat que o usuario personalizou.

Agradeço

29-04-2014 às 22:41 Responder

André Teixeira

Boa noite estou desenvolvendo um serviço em meu site (http://clubedoskate.com/) e gostaria de saber como mantenho distancia do ponto? quando eu tenho um ponto apenas marcado o mapa fica com o zoom muito próximo do ponto marcado..

valeu

03-05-2014 às 04:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a André Teixeira

Tire essa linha de código:

latlngbounds.extend(marker.position);

23-05-2014 às 18:10 Responder

Rafael

Tutorial tooooop!
Valeu demaaaais!

03-05-2014 às 22:26 Responder

Marcelo

Rodolfo, muito bom seu script, consegui implementar com sucesso em um cadastro de membros que fiz para minha igreja.
Estou com um problema ainda, por termos varias familias, varias pessoas moram no mesmo endereço, teria alguma solução para que quando houvesse mais de uma pessoa naquele endereço, eu colocasse um marcador diferente e na infobox aparecesse o nome de todos daquele endereço?

aBRAÇO!

05-05-2014 às 10:03 Responder

Diogo Ramos

Caro Rodolfo. Primeiramente, parabéns pelo material. Completamente esclarecedor. Tenho a seguinte necessidade: em um mesmo mapa plotar pontos utilizando marker, infobox, etc e ligar pontos de um mapa utilizando Polyline. Os primeiros pontos são obtidos de arquivo chamado pontos.json. Já para traçar os pontos são obtidos de um arquivo denominado trecho.json.

O que acontece é o seguinte: No Firefox funciona perfeitamente. Já no Chrome e IE9, IE10 e IE11 só exibe os pontos contidos no arquivo pontos.json, ou seja, não exibe o traçado. Você pode me ajudar? Já fiquei cego de tanto olhar o código (Hehehe): http://www.dvplan.com.br/mapa. Grato desde já.

08-05-2014 às 14:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo Ramos

Por que você está chamando duas vezes o "carregarPontosTrecho"?

carregarPontosTrecho();

...

google.maps.event.addDomListener(window, 'load', carregarPontosTrecho);

23-05-2014 às 17:57 Responder

Junior

Muito bom seus artigos, estou com uma dúvida é possível remover os marcadores que já estão no mapa, creio que seja do google place, seria interessante deixar os marcadores mas sem que abra o box da informação do estabelecimento, pesquisei mas não encontrei nada referente a isso.

Obrigado...

11-05-2014 às 17:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Você está falando dos pontos de interesse, certo?

Se sim, basta acrescentar os "styles" para as opções do seu mapa:

var styles = [
   {
      featureType: "poi",
      elementType: "labels",
      stylers: [
         { visibility: "off" }
      ]
   }
];

var options = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   styles: styles
};

23-05-2014 às 17:48 Responder

Junior

Em resposta a Rodolfo Pereira

Obrigado!!!!

29-05-2014 às 13:30 Responder

Junior

Opa Rodolfo eu de novo, cara surgiu uma outra dúvida é possível quando clicar no marcador ao invés dele abrir um box abrir um link? Obrigado...

12-05-2014 às 17:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Sim, ao invés de você chamar a função "abrirInfoBox" no "addListener", você coloca uma chamada para um link específico, por exemplo:

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {

   location = "http://www.uol.com.br";

});

14-05-2014 às 11:56 Responder

Junior

Em resposta a Rodolfo Pereira

Obrigado Rodolfo...

14-05-2014 às 12:03 Responder

Peterson Medina

estive vendo alguns posts sobre API do Google Maps e tenho uma duvida. Estou começando na area de programação para internet e gostaria de saber se há uma possibilidade de fazer um mapa a partir de endereços em um banco de dados. criar varios pontos no mapa... eu nao tenho ideia de como. :D

13-05-2014 às 10:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Peterson Medina

Veja se esse comentário te ajuda: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-250

14-05-2014 às 11:55 Responder

Peterson Medina

Em resposta a Rodolfo Pereira

Obrigado Rodolfo. Vou Ver sim.

14-05-2014 às 15:25 Responder

Junior

Olá Rodolfo,

Muito bom este seu material.

Não estou acostumado com JS e estou com uma dificuldade em relação ao uso do markerCluster. Na verdade é justamente o não uso dela. Analisando o código e retirando os pontos dessa opção faz com que as marcações não apareçam no mapa. Apenas consigo fazer aparecer, mas sem fazer o carregamento do conteúdo definido para cada ponto.

Poderia me dizer quais os itens que tenho que tirar e alterar para não usar essa opção, mas manter o funcionamento total da aplicação?

Abs,
Jr

13-05-2014 às 15:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Bom, é só parar no item "3. Definindo o visual do InfoBox".

Você tem um link dessa aplicação rodando? Aí fica mais fácil eu te responder com exatidão.

14-05-2014 às 11:53 Responder

Flávio

Parabéns!
Fantásticos a sua iniciativa e o seu conhecimento.

13-05-2014 às 17:35 Responder

Fernando

Material show de bola hein amigo, valeu. Me ajudou muito cara. Obrigado!

14-05-2014 às 10:10 Responder

Antonio Wilson

Olá muito bom o conteúdo, parabéns. Criei uma lista no html com links para os marcadores no mapa. Passo as coordenadas do html (na verdade um php, estou guardando as coordenadas em banco) para mapa.js

criei uma função chamada centralizarMapa e coloquei: map.setCenter(new google.maps.LatLng(latitude,longitude)); - Então tentei colocar nessa função o abrirInfoBox() passando o valor do id que do marcador clicado. Resultado, o mapa centraliza, abre a infobox correta, mas o mapa fica todo azul, sem imagem, como se estive travado. O que será que estou fazendo de errado mestre ?

14-05-2014 às 16:39 Responder

Antonio Wilson

Em resposta a Antonio Wilson

Deixa pra lá Rodolfo, consegui entender o que estava acontecendo. Eu estava passando os dados de maneira errada pra mapa.js. Consegui resolver. De qualquer forma, gostaria de saber se tem como eu customizar aquele simbolo de agrupamento (parece um "radarzinho"). Ao menos customizar as cores, que tem horas que fica amarelo, quando tem muitos marcadores fica azul. Seria legal poder customizar isso também, valeu, abcs.

15-05-2014 às 11:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Antonio Wilson

Você tem algum link para eu ver essa aplicação rodando?

23-05-2014 às 17:43 Responder

Antonio

Em resposta a Rodolfo Pereira

Cara só consegui fazer isso graças ao seu tutorial, foi fundamental valeu. Fiz algumas alterações, como por exemplo, usar um PHP ao invés de JSON pra "popular" o mapa. Assim faço a consulta pelo PHP direto no banco pra pegar coordenadas e etc. Segue o link: http://www.i2go.com.br/revendedores.php

23-05-2014 às 18:27 Responder

Gilson

Alguém tem algum fórum sobre Google Maps API para me indicar. tenho algumas duvidas mas não encontri nenhum fórum específico.
Obrigado.

16-05-2014 às 12:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gilson

Tenta aqui: https://groups.google.com/forum/#!forum/Google-Maps-js-API-v3

23-05-2014 às 17:39 Responder

Amanda

Como você passaria dinamicamente (vindo do banco de dados) os pontos de latitude e longitude de um arquivo php para o json?

16-05-2014 às 14:46 Responder

Gilson

Em resposta a Amanda


Amanda, use o json_encode / decode do PHP para isso. Você pode gravar uma string json no BD usando o json_encode, depois recupera-la e transformar essa string em um objeto usando o json_decode. Caso os seus dados estejam em colunas diferentes no BD, você pode recupera-las normalmente, depois cria um um array com esses dados e usa o json_encode para enviar para o javascript.

19-05-2014 às 10:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Amanda

Deu certo a dica do Gilson?

23-05-2014 às 17:38 Responder

Junior

Opa Dr, desculpa lhe incomodar mais uma vez, mas dessa vez é bem simples a questao, vc me passou os macetes para colocar o mapa por coordenadas e tal, consegui tudo certo, agora minha duvida é como alterar entre visualização MAPA e SATELITE, porque nos codigos que me mandou esta modo MAPA e como eu colocar no código para abrir modo SATELITE ?

E mais uma pergunta, eu vi lá que a opção do API do google que escolhemos tem até 25 mil visualizações por dia, tem alguma opção lá que eu pago e tenho ilimitado em uma unica chave/codigo que é colocado no arquivo html no qual é pego no API do Google?


Mais uma vez obrigado e aguardo contato

17-05-2014 às 13:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Para colocar o mapa no modo SATELITE, troque isso:

mapTypeId: google.maps.MapTypeId.ROADMAP

por isso:

google.maps.MapTypeId.SATELLITE

E sobre o limite de visualizações, tem como fazer isso. Veja mais informações aqui: https://developers.google.com/maps/documentation/business/

23-05-2014 às 17:34 Responder

isa

vc sabe como criar um web site em java?

21-05-2014 às 10:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a isa

Nem sei viu...

23-05-2014 às 17:31 Responder

LÉO

Post supimpa! parabéns, só que....
estou usando um json para informar os pontos e suas respectivas informações.
Só que quando clico no pontos está aparecendo o CEP - CIDADE - ESTADO - PAIS. sendo que estou definindo no json só NOME - ID - LAT - LON.
Saberia me dar uma luz no que pode estar rolando?
Vlw!!

21-05-2014 às 11:37 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a LÉO

Me passa o link do seu código para eu dar uma olhada.

23-05-2014 às 17:31 Responder

fabio

Rodolfo parabéns pelo tutorial.
tenho um site de rastreamento veicular e uso o google maps emo meu site voce poderia me informar onde eu consigo alterar o refresh do meu maps, pois ele esta dando refresh a cada 1 minuto e eu queria a cada 10 segundo ou menos.
obrigado desde já.
Fabio August

22-05-2014 às 13:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fabio

Me passa o link do seu código para eu dar uma olhada.

23-05-2014 às 17:30 Responder

fabio

Em resposta a Rodolfo Pereira

107.170.40.220
Loguin novo
Senha 123456
Voce abaixa o zoom e quando ele atualizar apos 1 minuto o zoom volta tambem.

24-05-2014 às 09:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fabio

Cara, dei uma procurada e não achei aqui =/

 

10-07-2014 às 16:05 Responder

Felipe Trindade

Parabens pelo post!
Uma dúvida, não sei o porque, mas dá o seguinte erro: "Uncaught TypeError: Cannot set property 'position' of undefined".

23-05-2014 às 16:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Felipe Trindade

Me passa o link do seu código para eu dar uma olhada.

23-05-2014 às 17:27 Responder

Felipe Trindade

Em resposta a Rodolfo Pereira

Consegui cara... Eu tinha feito caca... Muito obrigado pela atenção!

23-05-2014 às 17:35 Responder

Carlos

Ótimo post Rodolfo!!!

Conseguiria tirar uma dúvida minha?
Estou fazendo uma aplicação que eu preciso utilizar um grafo de rotas, ou seja, eu preciso de um grafo que seja a representação das rotas/ruas de uma cidade, em que os pontos (vértices do grafo) sejam pontos das ruas (que futuramente contenham também as imagens do GSV) - estes pontos também mostram os cruzamentos, por exemplo.

26-05-2014 às 12:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Carlos

Você quer desenhar esse grafo em cima do mapa?

Se é isso mesmo, dê uma olhada: https://developers.google.com/maps/documentation/javascript/shapes

10-07-2014 às 16:00 Responder

Carlos

Em resposta a Rodolfo Pereira

Não. Eu estou fazendo uma aplicação fora do maps, um ambiente virtual, e eu preciso apenas das informações do grafo.

10-07-2014 às 18:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Carlos

Infelizmente eu não sei =/

16-07-2014 às 18:11 Responder

Carlos

Em resposta a Rodolfo Pereira

=/

16-07-2014 às 23:41 Responder

emeson

cara, isso nao da certo nem aqui nem na china

29-05-2014 às 19:36 Responder

Tamiris

Olá Rodolfo, ótimo post!

como faço para tirar o zoom pela rolagem do mouse? tenho um site onepage e o map em fullwidth, o zoom pelo mouse esta atrapalhando na rolagem da página.

30-05-2014 às 15:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tamiris

Em "options", passe "false" para o atributo "scrollwheel":

var options = {
   scrollwheel: false,
   ...
}

30-05-2014 às 15:39 Responder

Tamiris

Em resposta a Rodolfo Pereira

obrigada rodolfo!

30-05-2014 às 18:56 Responder

Iago Gabriel

Estou com um problema, baixei os arquivos que você disponibilizou no GitHub sem fazer qualquer alteração, e quando acesso o index no browser só é carregado o mapa, os pontos não aparecem.. Pq isso acontece?

O json tem que ficar hospedado para funcionar ?

01-06-2014 às 15:26 Responder

Fabricio Alves

Rodolfo, parabéns e obrigado por compartilhar esse material.

Gostaria de tirar uma dúvida: É possivel, utilizando essa API do google, gerar a rota entre dois pontos, porém ao invés de endereço renderizado como nos exemplos citados, gerar a rota através de coordenadas de lat e long gerando o xml (kml acho) para que seja aplicado na ferramenta google earth?

Espero ter sido claro na minha dúvida.

Obrigado.

02-06-2014 às 11:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fabricio Alves

Cara, nunca fiz isso, e pelo que procurei aqui, não achei nada que faça examente isso. O mais próximo que achei, foi que você pode exportar o KML direto do site do Google Maps.

25-06-2014 às 17:43 Responder

Felipe

Brother, valew mesmo!

02-06-2014 às 13:02 Responder

Caian

Bom dia Rodolfo!! Parabéns novamente pelo blog!!

Minha dúvida é a seguinte:

- Como é possível substituir o mapa (plano de fundo) utilizando a API do Google Maps? (como esse exemplo: http://www.tibiawiki.com.br/wiki/Mapa )


Abraço!!

03-06-2014 às 09:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Caian

Bem legal o mapa! Para chegar nesse nível de personalização, eu não sei te dizer exatamente o que deve ser feito =/

Veja o link abaixo, talvez dê uma luz:

https://developers.google.com/maps/documentation/javascript/styling?csw=1

 

24-06-2014 às 17:52 Responder

Carlos

Boa tarde,

Gostaria de saber se tem como fazer isso, pegando a posição gps (latitude e longitude) de um aplicativo android.

03-06-2014 às 16:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Carlos

Hm, nunca mexi com Android, mas deve ter como sim. Dá uma "googlada" :)

24-06-2014 às 17:23 Responder

Marcio

No caso da geolocalização usada pelo app do google o waze , tem muita coisa programada para ele geolocalizar lugares e veiculos , o conceito para essa forma de desenvolvimento em que se baseia .

Obrigado

07-06-2014 às 23:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcio

Ih, não sei... :(

24-06-2014 às 17:21 Responder

Marcio

Em resposta a Rodolfo Pereira

Não esta falando sobre API de Geolocalização ?

24-06-2014 às 17:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcio

O post fala sobre a API do Google Maps... agora, com o Waze funciona por trás dos panos, eu não sei te dizer.

24-06-2014 às 17:49 Responder

Marcio

Em resposta a Rodolfo Pereira

ok. Rodolfo. Se eu souber de alguma coisa sobre o Waze, volto aqui no fórum para lhe trazer informações, mas a principio é uma API Maps usando programação com GPS, e esses estão hoje funcionando como comunidades tanto do Facebook quanto do Gmail.

Abraços

24-06-2014 às 18:05 Responder

Jéssica

quantas cerveja por um mapa \o

09-06-2014 às 10:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jéssica

Até hoje não ganhei nenhuma :( huahuahuaha

24-06-2014 às 17:17 Responder

marcos pedro da silva

como faço para gerar o arquivo json vindo atraves de uma consuta no bd mysq?

09-06-2014 às 23:37 Responder

Rafael Casanova

Excelente postagem Rodolfo, acabei de conhecer o blog/agência e já virei fã, também estou compartilhando ele para todos os amigos, o modo como explicou facilitou muito minha aprendizagem.

Tenho uma dúvida que talvez possa ser de muitas pessoas. Como eu poderia inserir vários pontos de uma mesma latitude/longitude (de uma vez), além de pontos aleatórios? Por exemplo, tenho em um json 30 pessoas da cidade Porto Alegre, 25 de Belo Horizonte... que não marcaram suas latitudes/longitudes.

{
   "Id": 1,
   "Latitude": -29.236920,
   "Longitude": -51.873806,
   "Cidade": "Porto Alegre - RS",
   "Número": 30
},
{
   "Id": 2,
   "Latitude": -29.236920,
   "Longitude": -51.873806,
   "Cidade": "Belo Horizonte - MG",
   "Número": 25
}
.....

E depois temos que marcar pessoas individualmente que tenho as latitudes e longitudes guardadas (aqui tudo bem, mas como juntar com a parte de cima?)

{
   "Id": 1,
   "Latitude": -29.233591,
   "Longitude": -51.872771,
   "Descricao": "Tiago Casanova"
},
{
   "Id": 2,
   "Latitude": -29.234820,
   "Longitude": -51.876836,
   "Descricao": "Rafael Casanova"
},
{

10-06-2014 às 10:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael Casanova

Hm, não seria o caso de criar dois arquivos .json? Um com as cidades, e outro com as pessoas. Aí você pega o resultado de ambos (um de cada vez), e vai inserindo os pontos no mapa.

24-06-2014 às 17:11 Responder

George

Em primeiro lugar parabéns e obrigado pelo tutorial, você saberia me dizer se eu consigo colocar um frame ou um link dentro da infobox?

11-06-2014 às 17:07 Responder

Diogo souza

bom tarde
Eu fiz uns ajuste no script para buscar tudo do mysql se o arquivo json.
mas preciso de ajuda para passar as cordenadas lat e lgn e buscar o endereço.
pode me ajudar?

13-06-2014 às 12:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo souza

Opa, manda aí!

24-06-2014 às 11:38 Responder

diogo

Em resposta a Rodolfo Pereira

Tentei publicar o código fonte mas não deu..
posso te mandar por e-mail e você publica

24-06-2014 às 11:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a diogo

Sim: rodolfo@princiweb.com.br

24-06-2014 às 17:09 Responder

Davi

Mto bom esse post =) Por acaso sabe como posso colocar conteudo dentro da infobox, por exemplo imagens e etc..

16-06-2014 às 13:57 Responder

Flávio

Seu post me ajudou muito valeu.
Queria saber como customizar os botões de navegação do google maps tipo esse aqui: http://www.azagga.com.br/?page_id=11
se você souber ou algum lugar que eu possa ter referncia .

17-06-2014 às 11:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Flávio

Dê uma lida aqui: https://developers.google.com/maps/documentation/javascript/controls?hl=pt-br

E também veja o código fonte dessa página que você me enviou :)

24-06-2014 às 11:35 Responder

Arthur

Fala Rodolfo, tudo certo?
cara, de inicio parabeniza-lo pelo post, muito bom mesmo.
estou num projeto de tcc e preciso de algumas boas referencias sobre APIs de mapa.. apenas algo que introduza já está bom, saberia me indicar algum livro ou artigo?
valew, Abraço.

20-06-2014 às 12:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Arthur

"APIs de mapa" me parece muito genérico. Você quer referências da API do Google Maps especificamente?

24-06-2014 às 11:34 Responder

Gabriel

Por favor gostaria de uma luz.

Quero criar um app que o usuário cadastrado possa salvar um local no google maps e nomeá-lo, que esse lugar fique salvo no app para acesso de outros usuários.

como posso começar?

21-06-2014 às 01:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel

Para que o usuário possa escolher o local no Google Maps, você pode fazer isso aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

Com o tutorial acima, você terá a latitude e longitude do local, aí é só gravar esses dois, junto com o nome que o usuário der.

Depois disso, pegue esses dados e exiba para todos os usuários :D

24-06-2014 às 11:31 Responder

rodrigo

tópico perfeito, mas como posso carrear estes pontos do banco de dados?

22-06-2014 às 13:32 Responder

Renato

Parabéns pelo material, realmente muito útil, ajudou bastante.

24-06-2014 às 09:57 Responder

Davi Miranda

Eu preciso que dentro da minha infobox, tenha uma galeria de fotos que esta no bd, informacoes do bd e links para direcionar para outras paginas... Sera que é possivel?
vlw

25-06-2014 às 13:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Davi Miranda

Sim, basta colocar código HTML dentro do "content" do "myOptions" de cada Infobox.

25-06-2014 às 17:40 Responder

Thiago

Olá
Como eu conseguiria inserrir um iframe ai no conteudo, o meu pontos.json esta assim:

{
   "Id": 7,
   "Latitude": -22.9049771,
   "Longitude": -43.5560658,
   "Descricao": "Loja Campo Grande"
},

Como eu insiro isso no campo descriçã: <iframe src="http://meusite.com/teste.php" width="230" height="240" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

26-06-2014 às 10:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Eu não utilizaria iframe, mas tente isso:

{
   "Id": 7,
   "Latitude": -22.9049771,
   "Longitude": -43.5560658,
   "Descricao": "Loja Campo Grande <iframe src='http://meusite.com/teste.php' width='230' height='240' frameborder='0' marginwidth='0' marginheight='0' scrolling='no'></iframe>"
},

22-07-2014 às 14:50 Responder

Eurai

Poderia me dar uma ajuda.

O meu funcionou corretamente, apenas no zoom (out/in) perde o agrupamento.

Pontos.JS
https://mega.co.nz/#!2JohwBgK!YNaDYq6Fv9-O-qYDNwAJOotR7FWr_wpqlATF5hPV-cs

Index.HTML

https://mega.co.nz/#!HERjDB5A!iwnbRwBsqLOujzGsNQ6dllFGb4feCb7s9gHHAxvvzCg

26-06-2014 às 14:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eurai

Cara, dei uma olhada aqui e não consegui encontrar o motivo desse problema =/

22-07-2014 às 14:52 Responder

Eurai Rapelli

Em resposta a Rodolfo Pereira

Rodolfoo, consegui aqui. Demorei um pouco. kkkkkkkkkkkkkkkkkkkkkkkkk

Olha como fico

http://www.universoadvpl.com/2015/03/07-advpl-f-google-maps-customizado-no-advpl/
ta no site meu ae..

07-03-2015 às 01:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eurai Rapelli

Parabéns!

Por curiosidade: O que é ADVPL?

Abs!

06-04-2015 às 16:48 Responder

Eurai Rapelli

Em resposta a Rodolfo Pereira

Opaa,,,
Advanced Protheus Language
Linguagem do sistema ERP totvs protheus.

Existe o ABAP que é para o sistema SAP.
E o ADVPL que é para o Protheus. Linguagem corporativa.

06-04-2015 às 17:00 Responder

Junior

Parabéns Ótimo conteúdo, gostaria de saber se tem como empregar esse script dinamicamente com php e mysql tipo um banco de dados que alimentaria as posições no mapa e os infobox

27-06-2014 às 11:10 Responder

Lucas Santana

Olá, gostei muito do seu post e já consegui aprender bastante sobre API de mapas.

Mas, estou com um problema que não sei o que aconteceu, que não estou conseguindo arrastar o mapa clicando e segurando, simplesmente não funciona. O que poderia ser? Alguma ideia?

28-06-2014 às 01:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas Santana

Xi, quais são os "options" que você passou para o "map"?

22-07-2014 às 15:56 Responder

Rodrigo

Tutorial completo, e bem didático. Parabéns, muito bem feito.

29-06-2014 às 22:13 Responder

sandro

ola!! primeiramente parabens pelo post!!!! muito bom!!!
minha duvida é a seguinda, o pontos.json, criei um novo pontos.php com os mesmos dados, e alterei no mapa.js, ate deu tudo certo.
quando trago informacoes de mysql, ele nao exibe no mapa, mas se eu copiar o resultado que aparece em pontos.php, e copia e substituir o script php, as coordenadas aparecem no mapa.
ja tentei diversas formas, mas nada deu certo.
sabe o q posso ter feito de errado?
grande abraco

30-06-2014 às 14:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a sandro

Tem algum link disso rodando?

22-07-2014 às 15:56 Responder

rodrigo

Rodolfo, parabéns pelo trabalho.

Gostaria de uma ajuda. Tem como fazer o mapa ficar com 100% do tamanho da tela? Eu tentei colocar no div 100% mas o mapa n carrega.

Obrigado

03-07-2014 às 13:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rodrigo

CSS:

html { height: 100% }
body { height: 100%; margin: 0; }
#map { width: 100%; height: 100%; }

HTML:

...

<div id="map"></div>

...

Foi?

 

 

22-07-2014 às 16:31 Responder

Ramon Silva

Olá, existe uma funcionalidade na API que permita fazer busca no google maps por somente alguns locais específicos(determinados por mim na aplicação), desconsiderando o resto ?

Agradeço.

03-07-2014 às 18:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ramon Silva

Hm... acho que sim, basta apenas você colocar esses locais na busca, não utilizando a API do Google Maps para isso.

22-07-2014 às 16:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ramon Silva

Hm, acho que sim, basta você fazer a busca de endereços na sua base de dados de locais específicos, não utilizando a API do Google Maps.

Se você ainda quer utilizar a API do Google Maps para a busca, dê uma olhada no link abaixo, em "google.maps.GeocoderRequest object specification" e "google.maps.GeocoderComponentRestrictions object specification":

https://developers.google.com/maps/documentation/javascript/reference?hl=th-TH&csw=1#Geocoder

Porém, aí você não consegui restringir tanto assim.

22-07-2014 às 16:14 Responder

Karol

Funciona em localhost?

04-07-2014 às 10:15 Responder

Alysson Dias

Boa noite.
Gostaria de parabenizar pelo seu excelente trabalho, sou iniciante e consegui montar uma aplicação facilmente seguindo seu tutorial.
Gostaria de saber se você podeira me auxiliar a tornar seu código mais dinâmico e permitir que eu carregue arquivos json de acordo com um parametro do browser.
por ex: www.meusite.com.br#?estado=MG e no seu código ...
$.getJSON('js/pontos.json', function(pontos) {...
eu passar um parametro no carrega ponto que seria o valor do post estado=MG?
Outra dúvida seria como faria para recarregar o mapa uma vez que alterei o arquivo Json?
a

09-07-2014 às 23:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alysson Dias

Pegar parâmetros da URL por JS: http://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript

Sobre recarregar o mapa, você tem que tirar os pontos anteriores e adicionar os novos normalmente. Para tirar os pontos carregados anteriormente, faça um "for" para percorrê-los, e coloque dentro do "for":

markers.setMap(null);

Fazendo isso, você remove os marcadores do mapa.

22-07-2014 às 16:33 Responder

Rogerio

Valeu! Muito obrigado por compartilhar.

10-07-2014 às 12:06 Responder

Alexandre

amigo como faço para colocar mais marcadores, tipo mais de 1000

11-07-2014 às 11:09 Responder

Alexandre

Em resposta a Alexandre

Estou tentando puxar os dados de um mysql mais ele so marca 10 pontos, ta osso, com latitude e longitude consigo marcar quantos for preciso com endereço so marca 10

11-07-2014 às 17:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Tem algum link da sua app funcionando para eu ver o código?

16-07-2014 às 18:10 Responder

Alexandre

Em resposta a Rodolfo Pereira

http://prodacam/admin/cam/cameras/geral

17-07-2014 às 10:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Deu página de erro :(

18-07-2014 às 11:00 Responder

Alexandre

Em resposta a Rodolfo Pereira

Cara foi mal mandei a url local aqui kkkkk segue a correta http://mapa.luistibe.com.br/admin/cam/cameras/geral

18-07-2014 às 13:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Todos os endereços estão entrando na função "addMarker1"? Se sim, creio que seja o mesmo problema daqui: www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-1282

Dá uma olhada no link deste comentário, e veja se ajuda em algo. Eu ainda preciso fazer um código para testar 100% essa hipótese.

30-07-2014 às 15:54 Responder

Alysson Dias

Rodolfo,
Boa tarde.
Consegui resolver o problema de parametrização que fiz no post.
Agora estou com outro problema...
Sei que posso centralizar um mapa com a função gMap.setCenter mas como faço para localizar no json o ponto pelo ID e abrir o infoBox referente?
EU criei uma combo com os pontos selecionáveis e os values desta combo são os IDs do arquivo Json.
Qualquer luz será muito bem vinda.
Abraço.

13-07-2014 às 20:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alysson Dias

Opa:

$('select').change(function() {
    var id = $(this).val();

    infoBox[id].open(map, infoBox[id].marker);
});

16-07-2014 às 17:33 Responder

Alysson Dias

Em resposta a Alysson Dias

Rodolfo,
Bom dia.
Tentei seu código mas não funcionou.
Ele não reconhece este objeto marker que esta sendo enviando no segundo argumento do Open.
Como eu passaria as marcações do mapa que já esta carregado?
Obrigado pelo help.

21-07-2014 às 10:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alysson Dias

Ué, você usou o código deste post para adicionar os marcadores e tudo mais?

Te enviei por e-mail o meu código completo para você dar uma olhada.

Abs!

22-07-2014 às 17:01 Responder

Benedito

Bom dia Rodolfo! Em primeiro lugar, quero ser mais um a agradecer pelo seu artigo, que considero de primeira qualidade, muito bem explicado e que tem ajudado a tantos colegas, principalmente iniciantes como é o meu caso. Um sucesso! Estou com um problema que deve ser simples, mas não consigo resolver: Estou tentando inserir o geocode dentro loop do $getJSON para obter coordenadas de cada endereço do arquivo. Mas o que acontece é que ele executa todo o loop, marcando pontos e só depois executa o geodode(na mesma quantidade de vezes do loop!). O objetivo é executar antes de cada marcação para utilizar novas coordenadas e novo endereço formatado... Por favor, preciso de um help! Segue parte do código com marcações que fiz pra ver onde passa. Muito obrigado, Benedito. . . . 

function carregarGeocoder(endGeocode) {
        geocoder.geocode({
                    'address': endGeocode + ', Brasil',
                    'region': 'BR'
                }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        alert("primeiro if OK");
                        if (results[0]) {
                            alert("segundo if OK");
                            var latGeocode = results[0].geometry.location.lat();
                            var longGeocode = results[0].geometry.location.lng();
                            endGeocode = results[0].formatted_address; // Código para adicionar o ponto no mapa } } }); } function carregarPontos() { alert("carregaPontos"); $.getJSON(arquivo, function(pontos) { var latlngbounds = new google.maps.LatLngBounds(); alert("antes do each"); $.each(pontos, function(index, ponto) { alert("depois do each " + ponto.ID); endGeocode = ponto.LOGRADOURO + ", " + ponto.NUMERO + " - " + ponto.BAIRRO + ", " + " CEP " + ponto.CEP.slice(0,4) + "-" + ponto.CEP.slice(4) + ", " + ponto.CIDADE + " - " + ponto.ESTADO; alert ("antes geocoder " + endGeocode); carregarGeocoder(endGeocode); alert ("depois geocoder " + endGeocode); var marker = new google.maps.Marker({ position: new google.maps.LatLng(ponto.LATITUDE, ponto.LONGITUDE), title: "CheckExpress - Geoposicionamento", icon: 'img/marcador.png' }); alert("antes do myOptios"); var myOptions = { content: "

                            " + ponto.RAZAO_SOCIAL + "

                            " + "

                            " + "
                            CNPJ: " + ponto.CNPJ + "

                            " + "

                            " + ponto.LOGRADOURO + ", " + ponto.NUMERO + " - " + ponto.COMPLEMENTO + "

                            " + "

                            " + ponto.BAIRRO + "
                            CEP: " + ponto.CEP + "
                            " + ponto.CIDADE + " - " + ponto.ESTADO + "

                            " + "

                            " + "
                            LAT: " + ponto.LATITUDE + "
                            LONG: " + ponto.LONGITUDE + "

                            ", pixelOffset: new google.maps.Size(-150, 0) }; infoBox[ponto.ID] = new InfoBox(myOptions); infoBox[ponto.ID].marker = marker; infoBox[ponto.ID].listener = google.maps.event.addListener(marker, 'click', function (e) { abrirInfoBox(ponto.ID, marker); }); markers.push(marker); latlngbounds.extend(marker.position); alert("
                            depois do latlngbouns "); }); var markerCluster = new MarkerClusterer(map, markers); map.fitBounds(latlngbounds); alert("
                            final "); }); }

17-07-2014 às 11:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Benedito

Isso acontece pois o geocoder.geocode é executado de forma assíncrona.

Veja se isso te ajuda: http://stackoverflow.com/questions/9052393/google-geocoding-mutliple-addresses-in-a-loop-with-javascript-how-do-i-know-whe

18-07-2014 às 10:46 Responder

Benedito Pereira

Em resposta a Rodolfo Pereira

Caro Rodolfo,

Eu entendi o funcionamento da API, li o artigo que você indicou, mas confesso que não consegui implementar corretamente no meu fluxo...
Resolvi mudar de estratégia e gravar as coordenadas no banco.
Mesmo assim, estou com o mesmo problema para fazer a carga do mesmo com a tal rotina assíncrona. Se não for pedir demais, você poderia me dar mais uma dica?
Obrigado!

18-07-2014 às 23:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Benedito Pereira

Certo, então agora você tem a latitude e longitude de cada ponto, né?

30-07-2014 às 16:08 Responder

Benedito Pereira

Em resposta a Rodolfo Pereira

Isso mesmo! Agora já estou dominando o tema com mais facilidade. A partir do seu projeto, aprendi muito sobre as APIs do Google e consegui evoluir bastante! Inclui novas camadas e inseri um fluxo de seleção de dados em PHP, ficou bacana! Isso me abriu novas perspectivas de trabalho e desenvolvimento profissional. Muito obrigado e um grande abraço!

30-07-2014 às 19:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Benedito Pereira

Você conseguiu resolver?

20-08-2014 às 18:25 Responder

Daniel Baringer

Bom dia Rodolfo. Parabéns pelo trabalho. Muito interessante seu artigo. Eu baixei a versão disponível para download e executei o arquivo index.html diretamente no navegador Google Chrome sem fazer qualquer alteração nos arquivos, porém pra mim não apareceu os marcadores. Se não se importar, poderia me ajudar ?

18-07-2014 às 10:46 Responder

Diego

Boa tarde preciso da sua ajuda! Eu subi os arquivos no meu servidor mas não está funcionando as marcações.

18-07-2014 às 16:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego

O arquivo .json está sendo lido? Digo isso, pois alguns servidores não tem suporte padrão a arquivos .json. Aí você precisa fazer isso aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-217

30-07-2014 às 16:02 Responder

Rodrigo

Rodolfo,
Eu estou tentando implementar no Visual Studio ASP.Net mas os marker não aparecem.....

20-07-2014 às 17:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

E aparece algum erro? Fazendo esse mapa em .html puro mesmo (sem o ASP.NET), ele funciona normal?

22-07-2014 às 16:39 Responder

Rodrigo

Em resposta a Rodolfo Pereira

Rodolfo, boa noite!
Eu estou desenvolvendo no Visual Studio 2012 com a linguagem ASP.Net.

O problema que tenho é a seguinte:

-Criei um web service em minha aplicação que retorno uma string JSON.
Sei que o comando $GetJson não funciona passando uma webservice para o mesmo consumir.

- Fiz o seguinte comando com Ajax

function carregarPontos() {

   $.ajax({
      type: 'POST',
      url: '/wsDispositivo.asmx/ConsultarDispositivo',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      success:



      error: function (xmlHttpRequest, textStatus, errorThrown) {
         alert('não passou');
         console.log(xmlHttpRequest.responseText);
         console.log(textStatus);
         console.log(errorThrown);
      }
   });
}

Porém não obtenho o retorno esperado..... Mê dê uma luz...rs abraço. obs: se alguém estiver acompanhando os posts e souberem a solução Segue contatos: rodrigomoura.developer@gmail.com fone: 95888-8732 abraço a todos

22-07-2014 às 19:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

E qual é o retorno (mensagem de erro) que você recebe? Tem como eu consumir esse web service?

30-07-2014 às 16:21 Responder

Larissa

Boa noite,

Eu peguei esse exemplo do seu post para fazer um trabalho, porém está dando um erro chamado fitBounds que não consigo resolver, sera que poderia me ajudar ?

23-07-2014 às 18:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Larissa

Tem um link para que eu possa ver o seu trabalho rodando?

30-07-2014 às 16:42 Responder

Rodrigo

Rodolfo, eu havia postado essa dúvida anteriormente mais mas não cheguei a enviar o código. gostaria que me ajudasse a identificar onde estou com erro. obs. o Json estou usando de forma dinamica que é uma consulta via web service ao banco de dados SQL Server. Também e o ASP.net. Segue código:

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
        var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
        var options = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("mapa"), options);
    } // google.maps.event.addDomListener(window, 'load', initialize); initialize(); function abrirInfoBox(id, marker) { if (typeof (idInfoBoxAberto) == 'number' && typeof (infoBox[idInfoBoxAberto]) == 'object') { infoBox[idInfoBoxAberto].close(); } infoBox[id].open(map, marker); idInfoBoxAberto = id; } function carregarPontos() { $.ajax({ type: 'POST', url: '/json.asmx/ConsultarDispositivo', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (pontos, status) { // var pontos = $.parseJSON(data.d); alert(pontos.d); for (var i = 0; i < pontos.d.length; i++) { var id = pontos.Id; var latitude = pontos.Latitude; var longitude = pontos.Longitude; var nome = pontos.Descricao; var latlngbounds = new google.maps.LatLngBounds(); var marker = new google.maps.Marker( { position: new google.maps.LatLng(latitude, longitude), title: "PONTO", icon: 'img/marcador.png', map: map }); var myOptions = { content: "

" + nome + "

", pixelOffset: new google.maps.Size(-150, 0) }; infoBox[i] = new InfoBox(myOptions); infoBox[i].marker = marker; infoBox.listener = google.maps.event.addListener(marker, 'click', function (e) { abrirInfoBox(id, marker); }); markers.push(marker); latlngbounds.extend(marker.position); } var markerCluster = new MarkerClusterer(map, markers); map.fitBounds(latlngbounds); }, error: function (xmlHttpRequest, textStatus, errorThrown) { alert('não passou'); console.log(xmlHttpRequest.responseText); console.log(textStatus); console.log(errorThrown); } }); }

23-07-2014 às 18:47 Responder

Rodrigo

Em resposta a Rodrigo

Rodrigo, Eu consegui solucionar o meu problema. Só não estou conseguindo trazer os dados corretos na caixa de dialogo dos marcadores pois estão repetindo as informações.

Segue código talvez possa te ajudar, boa sorte!

function carregarPontos() {
    $.ajax({
        type: 'POST',
        url: '/json.asmx/ConsultarDispositivo',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(ConsultarDispositivo, status) {
            var pontos = $.parseJSON(ConsultarDispositivo.d);
            var latlngbounds = new google.maps.LatLngBounds();

            for (var i = 0; i < pontos.length; i++) {
                var image;
                var id = pontos[i].Id;
                var latitude = pontos[i].Latitude;
                var longitude = pontos[i].Longitude;
                var tensao = pontos[i].Tensao;
                var equip = pontos[i].Equip;
                var modelo = pontos[i].Modelo;
                var operadora = pontos[i].Operadora;
                var simCard = pontos[i].SimCard;
                var razao = pontos[i].Razao;
                var CGCCPF = pontos[i].CGCCPF;
                var raio = pontos[i].Raio;

                if (parseInt(tensao) <= 500) {

                    image = {
                        url: 'img/green.png'
                    };
                    var titulo = "Baterial com tesão Alta"
                } else if (parseInt(tensao) >= 501 && parseInt(descricao) <= 1000) {

                    image = {
                        url: 'img/blue.png'
                    };
                    var titulo = "Baterial com tesão média"
                } else if (parseInt(tensao) >= 1001) {

                    image = {
                        url: 'img/red.png'
                    };
                    var titulo = "Baterial com tesão fraca"
                } else {

                    image = {
                        url: 'img/marcador.png'
                    };

                }

                var contentString = 'texto';


                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude, longitude),
                    title: titulo,
                    icon: image

                });

                var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    }),
                    marker;
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(contentString);
                        infowindow.open(map, marker);
                    }
                })(marker))

                markers.push(marker);
                latlngbounds.extend(marker.position);

            }
            var markerCluster = new MarkerClusterer(map, markers);
            map.fitBounds(latlngbounds);
        }

    });

}

24-07-2014 às 18:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Pelo que vi, estão repetindo pois o conteúdo do "contentString" é igual para todos.

30-07-2014 às 17:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Cara, você pode colocar o seu código no http://pastebin.com/ e me enviar? Pois o blog aqui deu uma desorganizada no seu código hehehe.

Opa, esquece, consegui deixá-lo legível huahua.

30-07-2014 às 16:45 Responder

Ritielle

parabéns pelo trabalho cara, me ajudou muito.

25-07-2014 às 11:48 Responder

Roberto Reis

Parabéns Rodolfo pela seu tutorial . Eu sou leigo no assunto, mas consegui entender seu trabalho.

Minhas dúvidas: 1- Se eu tiver que fazer uma segunda marcação com um arquivo Json com outras coordenadas, é possível?
Meu objetivo é plotar/marcar as vendas de um determinado representante em sua regiao com um marcador de uma cor ( seguindo seu exemplo eu já consigo fazê-lo), e os locais que este representante deixou de vender com marcadores de outra cor. Pode me dar uma dica de como fazer?.
2- Ao invés de usar um arquivo Json, é possível ler diretamente uma tabela SQL SERVER ( Id; Lat; Long; conteudo)??

Muito Obrigado.
Roberto Reis

28-07-2014 às 22:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Roberto Reis

Fala Roberto! Vamos lá:

1. Sim, é possível. Neste mesmo arquivo .json que você já inseriu as vendas, ou em um outro separado (aí você terá que fazer uma segunda requisição), tenha um atributo que diferencie os pontos de vendas dos pontos que o vendedor deixou de vender. Neste campo, eu deixaria o nome do arquivo do ponto, algo como isso:  http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-737

2. Não. Você tem que fazer esse fluxo: Banco de dados -> Script server side -> JSON -> Mapa.

 

20-08-2014 às 18:12 Responder

Alan

Não estou conseguindo utilizar seu exemplo.
Quando rodo aqui só exibe o mapa sem nenhum marcador

30-07-2014 às 18:37 Responder

Alan

Em resposta a Alan

Verifiquei que não está entrando na função getJSON. O que pode ser?

31-07-2014 às 10:46 Responder

Samuel Quiteque

Rodolfo, como faço para traçar rota com este exemplo?

01-08-2014 às 14:11 Responder

Nathália Cechetti

Olá, estou tentando me basear no seu código para fazer uma aplicação, porém não consegui realizar a leitura do arquivo JSON com as localizações.
Você teria como me mandar por email um exemplo completo de como se lê um arquivo JSON?

Fico muito grata.
Parabéns pelo post!

01-08-2014 às 16:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Nathália Cechetti

Mas o código aqui deste post mostra isso. Talvez o seu problema com a leitura do JSON seja que você está rodando a app local no Chrome ou esteja rodando em algum servidor o qual não possa suporte a arquivos .json.

Qual seria o seu cenário? Rodando local ou em um servidor?

27-08-2014 às 11:36 Responder

Rodrigo Müller

Estou com um problema, segui teu tutorial em relação ao InfoBox, mas dá erro: TypeError: infoBox[id].open is not a function (no Firefox) Uncaught TypeError: undefined is not a function (no Chrome) Meu código está igual ao seu: function abrirInfoBox(id, marker) { if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') { infoBox[idInfoBoxAberto].close(); } infoBox[id].open(map, marker); idInfoBoxAberto = id; } ... var myOptions = { content: "

Conteúdo do InfoBox

", pixelOffset: new google.maps.Size(-150, 0) }; infoBox[ponto.Id] = new InfoBox(myOptions); infoBox[ponto.Id].marker = marker; infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) { abrirInfoBox(ponto.Id, marker); });

02-08-2014 às 14:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo Müller

Manda o link pra eu dar uma olhada.

27-08-2014 às 11:42 Responder

Altair silva

Caro amigo!!

Preciso de uma ajuda sua, to alterando a altura e largura do mapa no css, mas não está tendo mudança na hora de executá-lo

02-08-2014 às 21:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Altair silva

Tem algum link pra que eu possa ver isso?

27-08-2014 às 11:42 Responder

Adailton

Boa Rodolfo,
Primeiro Parabens pelo script.

Uma duvida, como depurar o api 3 do maps, você saberia me dizer?
Tenho um script rodando o maps v3 e algumas coordenadas, fornecidas direto pelo Google Maps, nele não abre!
Peguei seu script para fazer alguns testes e o problema continua.
Como disse, o engraçado é que direto no Google Maps funciona direito, ja no meu e no seu script não abre o local. (outras localidades abre normalmente, no seu e no meu script).

Caso se interesse pelo caso, segue coordenadas que detectei o problema:
Latitude : -20.816813949999997
Longitude : -49.382355499999996
Cidade : São José do Rio Pretor, SP

Abraços e bom final de semana

Att

03-08-2014 às 19:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adailton

Fala Adailton!

Qual é o endereço exato? Coloque-o aqui http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/ e tente utilizar a latitude e longitude que é exibida.

Abs!

15-10-2014 às 10:13 Responder

Oyãma De lima Santos

Bom dia !

A um tempo venho acompanhando o Blog e o site de vocês, e estão de parabéns pelo trabalho.

Sou iniciante em programação, café com leite mesmo ! Só que por intervenção divina, agora me deram a oportunidade de um cargo que envolve totalmente Desenvolvimento Web e acredite, eu estou imensamente feliz, ando estudando e me virando adoidado.

No momento ando bastante interessado no que se refere em API's, Só que estou com um pouco de dificuldade de testar essa aplicação aqui (sendo claro, não sei onde onde cada carinha via no meu código rs), eu vou me virar até conseguir mais ficaria grato por uma ajudinha a mais, um contato simples por e-mail para tirar algumas dúvidas.

Que a força esteja com vocês, abraços !

05-08-2014 às 10:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Oyãma De lima Santos

Fala Oyãma!

Pode colocar as suas dúvidas aqui que te ajudarei com prazer :)

Que a força esteja com você, abs!

15-10-2014 às 10:21 Responder

Marcos

tem como eu colocar um link na descrição do ponto a imagem consegui mas apenas o link não consigo

08-08-2014 às 20:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcos

Sim, só usar HTML, assim como você fez com a imagem:

 "Conteudo": "<a href='http://www.uol.com.br'>Link UOL</a>"

15-10-2014 às 10:26 Responder

gustavo

Dae rodolfo, cara esta funcionando perfeito, minha duvida é o seguinte eu quero colocar um marcador diferente do outro, um verde e um azul por exemplo, tem alguma ideia de como pode ser feito?

12-08-2014 às 09:35 Responder

Guilherme

Otimo post, mas seria possivel usar um BD contendo as logitudes e latitudes e as informações e criar o mapa e pontos?

12-08-2014 às 15:51 Responder

Diego

Boa tarde meu amigo você conhece alguém que já fez um projeto igual a esse? http://www.smartz.com.br/unidades

12-08-2014 às 16:12 Responder

Guilherme

Em resposta a Diego

Diego, tb to precisando, se arranjar me avise por favor...

15-08-2014 às 14:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme

Respondi ele.

15-10-2014 às 11:04 Responder

JANAINA

Em resposta a Diego

Olá, Parabéns pelo post.

Estou precisando de implementar para que além de mostrar os pontos diversos, mostre o ponto atual da pessoa que esta acessando, tentei alguns testes aqui mas não esta funcionando, você poderia me ajudar.

Aguardo.
Att

17-08-2014 às 11:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a JANAINA

Oi Jana,

Você pode me passar o link do que você já fez para eu dar uma olhada?

Abs!

15-10-2014 às 11:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego

Fala Diego,

Conheço sim... eu! huahuaha

Abs!

15-10-2014 às 10:47 Responder

Marcelo

Olá Rodolfo, parabéns, ótimo post!
Tenho uma dúvida, como faço pra puxar o mapa duas vezes sem que haja nenhum conflito.. só aparece um...

14-08-2014 às 15:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo

Fala Marcelo,

Manda o link pra eu dar uma olhada no que você já fez.

Abs!

15-10-2014 às 10:57 Responder

Adilson

Rodolfo, parabéns ótimo post.

Usando a api do google place eu consigo trazer os locais próximos a mim (ok!). Minha dúvida é: No caso de carregar um JSON com as latitudes e longitudes e montar esse mapa (igual ao exemplo que você demonstrou) teria como mostrar os mais próximos primeiro (sem agrupar pelo MarkerClusterer)?

21-08-2014 às 23:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adilson

Fala Adilson,

Não entendi exatamente o que você quer =/ Poderia explicar melhor?

Abs!

15-10-2014 às 11:22 Responder

Guilherme Harrison

Ótimo tutorial! Segui e funcionou perfeitamente.

Para deixar tudo ainda mais completo, você poderia me dar uma dica em como colocar um link para um marcador? Gostaria de ter um menu que lincasse para cada marcador. Eu estou tentando fazer o link enviar uma informção de um miniformulário escondido. Estou no caminho certo?

Um abraço, e parabéns!

22-08-2014 às 14:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Harrison

Fala Guilherme,

Tem algum link da sua app para eu dar uma olhada?

Abs!

15-10-2014 às 11:21 Responder

anderson

Parabens pelo post.
Sou iniciante no assunto. Como ficaria o mesmo mapa sem a utilização do MarkerClusterer? Tentei aq mas carregou o mapa sem os pontos.
Obrigado

25-08-2014 às 12:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a anderson

Basta seguir o que está no post, tirando o tópico "Agrupando pontos próximos".

27-08-2014 às 11:46 Responder

Dieme

Observei que o mapa está todo desconfigurado, diferente da primeira vez que vi. Seria algum problema com a api?

26-08-2014 às 07:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Dieme

Desconfigurado? Onde?

27-08-2014 às 11:45 Responder

Dieme COmper

Em resposta a Rodolfo Pereira

Ontem pela manha o google estava com aquele bug das imagens.
O Mapa aparecia metade minha localização, (já usava) metade outro lado do mapa, ficou a manha toda assim. Depois voltou.

Acho que pode ter sido isso.

27-08-2014 às 11:53 Responder

Marco

Rodolfo, muito bom!
Simples e direto!

28-08-2014 às 11:12 Responder

Fernando

Parabéns pelo trabalho, Rodolfo!

Sou leigo no assunto e estava querendo saber se é possível colocar links, pular linhas, enfim, editar mais o conteúdo da InfoBox. Se possível, como fazer? Edito pelo arquivo .json, onde está 'Descricao'?

Obrigado.

09-09-2014 às 20:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando

Fala Fernando!

Isso, edita por lá. Só colocar código HTML dentro dele, ex:

"Descricao": "Conteúdo<br /> em HTML."

Abs!

08-10-2014 às 11:59 Responder

Diogo

Cara, ótimo tutorial! Tô com um projeto pro final do ano pra fazer e seus tutoriais tão ajudando mt! No meu app, o usuário ia achar o ponto no mapa e fazer um insert num banco com a latitude, longitude e outros dados, num form... Tem um jeito de inserir isso no arquivo JSON, sem precisar de um bd? Depois o mapa mostraria todos os marcadores e tals... Valeu desde já!

11-09-2014 às 14:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo

Fala Diogo!

Sim, é só você usar algum componente que "abra" o arquivo .json, escreva nele as novas coordenadas, e "feche" ele depois.

Abs!

08-10-2014 às 11:56 Responder

Klayton Fantin

Bom dia Rodolfo!

Primeiro gostaria de parabenizar pelo ótimo post. Está me ajudando muito.

Primeiramente gostaria de informar que sou webdesiner e crio alguns temas para wordpress, (mais como hoby). estou aventurando agora na programação para evitar alguns plugins e deixar o site mais leve e também.

Eu segui todos os passos e obtive sucesso no mapa, porém agora tenho um desafio.
Estou criando um tema Wordpress para uma empresa de Outdoor de um amigo, e ele quer um mapa na página inicial com todos os locais dos outdoors. Até aí tudo certo.

Existe uma página chamada painéis onde são listados todos os outdoors, e quando clicamos em um determinado outdoor somos direcionados para a página de detalhe. Dentro dessa página de detalhe existe um mapa contendo a localização apenas o outdoor em questão.

Até testei alguns plugins do google maps, mas nenhum me deu o resultado desejado.

Bom, agora vamos ao que tenho em mente. (Caso meu pensamento esteja errado me corrija)

1 - Vou incluir o mapa seco na index.php. (isso eu sei fazer)

2 - Vou incluir o mapa do detalhe seco na single.php. (isso eu sei fazer)

3 - Vou utilizar um plugin para a criação de fields. Os fields criados serão exibidos dentro do cadastro de posts. Quando o cliente cadastrar um outdoor terá que preencher os campos criados "latitude, longitude, código do painel, descrição e talvez foto". (isso eu sei fazer).

4 - Vou criar um arquivo.php que obtenha o conteúdo destes fields no mysql do wordpress (Isso não sei fazer) ou de um arquivo JSON. No último caso JSON posso utilizar o seu arquivo mapa.js para capturar os pontos do mapa da página inicial pois lá serão exibidos todos os pontos.

Talvez tudo esteja meio confuso, ou não estou sabendo explicar, mas a minha intenção é deixar o mais dinâmico possível, algo que o meu amigo possa administrar sem mim. Este projeto é para ajudar o meu amigo, mas também para meu conhecimento em programação.

Minha cabeça está a mil, a cada minuto surgem idéias e com elas mais dúvidas. Tipo, é possível essa integração com o wordpress? Como irei buscar as informações do banco sendo que em um mapa exibirei todas, mas no outro apenas 1.

Você já viu ou fez algo parecido?

Se for possível intender e de quebra me dar uma luz no fim do túnel eu agradeço de coração.

Um grande abraço.

Klayton Fantin

15-09-2014 às 10:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Klayton Fantin

Fala Klayton,

O seu raciocínio está correto. Creio que a maior dificuldade que você terá, é ler do banco as informações necessárias para gerar o JSON. Uma vez feito isso, o restante irá acontecer naturalmente.

Vi que você fez um comentário após este aqui. Você conseguiu gerar este JSON de acordo com os dados do banco de dados?

Abs!

08-10-2014 às 11:46 Responder

Klayton Fantin

Em resposta a Rodolfo Pereira

Rodolfo,
Obrigado por responder a minha questão.

Realmente não é fácil pegar uma informação no banco do WP heheehh ele meio que deixa tudo imbutido.

Bom, a questão do mapa interno já está resolvida, quando clico no artigo ele chama o mapa e inclui o marcador de acordo com latitude e longitude, mas nesse caso não estou usando o json. Criei alguns campos dinâmicos onde incluo os valores. Capturo esses valores no php e transporto para o javascript que faz o restante do trabalho.

Agora o mapa da index onde estão todos os pontos fica mais complicado. Não consegui encaixar o seu tutorial dentro de um loop do WP para mostrar todos os pontos. No momento estou incluindo ponto a ponto no mapa.json.
O brabo é incluir 200 pontos manualmente, heheehehh.

Agradeço a ajuda,

Um grande abraço.

08-10-2014 às 23:25 Responder

Márcio Carvalho

Mandou bem demais da conta, sempre quis um tutorial fácil e descomplicado, vc tá de parabens, sua didática é otima, vc sabe muito bem como passar seus conhecimentos, agradeço de coração =)

15-09-2014 às 14:37 Responder

Klayton Fantin

Opa, blz Rodolfo?

Tentei aplicar o mapa dentro do wordpress.

O mapa aparece, mas os marcadores não, pois o JSON parece que nem está sendo carregado. Ou o JSON ou o ícone.

Pode me ajudar?

15-09-2014 às 15:11 Responder

Luiz

Olá, estou fazendo um trabalho de faculdade vc poderia me ajudar? como fazer o marcador ficar móvel para que o usuário arraste e solte em um lugar que ele determina.

16-09-2014 às 09:22 Responder

Andre

Em resposta a Luiz

Rodolfo tudo bem?

Saberia dizer como foi feito o Mapa deste site --> http://www.demo5.aloh.in/all-family-condominium-club repare que tem o marcador principal e vários ícones de escolas, hospital dentre outros... Queria implementar em meu site.

17-09-2014 às 00:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Andre

Fala Andre,

Veja que os ícones personalizados que eles usam, se referem à um ícone que é padrão do Google Maps (dá um zoom em um dos ícones deles, para ver um logo abaixo do GM).

Dê uma lida aqui e veja se ajuda: https://developers.google.com/maps/tutorials/customizing/custom-markers

Abs!

08-10-2014 às 11:30 Responder

André

Em resposta a Rodolfo Pereira

Muito obrigado Rodolfo, vou dar uma lida sim...

08-10-2014 às 13:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz

Nas opções do marker, passe o valor de "draggable" como "true":

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
   title: "Meu ponto personalizado! :-D",
   icon: 'img/marcador.png',   
   draggable: true
});

08-10-2014 às 11:38 Responder

Vili Bergerhoff

Excelente post. E parabéns pela iniciativa de compartilhar conhecimento. You are making a better world.

17-09-2014 às 18:40 Responder

Fabio

Cara primeiramente parabéns pelo conteúdo é muito bom, só que estou com duvidas de como atualizar só os ponto no mapa sem atualizar a pagina inteira lembrando que as condenas estarão em contaste mudança.
Dês de já muito obrigado.

18-09-2014 às 22:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fabio

Fala Fabio,

Dá um "Ctrl F" nesta página por "setTimeout". Você encontrá alguns conteúdos que podem te ajudar.

Abs!

08-10-2014 às 11:17 Responder

Gabriel Ferraz

Olá Rodolfo, tudo bem?

Primeiro de tudo parabéns pela programação, achei uma ferramenta extremamente útil e bem desenvolvida.

Gostaria de saber se há algum plugin semelhante, em que seja possível escrever um determinado endereço, e apareça os endereços previamente cadastrados.

Ex: cadastrei 10 lojas de roupas no mapa do meu site, se um cliente escrever o endereço, no mapa vão aparecer as lojas mais próximas do endereço digitado.

OBS: com zoom pré-definido

Obrigado,
Gabriel Ferraz

22-09-2014 às 17:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Ferraz

Fala Gabriel,

Caso você queira fazer esta busca nos endereços cadastrados no seu site, basta alterar  "source" do Autocomplete, como é explicado aqui http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html. Para ter uma explicação mais detalhada, recomendo que você leia a documentação do próprio plugin de Autocomplete: http://jqueryui.com/autocomplete/

Abs!

08-10-2014 às 10:57 Responder

Wanderson

Existe alguma limitação de marcadores a serem exibidos de uma só vez? Eu tentei mostrar centenas de marcadores de uma vez, mas aparece apenas dez (10) marcadores.

23-09-2014 às 17:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wanderson

Fala Wanderson,

Pelo que eu saiba, não existe limitação para a quantidade de marcadores exibidos no mapa. Você pode me enviar o link do seu mapa para eu dar uma olhada?

Abs!

08-10-2014 às 10:51 Responder

Miguel Muller

Eu consigo personalizar os icones do Marker Clusterer Plus ?

25-09-2014 às 11:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Miguel Muller

Fala Miguel,

Dê uma olhada neste comentário e veja se te ajuda: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-1486

Abs!

08-10-2014 às 10:43 Responder

Allan Gaspar

Olá Rodolfo mais uma vez parabéns pelo post,
estou com uma situação com o marker cluster que é o seguinte: imagine que eu tenha clientes em um shopping ou centro comercial ou seja no mesmo endereço, quando isso acontece não tem zoom no mundo que volte a mostrar os marcadores ou seja por mais que eu aproxime só é mostrador o agrupamento, consequentemente não terei como acessar as informações dos clientes que estão no infobox, voçê consegue ver uma solução viável para este caso?

29-09-2014 às 17:39 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Allan Gaspar

Fala Allan!

Dá uma olhada nestes comentários e veja se te ajuda: www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-245

Abs!

08-10-2014 às 10:29 Responder

Bruno

Boa tarde Rodolfo, eu gostaria de saber se existe a possibilidade após adicionar os pontos, remove-los.
Por exemplo: Eu crie um botão que ao clica-lo mostra os pontos no mapa, porem tenho um segundo botão "limpar" que ao clicar ele recarrega a página e tirando os pontos. O que eu queria é limpar estes pontos sem a necessidade de recarregar toda a página. Você saberia me dizer como faço isso?

30-09-2014 às 12:40 Responder

Bruno

Em resposta a Bruno

Rodolfo, desculpa floodar o seu blog. Consegui fazer... pra quem precisar segue a "receita do bolo"

Primeiramente eu tenho um arquivo .JSON que fica mudando constantemente as coordenadas de latitude e longitude. Tenho um Javascript que faz esta leitura e mostra no mapa as coordenadas. após alguns segundos preciso que ele limpe o ponto e mostra o marcador na nova coordenada.
Para isso criei um javascript com os seguintes códigos:

var geocoder;
var map;
var marker;
myVar = setTimeout(function() {
    initialize();
}, 100);
setInterval(function() {
    clear();
}, 2000);

function initialize() { // função responsável pro fazer a leitura do arquivo .JSON
    $.getJSON('../JSON/Onibus.json', function(pontos) { // local do arquivo json
        $.each(pontos, function(index, ponto) {
            var latlng = new google.maps.LatLng(ponto.Latitude, ponto.Longitude);
            var options = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("mapa"), options);
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
                map: map,
                icon: '../IMAGENS/bus.gif',
                optimized: false
                    // draggable: true,
            });
            marker.setPosition(latlng);
        });
    });
}

function clear() // função responsável por limpar o marcador da tela
{
  marker.setMap(null);
}

30-09-2014 às 13:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno

Obrigado por compartilhar o código! :)

08-10-2014 às 10:27 Responder

Lucas

Excelente post.
Gostaria que me tirasse uma dúvida.... na foto final o Mark Cluster ficou com os pontos em amarelo, como eu posso mudar a cor quando os pontos se juntam de azul para outras cores?

Grato Lucas

01-10-2014 às 11:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas,

Dê uma olhada neste exemplo do próprio MarkerClusterer: google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html

Ele tem a opção "Cluster style", e veja que quando você altera essa opção, os ícones dentro do mapa são alterados. Seguindo essa implementação, você tem que criar os seus ícones com as cores que você quer, e passá-los para o MarkerClusterer.

Olhe o código fonte da página do exemplo, e procure pelo array "styles", lá tem certinho como fazer isso.

Boa sorte!

08-10-2014 às 10:15 Responder

Guilherme Marques Xavier

Rodolfo,

Boa tarde!

Tenha uma dúvida simples:

Há a possibilidade de criar outros tipos de pontos personalizados?

Exemplo:

Além do ponto azul criado por você, ter mais duas ou mais "categorias" de pontos, para informações de pontos distintos.

Seria algo do tipo?

var markerDois = new google.maps.Marker({
   position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
   title: "Meu ponto personalizado 2! :-D",
   icon: 'img/marcador.png'
});

var markerTres = new google.maps.Marker({
   position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
   title: "Meu ponto personalizado 3! :-D",
   icon: 'img/marcador.png'
});

... e assim vai.

Além disso, será preciso ter 3 arquivos JSON, por exemplo? Para ter 3 tipos de pontos.

Fico no aguardo.

Abraço!

09-10-2014 às 17:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Marques Xavier

Fala Guilherme!

Dá uma olhada aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-737

Abs!

15-10-2014 às 10:07 Responder

Guilherme Marques Xavier

Em resposta a Rodolfo Pereira

Cara, muito obrigado mesmo! Consigo fazer e ficou bem bacana.

Abraço

15-11-2014 às 16:24 Responder

Luiz

Olá Rodolfo,
Como faço essas marcações buscando a latitude e a longitude do banco de dados?

14-10-2014 às 10:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz

Fala Luiz,

Dê uma olhada neste comentário: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-324

A ideia básica é essa: Gerar um JSON de acordo com os registros do BD.

Abs!

15-10-2014 às 09:20 Responder

EDER

Parabéns, primeiramente!

Gostaria de saber como faço pra colocar links dentro da descrição, no lugar de "Conteudo do infobox"?

Obrigado.

17-10-2014 às 09:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a EDER

Fala Eder!

Basta utilizar HTML normalmente. Dá uma olhada aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-390

Abs!

29-10-2014 às 11:30 Responder

Juliana

Ótimo post, parabéns!

Também estava precisando de algo como http://www.smartz.com.br/unidades.

17-10-2014 às 11:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Juliana

Oi Juliana!

E qual a sua dúvida ao fazer um mapa como este?

Abs!

29-10-2014 às 11:38 Responder

Edmilson Lani

Rodolfo, parabéns pelo artigo.

Eu gostaria de traçar uma reta entre os pontos e mudar a cor dela dependendo de um status, sabe se á possível?

21-10-2014 às 11:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Edmilson Lani

Fala Edmilson!

É sim. Para traçar a reta, veja aqui: https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=pt-br

Aí no valor de "strokeColor", você faz um "if" de acordo com o status e coloca a cor que desejar :D

Abs!

29-10-2014 às 11:42 Responder

valtemir

bom dia, fiz alguns testes e percebi q o limite do waypoints sao 8 pontos, teria algum macete para aumentar esses pontos??

23-10-2014 às 10:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a valtemir

Sim, pagando pro Google :D

29-10-2014 às 11:45 Responder

vitor

ola tudo bom esse post foi bastante util
porem gostaria de saber como eu faço pra guardar todos os registros de marcaçoes em um banco de dados
me de alguma forma pra eu pesquisar mais afundo obrigado

23-10-2014 às 11:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a vitor

Fala Vitor!

Estude banco de dados :D

Procure no Google alguns exemplos de aplicações em PHP + MySQL.

Abs!

29-10-2014 às 11:45 Responder

Juca

Eu estou tentando usar uma função q vc disponibilizou na seu site, mas não estou conseguindo.

A função em questão é está:

var javascript_array = new Array();
var geocoder = new google.maps.Geocoder();

javascript_array[1] = "Travessa Amazonas,770,Aviario,69.910-700-AC";
javascript_array[2] = "rua Jos\u00e9 Julio Sawer,38,Ponta Verde,57.035-390-AL";
javascript_array[3] = "Rua S\u00e3o Francisco de Assis,891,Santa Monica,44.077-720-BA";

function carregarPontos() {
        for (var i = 0; i < javascript_array.length; i++) {
            endereco = javascript_array[i];

            geocoder.geocode({
                        'address': endereco + ', Brasil',
                        'region': 'BR'
                    }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                var latitude = results[0].geometry.location.lat();
                                var longitude = results[0].geometry.location.lng();

                                var marker = new google.maps.Marker({
                                            position: new google.maps.LatLng(latitude, longitude),
                                            title: "Meu ponto personalizado! :-D",
                                            icon: 'img/marcador.png'

Ele monta as coordenadas baseadas em alguns endereços pra definidos..
Mas não está dando certo, vc poderia me dar uma ideia do q poderia estar dando errado, desde já fico grato pela atenção.. abçs

27-10-2014 às 10:39 Responder

Guilherme Rodrigues

Em resposta a Juca

Boa tarde.

Eu gostaria de adicionar uma linha a partir de um ponto determinado pela coordenadas geográfica do mesmo.

No entanto, quero definir uma direção a partir de um ângulo e uma dimensão a partir de kilometros para essa linha, sem definir um ponto final para essa linha por coordenadas.

Exemplo: Uma linha que iria começar em uma determinada coordenada geográfica -12,3456789, -12,3456789 tem ângulo de 123 ° no sentido horário e tem dimensão XXkm.

Essa é uma questão muito importante para mim. Peço por gentileza que poste um exemplo do código ou sugestões para minhas questões.

Desde já agradeço a atenção dedicada.

28-10-2014 às 17:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Rodrigues

Cara, não entendi huauahuhau tem como desenhar? Na moral :D

29-10-2014 às 16:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Juca

Fala Juca! Você tem um link para eu ver isso funcionando? Abs!

29-10-2014 às 14:31 Responder

Guilherme Rodrigues

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo.

Eu queria fazer uma linha definindo apenas as coordenadas de início dela. A dimensão e direção dessa linha. A direção seria dado por um ângulo azimutal, onde o 0° é o Norte e o 90° é ao Leste.

Na verdade eu já encontrei uma Maneira de faze-lo adicionando a biblioteca geometry.

Segue o código utilizado para adicionar uma reta partindo de um determinado ponto, com direção orientada a 230° e com dimensão de 6.000 metros:

var startLL = new google.maps.LatLng(Lat, Lng);
var endLL = new google.maps.geometry.spherical.computeOffset(startLL, 6000, 230);

var coordinates = [startLL, endLL];
var path = new google.maps.Polyline({
    path: coordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

Mas de toda forma Rodolfo, obrigado pela atenção.

Fico a disposição.

29-10-2014 às 17:30 Responder

Guilherme Rodrigues

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo,

Estou com outra questão.

Estou incluindo muitos marcadores em uma única coordenada geográfica (Aproximadamente 12). Cada marcador tem uma caixa de diálogo com informações diferentes. No entanto não consigo visualizar todas as caixas de diálogo contidas naquele ponto devido ao acumulo de marcadores.

Teria como agrupar todas as caixas de dialogo de todos os marcadores?

Ou então teria como agrupar todos os marcadores e mostrar todos os marcadores daquele ponto ao clicar?

30-10-2014 às 14:58 Responder

halyfe

bom dia, amigo eu precisava saber como eu faço, pra não dar refrash na tela, "aquela piscada" estou fazendo um rastreador gps, e preciso que quando mudar a coordenada ele atualize no mapa sem piscar.

03-11-2014 às 17:09 Responder

halyfe

bom post

04-11-2014 às 08:32 Responder

halyfe

e eu tenho mais uma duvida, como eu faço pra no iniciar do mapa ele pegue as coordenadas do json. ? obrigado.

04-11-2014 às 10:19 Responder

Felipe

Primeiramente parabéns pelo post, ajudou muito para quem quer dar os primeiros passos.

Minha duvida é, como eu poço fazer para criar uma pesquisa de acordo com os pontos criados.

06-11-2014 às 10:51 Responder

Rodrigo

Boa Noite Rodolfo, primeiramente parabéns pelo post. Aprendi muito porem estou com um pequeno problema, rsrs eu já defini os pontos esta tudo certo exibindo certo, porem quando eu abro no navegador google chrome o mapa é exibido porem sem os pontos que defini e quando abro no mozila ele abre normalmente com os pontos. Poderia me dar um dica onde esta o erro ?

Obrigado.

12-11-2014 às 00:43 Responder

Joel Pavan

Olá, boa noite! Como faço para não utilizar o MarkCluster? Quando comento as linhas de código que fazem referência a função, o mapa não exibe nenhum ponto...

13-11-2014 às 21:11 Responder

Guilherme Marques Xavier

Rodolfo, boa tarde!

Tentei implementar geolocalização (aquela do navegador mesmo, que desce quando o geolocation está habilitado) mas não tive sucesso...

Você poderia me dar uma luz? Procurei pelos comentários e não achei nada relativo.

Seria uma geolocalização simples mesmo, mas sem ser necessário imprimir um ponto específico no mapa. Exemplo: O mapa renderizaria na área que o geolocation pegar, porém, apenas isso. Sem um marcador. Os marcadores estão todos relacionados aos pontos no JSON mesmo.

Não consegui passar a geolocation para essa variável:

var latlng = new google.maps.LatLng(-23.625012, -46.693103);

Meu código está abaixo, retire tudo o que não for necessário para a compreensão, caso esteja longo demais.

Abraço! E obrigado desde já.

// JavaScript Document
var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
var latlng = new google.maps.LatLng(-23.625012, -46.693103);

var options = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};

map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();

function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}

infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}

function carregarPontos() {

$.getJSON('frameworks/maps/js/mapa.json', function(pontos) {

//var latlngbounds = new google.maps.LatLngBounds();

$.each(pontos, function(index, ponto) {

var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: 'Clique aqui para visualiar informações deste ponto.',
icon: 'images/ui/' + ponto.Categoria + '.png'
});

var myOptions = {
content: "

" + ponto.Endereco + "

" + "" + "
" + "

" + ponto.EstadodaLixeira + "

" + "

" + ponto.Estado + "

" + "
" + "
" + "

Informações

" + "" + "" + "" + "

" + "Horários da Coleta" + ponto.Horarios + "

" + "

" + "Para onde o lixo vai" + ponto.Destino + "

" + "

" + "Índice de reciclagem da área" + ponto.Indice + "

" + "
" + "
" + "

Compartilhar

" + "" + "" + "" + "

" + "Estado da Lixeira" + "" + "" + "

" + "

" + "Índice de reciclagem da área" + ponto.CompIndice + "" + "

" + "

" + "Check-in" + ponto.CompCheckin + "" + "

" + "
",
pixelOffset: new google.maps.Size(-125, 0)
};

infoBox[ponto.Id] = new InfoBox(myOptions);
infoBox[ponto.Id].marker = marker;

infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(ponto.Id, marker);
});

markers.push(marker);

//latlngbounds.extend(marker.position);

});

var markerCluster = new MarkerClusterer(map, markers);

//map.fitBounds(latlngbounds);

});

}

carregarPontos();

/* jQuery Infoboxes */

function tab1() {
$( ".tab1" ).toggle();
$( ".tab2" ).hide();
$( ".tab3" ).hide();
$( ".tabhorario" ).hide();
$( ".tabdestino" ).hide();
$( ".tabindice" ).hide();
$( ".tabcompestado" ).hide();
$( ".tabcompindice" ).hide();
$( ".tabcompcheck" ).hide();
$( ".btnTab1" ).toggleClass('btnTab1Active');
$( ".btnTab2" ).removeClass('btnTab2Active');
$( ".btnTab3" ).removeClass('btnTab3Active');
$( ".btnHorarios" ).removeClass('btnHorariosActive');
$( ".btnDestino" ).removeClass('btnDestinoActive');
$( ".btnIndice" ).removeClass('btnIndiceActive');
$( ".btnCompEstado" ).removeClass('btnCompEstadoActive');
$( ".btnCompIndice" ).removeClass('btnCompIndiceActive');
$( ".btnCheckin" ).removeClass('btnCheckinActive');
}

function tab2() {
$( ".tab2" ).toggle();
$( ".tab1" ).hide();
$( ".tab3" ).hide();
$( ".tabhorario" ).hide();
$( ".tabdestino" ).hide();
$( ".tabindice" ).hide();
$( ".tabcompestado" ).hide();
$( ".tabcompindice" ).hide();
$( ".tabcompcheck" ).hide();
$( ".btnTab2" ).toggleClass('btnTab2Active');
$( ".btnTab1" ).removeClass('btnTab1Active');
$( ".btnTab3" ).removeClass('btnTab3Active');
$( ".btnHorarios" ).removeClass('btnHorariosActive');
$( ".btnDestino" ).removeClass('btnDestinoActive');
$( ".btnIndice" ).removeClass('btnIndiceActive');
$( ".btnCompEstado" ).removeClass('btnCompEstadoActive');
$( ".btnCompIndice" ).removeClass('btnCompIndiceActive');
$( ".btnCheckin" ).removeClass('btnCheckinActive');
}

function tabindice () {
$( ".tabindice" ).toggle();
$( ".tabdestino" ).hide();
$( ".tabhorario" ).hide();
$( ".btnIndice" ).toggleClass('btnIndiceActive');
$( ".btnHorarios" ).removeClass('btnHorariosActive');
$( ".btnDestino" ).removeClass('btnDestinoActive');
}

function tabdestino () {
$( ".tabdestino" ).toggle();
$( ".tabindice" ).hide();
$( ".tabhorario" ).hide();
$( ".btnIndice" ).removeClass('btnIndiceActive');
$( ".btnHorarios" ).removeClass('btnHorariosActive');
$( ".btnDestino" ).toggleClass('btnDestinoActive');
}

function tabhorario () {
$( ".tabhorario" ).toggle();
$( ".tabdestino" ).hide();
$( ".tabindice" ).hide();
$( ".btnIndice" ).removeClass('btnIndiceActive');
$( ".btnHorarios" ).toggleClass('btnHorariosActive');
$( ".btnDestino" ).removeClass('btnDestinoActive');
}

function tab3() {
$( ".tab3" ).toggle();
$( ".tab2" ).hide();
$( ".tab1" ).hide();
$( ".tabhorario" ).hide();
$( ".tabdestino" ).hide();
$( ".tabindice" ).hide();
$( ".tabcompestado" ).hide();
$( ".tabcompindice" ).hide();
$( ".tabcompcheck" ).hide();
$( ".btnTab3" ).toggleClass('btnTab3Active');
$( ".btnTab1" ).removeClass('btnTab1Active');
$( ".btnTab2" ).removeClass('btnTab2Active');
$( ".btnHorarios" ).removeClass('btnHorariosActive');
$( ".btnDestino" ).removeClass('btnDestinoActive');
$( ".btnIndice" ).removeClass('btnIndiceActive');
$( ".btnCompEstado" ).removeClass('btnCompEstadoActive');
$( ".btnCompIndice" ).removeClass('btnCompIndiceActive');
$( ".btnCheckin" ).removeClass('btnCheckinActive');
}

function tabcompestado () {
$( ".tabcompestado" ).toggle();
$( ".tabcompindice" ).hide();
$( ".tabcompcheck" ).hide();
$( ".btnCompEstado" ).toggleClass('btnCompEstadoActive');
$( ".btnCompIndice" ).removeClass('btnCompIndiceActive');
$( ".btnCheckin" ).removeClass('btnCheckinActive');
}

function tabcompindice () {
$( ".tabcompindice" ).toggle();
$( ".tabcompestado" ).hide();
$( ".tabcompcheck" ).hide();
$( ".btnCompEstado" ).removeClass('btnCompEstadoActive');
$( ".btnCompIndice" ).toggleClass('btnCompIndiceActive');
$( ".btnCheckin" ).removeClass('btnCheckinActive');
}

function tabcompcheck () {
$( ".tabcompcheck" ).toggle();
$( ".tabcompestado" ).hide();
$( ".tabcompindice" ).hide();
$( ".btnCompEstado" ).removeClass('btnCompEstadoActive');
$( ".btnCompIndice" ).removeClass('btnCompIndiceActive');
$( ".btnCheckin" ).toggleClass('btnCheckinActive');
}

function btncompartilhe () {

$( "#compartilhe-overlay1" ).fadeIn('fast');
$( "#contentCompartilhe1" ).fadeIn('fast');
$( ".infoBox" ).hide();

}

function btncompartilhe2 () {

$( "#compartilhe-overlay1" ).fadeIn('fast');
$( "#contentCompartilhe1" ).fadeIn('fast');
$( ".infoBox" ).hide();

}

function btncompartilhe3 () {

$( "#compartilhe-overlay1" ).fadeIn('fast');
$( "#contentCompartilhe1" ).fadeIn('fast');
$( ".infoBox" ).hide();

}

15-11-2014 às 16:22 Responder

eduardo

rodolfo tudo bem?
sobre os mapas, será que existe um modo de fazer um arquivo .js com alguns mapas, depois criar um arquivo .html e fazer ele puchar determinado mapa dentro desse arquivo .js

15-11-2014 às 23:24 Responder

Vitor Neves

Viva
Desde já parabens pelos vários posts sobre a api do google maps.
Estou com um projecto em mãos onde tenho um mapa com um código mt parecido com o seu.
Além do mapa tenho os dados listados e em q ao clicar no link "ver no mapa" abre a "infobox" e centra o ponto no mapa.
O mapa exibe o ponto de várias empresas, sendo q algumas empresas poderão ter filiais na mesma cidade.
Agora preciso de fazer uma alteração, que é o link de "ver no mapa" em ver de abrir a infobox da loja, oculte os marcadores (sem fazer refresh da página) de todas as outras empresas, ficando só a exibir a empresa e sucursais da empresa clicada.
Eu no json já pego o id da empresa que serve de associação e no link coloquei um data-empresa="id_da_empresa"
De uma forma resumida, é fazer um filtro.

Se puder dar uma dica, agradeço.

Att,
VN

17-11-2014 às 19:51 Responder

Roberto

Bom noite. Esse código ainda funciona? Baixei ele e não exibe os pontos no mapa.

03-12-2014 às 20:53 Responder

Paulo Rodrigues

O código de exemplo simplesmente não funcionam!

08-12-2014 às 12:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo Rodrigues

Você está rodando o exemplo no seu computador, com o Chrome? Se sim, leia isso: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-896

Caso não seja local, mande o link para que eu dê uma olhada.

10-12-2014 às 10:41 Responder

Paulo Rodrigues

Em resposta a Paulo Rodrigues

Rodolfo, é exatamente isto, realmente o arquivo deve estar hospedado, bom, desenvolvi baseado em outro exemplo, mas agora que você falou, agora meu JSON está hospedado e funcionou, mas é bom saber disso. ^^
Obrigado!

10-12-2014 às 11:32 Responder

Leonardo Souza

Tudo bem Rodolfo?
Primeiramente parabéns pelo excelente post! Gostaria de saber se, usando seu exemplo, poderíamos fazer com que as localidades colocadas no .json pudessem aparecer e desaparecer conforme o clique em algum checkbox.

Por exemplo, um checkbox "localização 1" ao ser checado, exibiria determinadas localizações e ao desmarcar, as mesmas sumiriam.

Um exemplo para ilustrar:
http://www.lopes.com.br/imovel/itaim/sp/sao-paulo/planalto-paulista/apartamento/padrao/2-IT14820
Observe o mapa do imóvel.

Muito obrigado
Grande abraço

08-12-2014 às 17:12 Responder

Thiago

Ótimo post, e muito bem explicado, pensei que era complicado, mas é fácil. :D

09-12-2014 às 10:09 Responder

Winston Kury

Olá Rodolfo, se post foi de grande ajuda, porém, tenho uma dúvida. Qual a distância mínima entre dois marcadores para que no zoom máximo, os dois possam ser exibidos separadamente? Tenho marcadores com 200 metros de distância e mesmo com o zoom máximo, não consigo exibí-los individualmente.

12-12-2014 às 15:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Winston Kury

No lugar de:

var markerCluster = new MarkerClusterer(map, markers);

Coloque:

var markerCluster = new MarkerClusterer(map, markers, {
   maxZoom: 17
});

Com isso o MarkerClusterer irá agrupar somente até o zoom 17. Isso deve solucionar o seu problema.

07-01-2015 às 11:59 Responder

Eduardo

Bom dia Rodolfo,

preciso fazer isso no site da empresa. porem buscando os dados de um banco de dados (clientes cadastrados) e exibir em um mapa desta forma. A medida que for add novos clientes no banco, o mapa é atualizado automaticamente...

vc consegue fazer isso pra gente?

15-12-2014 às 08:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eduardo

Bom dia Eduardo!

Hm, creio que sim. Mande um e-mail para contato@princiweb.com.br para conversarmos melhor.

Abs!

07-01-2015 às 11:57 Responder

Augusto

Parabéns pelo post, estou realizando um trabalho acadêmico gostaria de uma ajudinha sua. Como eu faria para traçar uma rota de ponto a ponto.
Imagine a seguinte situação, sai de um lugar passei por vários lugares e fui marcando os pontos aonde passei como eu li na documentação api v3 somente 8 pontos posso colocar na versão não paga quanto a isso blz ... passei em 8 lugares gostaria de traçar uma rota por onde eu passei levando em consideração o destino final e os pontos aonde passei ..

23-12-2014 às 10:11 Responder

Larissa

O post me ajudou muuito, parabéens.

Porém, to com uma duvida. Coloquei meus pontos no mapa, e adicionei um campo cep. Como faço para fazer o mapa mostrar o ponto mais proximo de acordo com o cep descrito no espaço ?

07-01-2015 às 11:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Larissa

Bom, primeiramente você teria que transformar esse CEP em latitude e longitude. Este post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html pode te ajudar com isso, usando o "geocoder.geocode" (você pode passar um CEP para ele ao invés de um endereço).

Em seguida, pegue a latitude e longitude, e utilize a função abaixo:

function calcularPontoMaisProximo(markersQueEstaoNoMapa, latitudeDoCEPDoUsuario, longitudeDoCEPDoUsuario) {
  function rad(x) {
    return x * Math.PI / 180;
  }
 
  var lat = latitudeDoCEPDoUsuario;
  var lng = longitudeDoCEPDoUsuario;
  var R = 6371; // radius of earth in km
  var distances = [];
  var closest = -1;
 
  for (i = 0; i < markersQueEstaoNoMapa.length; i++) {
 
      var mlat = markersQueEstaoNoMapa[i].position.lat();
      var mlng = markersQueEstaoNoMapa[i].position.lng();
      var dLat = rad(mlat - lat);
      var dLong = rad(mlng - lng);
      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      var d = R * c;
      distances[i] = d;
 
      if (closest == -1 || d < distances[closest]) {
          closest = i;
      }
       
  }
 
  if (closest != -1)
  {
    // aqui, o markersQueEstaoNoMapa[closest] será o marker mais próximo da lat e long do cep do usuário
  }
 
}

07-01-2015 às 12:08 Responder

João

Em resposta a Larissa

Primeiramente parabéns pelo excelente tutorial. Rodolfo, qual seria a forma de eu criar um marcador no momento que eu der um click em um ponto específico do mapa?

Desde já obrigado.

15-01-2015 às 17:04 Responder

Maike

Aqui funcionou tudo ok, exceto, que ao retornar o zoom, os marcadores não se agrupam novamente, sabe o que pode ser?

08-01-2015 às 16:03 Responder

Jhonata Silva

Bom dia amigo, primeiramente gostaria de agradecer, seu tutorial ficou muito bom e esta ajudando bastante. Eu gostaria de saber se tem como eu utilizar outro nome sem ser o pontos.json Eu gostaria de gerar um arquivo json para cada consulta que eu trazer do banco de dados. Tem como fazer isso?

11-01-2015 às 10:10 Responder

Pedro

Estou com uma duvida. Como eu faço para adaptar nesse seu trabalho dados vindo de um banco de dados mysql? como faço para gerar um arquivo json com o nome pontos.json ? Muito Obrigado.

12-01-2015 às 22:07 Responder

Juvenal

Muito Bom... Parabéns.

13-01-2015 às 15:35 Responder

Willians

Em resposta a Juvenal

Criei um arquivo local mapa.html quando coloco a key ele diz que o java v3 esta desativado mesmo ele estando ativo.
coloquei fiz exatamente como exemplo sem sucesso...

16-01-2015 às 13:09 Responder

Sandro

Boa tarde, tenho um site de imobiliaria pra entregar e estou sem tempo. Preciso mostrar em uma div no topo do site um mapa como este seu com os marcadores sendo que cada marcador é um imovel. Na tabela de imoveis tenho os campos "poi_latitude, poi_longitude, poi_icone, poi_titulo, poi_resumo". preciso deste seu exemplo mas ao inves de ler o arquivo json, quero ler diretamente um php que faz a consulta no banco pra pegar os pontos. Como estou sem tempo e preciso entregar isto o quanto antes, me proponho a pagar pra voce pelo download do script completinho funcionando.. no caso acho que seria somente editar o seu atual pra ao inves de ler o .json ler o .php. ja tenho o banco com a tabela "tb_poi" e os campo que mencionei acima. nao encontrei nada tão completo como este seu nas buscas que fiz. Você está com tempo para alterar os seu script e me enviar ele... se sim, mande o valor e uma conta caixa ou itau pra fazer a transferencia ou se tiver paypal, pagseguro melhor por que ai faco no cartao. Desde já agradeço, Obrigado.

17-01-2015 às 11:51 Responder

Lucas

Como pegar todos os marcadores de um mapa obtido pelo Fusion tables e transforma-los em um vetor?

Eu tenho um mapa no Fusion tables e preciso percorrer todos os pontos para buscar informações. Eu gostaria de pegar todos os marcadores obtidos por meio desse e transforma-los em um vetor.

30-01-2015 às 09:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas,

Infelizmente nunca mexi muito com Fusion Tables, então não sei te responder =/

Abs!

09-02-2015 às 15:45 Responder

Alberto

Código fantástico, altamente personalizável, utilizei em "views" do "CodeIgniter" e o código se comportou muito bem. Parábens Rodolfo, ajudou muito.

31-01-2015 às 10:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alberto

\o/

09-02-2015 às 15:45 Responder

Fernando Patez

Fala Rodolfo Pereira, blz?
Em um proximo tutorial você poderia ensinar a fazer uma busca personalizada referente aos pontos marcados, com banco de dados, por exemplo: eu busco restaurantes filtrado por uma cidade, e ele me retorna todos os pontos de restaurantes marcados no mapa personalizado.

07-02-2015 às 23:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando Patez

Fala Fernando, tranquilo e aí?

Valeu pela sugestão :D

Abs!

09-02-2015 às 15:43 Responder

Alison Silva

Em resposta a Rodolfo Pereira

Rodolfo,
Parabéns pelo post.
Tenho um problema no mapa.
O ponto é inserido com sucesso no mapa, mas ele não fixa no mapa, ou seja, se eu clicar no ícone do marcador eu posso arrastar o marcado e colocar ele onde eu desejar.
Como eu faço pra fixar o ícone no locar pra que ninguém tire ele do local? Tem algum parâmetro pra fixe ele no local? Onde eu vejo isso?
Agradeço pelo post e a ajuda que puder me dar.
Até breve.
:D

20-02-2015 às 22:06 Responder

Alison Silva

Em resposta a Alison Silva

Olá.
Resolvi o problema que comentei sobre a fixação do ponto/marcador no mapa.
Faltava acrescentar na função a opção "draggable: false" do "marker".
Segue abaixo a função que usei:

// --- Início ---
function getEndereco(latitude, longitude) {

var latlng = new google.maps.LatLng(latitude, longitude);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setCenter(latlng);
map.setZoom(12);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false
});

infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
document.getElementById("End_01").value = results[1].formatted_address;
drag(marker);
} else {
alert("Nenhum resultado encontrado");
}
} else {
alert("Falha no Geocodigo devido a " + status);
}
});
}

function setDirections(fromAddress, toAddress, region) {
codeAddress(fromAddress, toAddress, region);
}
// --- Fim ---

Obrigado pelo espaço, espero que a solução ajude mais pessoas.
Até a próxima.

24-02-2015 às 22:04 Responder

Antoniel de Souza Normandia

Em resposta a Rodolfo Pereira

Rodolfo.

Eu preciso de muita ajuda como fazer um websig, estou muita dificuldade em javascript. Você poderia me ajuda por favor.

22-02-2015 às 18:37 Responder

ricardo cassolatto

muito obrigado

24-02-2015 às 00:01 Responder

Frederico Moreira

Boa tarde Rodolfo.
Não estou conseguindo fazer os pontos aparecerem no mapa.
Estou usando um json dinâmico, poderia me ajudar a achar onde está o problema?

Link do mapa
http://deriks.net/mapa-da-dengue/
Arquivo json
http://deriks.net/mapa-da-dengue/js/pontos.php
JS mapa
http://deriks.net/mapa-da-dengue/js/mapa.js
Desde já obrigado.

26-02-2015 às 15:45 Responder

Domenike

Rodolfo, parabéns pelo post!!!!!!
Por favor, uma pergunta.
Se um usuário acessar meu site e eu pegar a localização dele para comparar no meu banco de dados, o que seria melhor a long/lat ou endereço completo?
E como posso usar o endereço do cliente para gerar um perímetro de estabelecimento ou comércios próximos aquele endereço. Como faço esse perímetro?
Muito obrigado!

27-02-2015 às 13:46 Responder

Eder

Tentei aqui e não funciona, os marcadores não aparecem. Parece que o código está incompleto... estranho

02-03-2015 às 10:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eder

Está usando o Chrome?

06-04-2015 às 17:00 Responder

Andre Marsola

Rodolfo.
Preciso criar um mapa com alguns pontos personalizados, em Azul, que serão carregados através de uma consulta a um banco de dados em PHP, e um ponto Central, que será vermelho, que será passado como parametro ( por exemplo um endereço ou um CEP )
Dai o PHP vai buscar no banco de dados os pontos Azuis, mais proximos deste local que ficará em vermelho. ( esta analise do ponto mais proximo no Banco de dados eu já consigo fazer )
Quando clicar em algum dos pontos em Azul, o mapa mostraria a rota até o ponto vermelho, e no InfoBox mostraria a a distancia até o ponto vermelho.
E se possivel, colocar um icone diferente para os pontos azuis, em relacao ao vermelho.
É possivel fazer isso ???
Um grande abraço.

10-03-2015 às 18:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Andre Marsola

Fala Andre!

É possível sim. Para mostrar a rota, dê uma lida neste post, que ele irá te ajudar nisso: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

Para exibir a distância entre os dois pontos do Infobox, será necessário calcular esta distância. Veja a minha resposta deste comentário: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-759

Por último, para diferenciar os ícones, veja aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-848

Espero que ajude.

Abs!

06-04-2015 às 16:09 Responder

Avner Espelino

Olá, eu implementei o mapa duas vezes no layout "detalhes", só quando eu vou para outra página "contato" que possui também o mapa, não aparece nada. Eu percebi que devido a ordem do objeto no arquivo "mapa.js" funciona apenas os dois primeiros ou seja:
map = new google.maps.Map(document.getElementById("mapa"), options);
mapInteresse = new google.maps.Map(document.getElementById("mapaInteresse"), options);
mapContato = new google.maps.Map(document.getElementById("mapaContato"), options);

Se possível também, estou utilizando para fazer um mapa com marcação de "pontos de interesse" com "check" pra mostrar no mapa ou não. Aí cada latitude e longitude dos pontos são um determinado "icon" gostaria de saber como faço pra capturar o "id" do "pontos.json" e determinar qual ícone será para aquela localização... Caso tenha outra sugestão de mapa de pontos de interesse eu agradeço. Muito obrigado!

12-03-2015 às 10:19 Responder

Avner Espelino

Em resposta a Avner Espelino

Bacana! Eu consegui já resolvi com vendo uns tópicos acima... Muito obrigado!

13-03-2015 às 13:08 Responder

PAULO

muito bom, agora estou aprendendo sobre GIS.

12-03-2015 às 12:50 Responder

Ruan Ferreira

Olá, Belo post.
Estou com um problema em colocar esse código no ASP.NET, os marcadores não aparecem no mapa.

16-03-2015 às 13:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ruan Ferreira

Fala Ruan!

Tem o link para eu dar uma olhada?

Abs!

06-04-2015 às 16:01 Responder

Jean Alfaia

Oi Rodolfo, tudo bom colega? Então, segui o tutorial direitinho como voce ensinou, porem ao tentar visualizar o mapa no crhome nao consegui. No IE roda blz, porém em outro navegador nao aparece as localizações somente o mapa.

Se poderes dá uma conferida ai com o crhome www.wifimanaus.com.br/mapa já olhei os arquivos e parecem estar tudo certo.

Grato!

16-03-2015 às 23:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jean Alfaia

Fala Jean, tudo certo e contigo?

Então, dei uma olhada aqui, e tem algo de estranho com o seu arquivo .json (http://www.wifimanaus.com.br/mapa/js/pontos.json), que somente o IE consegue ler, hehe. Mas infelizmente não consegui identificar o motivo disso acontecer =/

Abs!

06-04-2015 às 15:25 Responder

Vitor Hugo

Cara, como eu faço para que o usuário pegue o marcador e coloque no mapa e coloque o valor da longitude e latitude (ou de preferência o endereço) em um textbox?...

17-03-2015 às 10:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vitor Hugo

Fala Vitor!

Então, para colocar a latitude, longitude ou o endereço, você pode dar uma olhada aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

Agora, sobre pegar o marcador e colocar no mapa... não entendi direito, mas no link acima tem uma demo que faz algo nesse tipo.

Abs!

06-04-2015 às 15:02 Responder

Fernando

Ótimo tutorial!!

Parabéns!

Gostaria de saber se é possível alterar os ícones (azul e amarelo) de agrupamento de pontos? Teria como utilizar um de minha biblioteca?

Obrigado

24-03-2015 às 21:24 Responder

Marcelo Morales

Rodolfo, muito bom seu artigo, consegui montar perfeitamente meu mapa com os pontos que queria, parabéns!

Mas o que eu gostaria mesmo seria unir a busca personalizada do outro post com esse mapa que eu fiz com os pontos, é possível? Já tentei unir os dois mas não consegui, sempre dá algum erro de script. Seria algo nesse modelo: http://bandeirantes-outdoor.com.br/mapa/
Abraço

25-03-2015 às 20:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo Morales

Fala Marcelo!

Tem como eu dar uma olhada nesse código que você tentou fazer?

Abs!

06-04-2015 às 14:25 Responder

Marcelo Morales

Em resposta a Rodolfo Pereira

Oi Rodolfo,

Consegui integrar os dois sistemas, o resultado está nesse link, dá uma olhada:
http://www.okavango.com.br/m/google2/abrigos.html
:D

06-04-2015 às 14:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo Morales

Ficou show de bola, parabéns!

06-04-2015 às 15:25 Responder

Luiz França

Caro amigo gostei muito da sua aplicação, parabéns!

Será que você pode me ajudar, queria fazer um 'refresh' atualizando a função a cada 30 segundos sem repetir os pontos mais atualizando,
setTimeout("carregarPontos();", 3000);

Obrigado, pela publicação.

26-03-2015 às 16:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz França

Fala Luiz,

Acho que o comentário do João Paulo (http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-286) responde a sua dúvida. O que me diz?

Abs!

06-04-2015 às 14:22 Responder

Luiz França

Em resposta a Rodolfo Pereira

Atende sim, funcionou muito bem, obrigado e parabéns novamente pelo POST.

http://autogest.com.br/mapa_atualizado/

06-04-2015 às 15:15 Responder

Helton

Olá fera muito bom este POST. estou me adaptando rsss, uma perguntinha quero pegar os dodos para povoar meu mapa via php em um banco de dados mysql como procedo?

26-03-2015 às 17:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Helton

Fala fera! huahua

Você terá que fazer um script que pegue os dados do seu BD MySQL e escreva isso em um arquivo formato .json para ser lido pelo JS. Basicamente é isso.

Fica igual ao exemplo do meu post, porém o arquivo .json é gerado "on the fly" de acordo com os dados do BD.

Abs!

06-04-2015 às 14:19 Responder

Danilo

Parabéns pelo post!

Tenho uma dúvida...
Caso fosse para inserir vários marcadores de diferentes tipos e cada marcador um ícone diferente
Por exemplo

Um marcador de pontos de acidente(um ícone vermelho), inundações(azul), chuva(cinza), polícia(amarelo), etc....
Como poderia ser feito?

26-03-2015 às 20:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Danilo

Fala Danilo! Tudo certo?

Dá uma olhada aqui e vê se te ajuda: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-873

Abs!

06-04-2015 às 14:17 Responder

PEDRO LEITE

Achei muito bom! Auto explicativo. Me ajude por favor tenho várias fotos no Panoramio do google Earth e não mais acesso, pois O Google fez uma alteração em sua API e por isso os mapas configurados antes de 2013 não estão funcionando.

04-04-2015 às 13:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a PEDRO LEITE

Você tem algum código para eu dar uma olhada?

06-04-2015 às 14:13 Responder

Fernando N Vicente

Olá, pelo post!

Como faço para zerar os marcadores ao recarregar o mapa? ex: Fiz um combobox que lista Estado e duas Cidades. Ao selecionar o combobox pela primeira vez, seleciono a Cidade "X1", dessa forma o marcador carrega uma única vez, até ai ok! Já ao selecionar o combobox pela segunda vez, escolho o Estado "X" que pertence a Cidade "X1", dai o mapa carrega e o marcado da Cidade "X1" fica agrupado, mostrando que tem dois pontos e o certo é um só.

Então antes de carregar o mapa, preciso zerar os marcadores, pode me ajudar nisso?

At,

05-04-2015 às 08:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando N Vicente

Você está usando o MarkerClusterer, certo? Nesse caso, eu costumo limpar os marcadores do mapa e depois do MarkerClusterer. Veja:

for (var i = 0; i < seuArrayComOsMarcadores.length; i++) {
  seuArrayComOsMarcadores[i].marker.setMap(null);
};

markerCluster.clearMarkers();

Acredito que isso deve ser o suficiente. Abs!

06-04-2015 às 14:06 Responder

Paulo Ferreira

Muito bom o tutorial. Excelente explicação.
Aproveitando, como posso fazer para chamar uma localização no mapa, onde o usuário cadastrou um endereço utilizando um formulário de endereço e fazer com que ele busque no banco de dados essa informação ou essa localização. exemplo. um portal de imoveis.

11-04-2015 às 14:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo Ferreira

Fala Paulo,

Eu faria assim: exibiria um mapa com um ponto nesse endereço cadastrado, e quando o usuário fizesse uma busca, pegaria esse endereço buscado, mandaria para o geocoder, o qual me retornaria a latitude e longitude, e com essas duas informações, eu centralizaria o mapa nesse endereço e daria um zoom nele.

Abs!

29-04-2015 às 10:13 Responder

Rodrigo

Cara parabéns pelo Post, ai vc já criou algum projeto deste para veículos em movimento tenho rastreador e tenho a latitude e longitude salvos em SQL atualizados, é dificil criar um deste tipo?

14-04-2015 às 17:17 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Fala Rodrigo!

Infelizmente nunca criei um projeto deste tipo. Mas se você tem esses dados salvos em tempo real, acho que dá para fazer alguma coisa nesse sentido.

Abs!

29-04-2015 às 10:11 Responder

Thalles Canela

Olá a todos!
Gostaria de dividir com vocês a resolução de um problema que estava me tirando o sono... Bom...
O meu arquivo Json estava me retornando valores NULL onde tinha informações. Depois de muita pesquisa na internet, descobri que era problema com acentos....

O link é esse:
http://www.l9web.com.br/blog/?p=142

18-04-2015 às 23:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thalles Canela

Opa, valeu pela dica :D

29-04-2015 às 09:54 Responder

nuno

ois,
fiz tudo direitinho (penso) ;) mas só me está a aparecer o mapa e não os marcadores... o que será?
http://duitdesign.dyndns.org/livein/index.php?page=7

23-04-2015 às 07:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a nuno

Opa,

Pelo que vi, está dando erro no arquivo "mapa.js":

TypeError: map is undefined

map.fitBounds(latlngbounds);

Creio que a função "carregarPontos" está sendo chamada antes da função "initialize", a qual é responsáve por definir o "map".

Abs!

 

29-04-2015 às 09:47 Responder

João Skywalker

EU TE AMO !

23-04-2015 às 16:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a João Skywalker

Huhuahuahauhua

29-04-2015 às 09:46 Responder

João Skywalker

Em resposta a Rodolfo Pereira

Boa tarde parça;
É que eu fiz tudo certinho e quando eu abro minha página, fala que não foi possível abrir o elemento google maps la.
Tem como me ajudar ? :(

08-05-2015 às 13:16 Responder

carlos

Otimo post.
Amigo tem algum jeito de poder carregar o mapa usando uma planilha do excell com as coordenadas?

05-05-2015 às 08:30 Responder

Thiago A. Wachholz

Fala Rodolfo. Belo post.

Uma dúvida, existem o pontos pagos por empresas no Maps do google, tem como ocultar estes pontos?

08-05-2015 às 10:30 Responder

Thiago A. Wachholz

Consegui, utilizei da seguinte maneira

var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];

var options = {
zoom: 5,
center: latlng,
styles: myStyles,
mapTypeId: google.maps.MapTypeId.HYBRID
};

08-05-2015 às 10:51 Responder

Thiago A. Wachholz

Bom Dia,

Em alguns carregamentos dá o seguinte erro ao chamar a função map.fitBounds(latlngbounds);

Não é possível obter a propriedade 'fitBounds' de referência indefinida ou nula

Sabe do que pode ser ?

11-05-2015 às 10:51 Responder

Thiago A. Wachholz

Boa Tarde,

Como posso fazer para deixar um determinado ponto aberto ao carregar o mapa ?

11-05-2015 às 16:33 Responder

Willian

Boa noite Rodolfo, obrigado e parabéns pelo tutorial

Assim, eu baixei e tá funcionando tudo perfeito, mas tem como eu de alguma forma passar a Latitude e Longitude por formulário ou URL e ele me mostrar o ponto no mapa?

Para ficar tipo um mapa mais dinâmico?

To tentando montar, mas barro em passar os dados para dentro do JSON.

Fiz um PHP, mas o código ná é lido

http://spsystems-ti.com.br/APIGoogle/v2/js/pontos.php

Como estou tentando fazer
http://spsystems-ti.com.br/APIGoogle/v2/

14-05-2015 às 17:49 Responder

Dione Alves

Primeiramente meus parabéns caro Rodolfo, sensacional!!!!!
consegui montar e incrementar outras coisas. Estou criando um json a partir o json encode, de uma query de busca no banco de dados e retorno ele no meu arquivo php. porem o mapas.js nao "puxa o json gerado poderia me ajudar?" link: tenislynd.com.br/home/mpa3/index.php

14-05-2015 às 22:08 Responder

Dione

Em resposta a Dione Alves

Gente eu consegui ficou show, Rodolfo e Marcos Reis estão de parabéns!! paia que o cliente me passou coordenadas erradas, agora ele se vira com para acertar os 400 pontos errados kkkkkk

15-05-2015 às 17:15 Responder

João Pedro

Olá Rodolfo, primeiramente muito obrigado pelo tutorial, são poucas pessoas que encontramos como você que está disposto a ajudar aos outros com topicos como este!!!

eu gostaria de esclarecer uma dúvida com você sobre o conteúdo, eu ja vi a minha dúvida respondida em uma das perguntas mas como sou um tanto leigo em Html não consegui reproduzir o exemplo.

Gostaria de criar um site com duas colunas onde na da esquerda tem vários links (lista de links) e na da direita tem o mapa. clicando em cada link mudam os pontos do mapa, é bem parecido com este exemplo: http://jsfiddle.net/kjy112/FEexA/ que você repondeu ao Mario um tempo atrás!

como não entendo muito de HTML peço me mostrar aonde eu coloco cada código, pois quando vc da quote nos códigos eu fico meio perdido em onde anexá-los!

Obrigado desde já!

15-05-2015 às 16:10 Responder

Wellington

Dúvida: Como posso identificar um ou vários Marcadores em uma Rota??
Exemplo: Tenho a Rota com os pontos A e B, entre eles eu tenho alguns marcadores ex: Livravia, Pizzaria, Cinema.....Como faço para saber que tenho estes marcadores em minha Rota?

18-05-2015 às 15:19 Responder

Cleisdon dos Santos

Rodolfo, parabéns pela aplicação que você deenvolvel e pelo compartilhamento.

Cleidson dos Santos

27-05-2015 às 18:08 Responder

francisco

Olá, parabéns pelo tutorial.
Está funcionando perfeitamente em meu site, porém agora gostaria de retirar o agrupamento dos pontos (MarkerClusterer) sem prejudicar o resto do codigo, tentei removendo a linkagem ao markerclusterer mas o mapa parou de funcionar. Qual seria a forma indicada de retira-lo? Não achei nada que me ajudasse nos comentarios anteriores.

Valeu pelo tutorial!

28-05-2015 às 00:23 Responder

Danilo Peçanha

Parabéns pelo post! Ficou perfeito!

Posso tirar uma dúvida?
O meu código esta exibindo um mapa já com a minha localização atual.
Tem a possibilidade de que eu insira a função em botões para adicionar um marcador personalizado onde eu clicar no mapa?

Por exemplo:
-Na cidade de São Paulo eu insiro um marcador azul no mapa quando eu clicar sobre ela;
-Já no Rio de Janeiro insiro um marcador amarelo quando eu clicar sobre a cidade ou determinado local que eu escolha;
-Em Belo Horizonte escolho um marcador verde;

De tal forma que eu escolha no botão qual marcador personalizado eu queira e depois fazer a marcação em qualquer lugar no mapa.

Como posso fazer isso?

Desde já agradeço pela atenção!
Obrigado!

30-05-2015 às 22:33 Responder

André Damásio

esse seu tutorial me ajudou muito. Obrigado.
Mas agora preciso saber como faço para fazer filtros baseado em categorias. Cada marcador tem uma categoria e quero fazer a parecer só os marcadores de uma determinada categoria.
Como faço?

01-06-2015 às 16:48 Responder

Samara

Em resposta a André Damásio

Olá André, também estou tentando implementar a opção de filtro.
Você obteve algum resultado?
Obrigada!

02-12-2015 às 18:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samara

Oi Samara!

Você pode passar pro André o código que funcionou para você :)

18-12-2015 às 13:35 Responder

Ketlin

Eu preciso colocar um mapa que lista todas as coordenadas cadastradas com codeigniter. Coloquei esse código do jeito que está aqui e não funciona

02-06-2015 às 11:34 Responder

Alexandra

Posso estar bem desinformada, mas... só é possivel usar a API do google maps v3 se eu colocar o site no ar?

10-06-2015 às 09:30 Responder

roberto hernanez perez

toda consulta p pegar lat e long da sempre quatro casas decimais, com isso nao consigo dar o zoom p ver imagem do local , e estou fazendo tudo como esta no seu tutorial,
lat: -15.651343 -47.7809512 a parte decimal e menor do que os seus pontos

11-06-2015 às 21:53 Responder

Pedro de Barros

Tem como usar um zoom mínimo ?

Eu usei um único ponto, porém fica próximo demais:
http://libertosdomalmc.com/?page_id=251

Obrigado.

13-06-2015 às 19:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro de Barros

Fala Pedro,

Isso acontece por causa da parte "Zoom automático para caber todos os pontos na tela" do post. Você pode seguir o post inteiro, só essa parte você ignora.

Aí depois, lá no "zoom" dentro de "options" (função initialize), você coloca um valor para ter de zoom mínimo.

Abs!

26-06-2015 às 11:02 Responder

Pedro de Barros

Em resposta a Rodolfo Pereira

Coloquei vários valores, mias não deu diferença alguma.

var options = {
   zoom: 200,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

01-07-2015 às 20:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro de Barros

Mas você tirou do seu código o "map.fitBounds(latlngbounds);"?

02-07-2015 às 19:07 Responder

Pedro de Barros

Em resposta a Rodolfo Pereira

Não.

http://libertosdomalmc.com/?page_id=251

06-07-2015 às 20:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro de Barros

Tire e veja se dá certo.

Abs!

24-08-2015 às 18:32 Responder

Willian

Em resposta a Rodolfo Pereira

Tenho o mesmo problema e não consegui uma solução.

28-02-2016 às 21:08 Responder

Junior

Cara já fiz de tudo mas o InfBox não está aparecendo quando eu clico no marcados.

será que está faltando alguma cois?

29-06-2015 às 01:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Tem algum link para eu ver o seu mapa?

02-07-2015 às 19:04 Responder

Leandro Amorim

Excelente Post!
Parabéns. Ajudou muito!

19-07-2015 às 17:59 Responder

Lucas

Cara eu preciso fazer um formulário em php para cadastrar clientes, e quando o cliente cadastrar o endereço dele deve ir automaticamente para a pontos.json . Você saberia me dizer como eu faria isso?

21-07-2015 às 10:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas, beleza?

Cara, a ideia é que você salve o endereço do cliente no banco de dados, e depois tenha um arquivo "pontos.php" que pega todos os clientes do banco de dados e gere um json válido... agora, como fazer isso não tem como eu te passar =/

Caso você já tenha algum código implementado, posso te ajudar com dúvidas pontuais.

Abs!

24-08-2015 às 18:24 Responder

Marcelon

Rodolfo, parabéns pelo post! Muito bom mesmo!
Estou programando em php uma página dinâmica que buscará localizações no banco de dados e, com eles, pretendo plotar um mapa.
Tenho duas dúvidas e ficaria muito grato se você pudesse me ajudar:

1- Vi no seu post "Google Maps API v3: Busca de endereço e Autocomplete" que você consegue obter latitude e longitude de um endereço via javascript. Sabe como posso obtê-los via php, de forma a armazenar as coordenadas diretamente no banco de dados antes de gerar o mapa?

2- Minhas páginas serão geradas dinamicamente e gostaria de saber como inserir latitude e longitude dos pontos diretamente no html, sem usar o arquivo JSON.

Muito obrigado pela atenção!

21-07-2015 às 15:38 Responder

Marcelon

Rodolfo,

Ontem te passei uns questionamentos, e encontrei umas soluções, e compartilho-as abaixo.

No entanto, notei que, ao usar o Marker Clusterer Plus, ao clicar em um agrupamento, os infoboxes deixam de ser exibidos (o que é ruim em minha aplicação). Você tem alguma solução para voltar a exibir os infoboxes neste caso?

As soluções dos outros problemas que mencionei seguem abaixo:

Para encontrar a geolocalização direto do php, encontrei respostas em: http://stackoverflow.com/questions/3807963/how-to-get-longitude-and-latitude-of-any-address

Para não usar o Json, mencionei as coordenadas diretamente na tag <script> do html, ficou algo assim:

=====

var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(-19.212355602107472, -44.20234468749999),
    title: "Meu ponto personalizado! 1 :-D",
    icon: 'imagens/marca_mapa.png'
});

var myOptions = {
    content: "<p>UM</p>",
    pixelOffset: new google.maps.Size(-150, 0),
    infoBoxClearance: new google.maps.Size(1, 1)
};

infoBox[1] = new InfoBox(myOptions);
infoBox[1].marker = marker1;

infoBox[1].listener = google.maps.event.addListener(marker1, 'click', function(e) {
    abrirInfoBox(1, marker1);
});

markers.push(marker1);
latlngbounds.extend(marker1.position);


var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(-20.1382901, -48.7008396),
    title: "Meu ponto personalizado! 2 :-D",
    icon: 'imagens/marca_mapa.png'
});

var myOptions = {
    content: "<p>DOIS</p>",
    pixelOffset: new google.maps.Size(-150, 0),
    infoBoxClearance: new google.maps.Size(1, 1)
};

infoBox[2] = new InfoBox(myOptions);
infoBox[2].marker = marker2;

infoBox[2].listener = google.maps.event.addListener(marker2, 'click', function(e) {
    abrirInfoBox(2, marker2);
});

markers.push(marker2);
latlngbounds.extend(marker2.position);

=====

Um abraço e obrigado pelo post de execelente qualidade!

23-07-2015 às 16:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelon

Fala cara, beleza?

Tem como eu ver o seu mapa pra ver essa questão do Marker Clusterer?

Abs!

24-08-2015 às 18:08 Responder

Marcos

Excelente, me ajudou muito !

24-07-2015 às 14:29 Responder

thalles

Antes de mais nada, parabéns pelo ótimo artigo!
Cara você sabe como demarcar um território tipo um estado(minas gerais) através do maps ou do maps/places

03-08-2015 às 19:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a thalles

Assim? http://www.princiweb.com.br/demos/demarcar-estados/mapa.html

Abs!

24-08-2015 às 17:48 Responder

thalles

Em resposta a Rodolfo Pereira

Valeu!

24-08-2015 às 19:31 Responder

Jefferson Ribeiro

Excelente matéria Rodolfo Pereira.

Está sendo muito útil, era oque estava procurando a algum tempo, mas talvez possa me dar uma luz em uma duvida.
Vou inserir marcadores em todas cidades do brasileiras porem cada cidade possui um valor diferente tipo (0,43),(0,47).
Quando selecionar uma cidade ou pesquisar a cidade, esse valor vai fazer parte de um formulário de cálculo onde o usuário vai inserir mais alguns valores e depois gerar um gráfico. Poderia me ajudar a como devo proceder para inserir esses valores a cada ponto e quando selecionado ir para o formulário?

Desde já.

Obrigado!

04-08-2015 às 09:28 Responder

Leonardo

Em resposta a Jefferson Ribeiro

Caro Rodolfo, parabéns pelo belo post.
Estou a começar a programar ainda.
No meu curso, estou a fazer uma pesquisa sobre o crescimento das energias renováveis na península ibérica, então encontrei o mapa do site http://edp-distribuicao-rede.beta.waynext.com/ Como posso fazer para extrair todos os marcadores? De importância seriam somente as linhas e subestações do país.

Muito grato!

06-08-2015 às 11:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leonardo

Fala Leonardo, beleza?

As linhas que estão desenhadas no país estão aqui: http://edp-distribuicao-rede.beta.waynext.com/Kml/Nuts

Abs!

24-08-2015 às 17:37 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jefferson Ribeiro

Fala Jefferson,

Cara, marcar as cidades brasileiras eu já tentei mas é muito trabalhoso.. você teria que desenhá-las na mão... o máximo que fiz é marcar os estados brasileiros, aí fica igual ao site que você mostrou abaixo (http://edp-distribuicao-rede.beta.waynext.com/).

Abs!

24-08-2015 às 17:45 Responder

Jefferson Ribeiro

Em resposta a Rodolfo Pereira

Valeu Rodolfo!

Pois é verdade, acho que vou ter que procurar outra solução mais factível. Saberia me informar se utilizando a pesquisa do maps por cidades ou municípios brasileiros eu conseguiria agregar um valor especifico a cada cidade e puxar esse valor para fazer parte de um formulário de calculo.

Desde já.
Obrigado!

25-08-2015 às 00:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jefferson Ribeiro

Hm, não entendi muito bem o que você quer... pode ser mais específico?

30-09-2015 às 13:35 Responder

Carvalho

Olá Caro,
Primeiramente parabéns pelo Post, está muito bom mesmo, assim como os demais. Estou tentando traduzir no mapa as palavras "state of". Numa rápida pesquisa, achei que tem como passar o parâmetro para url e setar a linguagem como (https :// maps.googleapis.com/maps/api/staticmap?center=-3.7652385,-38.4797254&zoom=5&size=600x600&language=pt) ele traduzir. Porém no seu exemplo, como consigo concatenar o &language=pt?

08-08-2015 às 20:11 Responder

Carvalho

Em resposta a Carvalho

Caro, já consegui, na verdade ele pega o idioma padrão do windows :/

10-08-2015 às 15:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Carvalho

Ah beleza... achei no StackOverflow uma solução: http://stackoverflow.com/questions/2662889/how-to-indicate-the-language-in-the-google-maps-api

Foi essa solução que você chegou também?

24-08-2015 às 17:35 Responder

Carvalho

Prezado,
existem algumas buscas que o autocomplete não identifica, por exemplo Shopping Bela Vista,salvador- ba, no google maps é localizado porém na aplicação com o autocomplete não identifica. Porque este problema ocorre? Há uma diferença entre os dois mapas? Como sanar este problema?
Abraço!

11-08-2015 às 17:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Carvalho

Fala Carvalho, beleza?

Então, deve ser por causa da API que estou usando no post... há a API do Google Places que é específica para encontrar lugares, dê uma olhada: https://developers.google.com/places/javascript/

Abs!

24-08-2015 às 17:29 Responder

samuel

Rodolfo tudo bem?

O infobox não funcionou

Se não for incomodar, você poderia ver qual o problema?

http://vectoriza.com.br/maps/
Abraço!

25-08-2015 às 15:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a samuel

Opa, tudo certo e contigo?

Entrei no link mas o mapa nem aparece... tem 2 erros de scripts lá :(

Abs!

30-09-2015 às 13:38 Responder

Sergio

Boa Noite, Rodolfo..

Tudo bem?

Poderia me ajudar, estou tentando desenvolver um Web App usando MEAN, e nele eu preciso encontrar pessoas proximas de mim num mapa. Exemplo tenho um ponto no mapa e quero encontrar x pontos com a mesma descricao nesse mapa, mais proximas ao meu ponto.

Poderia me ajudar? No mongodb sei que tem funcoes de geolocalizacao mas nunca usei, se souber de algo que possa ajudar. Agradeço de coracao.

Abraços e sucesso sempre.

31-08-2015 às 01:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Sergio

Fala Sergio,

Fiz algo parecido com isso no site http://www.busaocampinas.com.br, onde exibo em um raio de 500 metros os pontos mais próximos da localização atual do usuário. O código para isso acontecer é este abaixo:

function esconderPontosEObterOsVisiveis(markers, latitude, longitude) {

    var latlng = new google.maps.LatLng(latitude, longitude);
    var markersVisiveis = [];

    for (var i = 0; i < markers.length; i++) {

        var distancia = google.maps.geometry.spherical.computeHeading(latlng, markers[i].position);

        var p2 = markers[i].position;
        var p1 = latlng;

        var R = 6371;

        var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
        var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;

        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = R * c;

        if (d < diametro_circulo) {
            markers[i].setVisible(true);
            markersVisiveis.push(markers[i]);

            var numero = infoPontoParada[i].numeroLinha.toString();

            markersVisiveisNumerosLinhas.push(numero);
        } else {
            markers[i].setVisible(false);
        }
    }

    return markersVisiveis;
}

Abaixo uma breve explicação das variáveis:

diametro_circulo = No meu caso, usei o valor de 0.5, que corresponde a 500 metros;

markers = Array que contém todos os pontos do mapa;

latitude, longitude = Valores da posição atual do usuário.

Espero que possa te ajudar de alguma forma. Qualquer dúvida me avise.

Abs!

30-09-2015 às 13:40 Responder

Davi

Olá, ótimo post. Gostaria de saber como faria para traçar uma rota com coordenadas que ja tenho armazenadas no banco de dados...

01-09-2015 às 16:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Davi

Como que essas rotas estão armazenadas no banco de dados?

30-09-2015 às 13:50 Responder

davi

Em resposta a Rodolfo Pereira

lat -20.342795 long -40.389293333333

Estou usando as polylines, mas fica muito estranho. Queria usar um método igual de quando se traça rotas, mas só consegui uma quantidade limitada de ligações, umas 40 +- pois o próprio google limita. Tenho uma idéia de como fazer para burlar. Só não sei como fazer...

30-09-2015 às 14:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a davi

É, nesse caso a única opção que vejo é utilizar as Polylines. Se você encontrar uma maneira, compartilhe com a gente :)

26-10-2015 às 16:16 Responder

Thales

Fala Rodolfo, consegui personalizar meu mapa, ta ficando massa, uma coisa que sei que pode ser simples mas tow quebrando a cabeça. Como que eu faço pra alterar uma imagem de ícone? por ex: eu clico em um ícone e ele muda de imagem, no caso eu tenho uma imagem preta e branca e outra colorida, quando eu clicar a que está preta e branca fica colorida, tentei usar o onclick mas nao ta funfando, gostaria muito que vc pudesse me ajudar man. Abç

10-09-2015 às 02:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thales

Fala Thales, beleza?

Você tem algum link para eu ver a sua aplicação rodando?

Abs!

30-09-2015 às 14:42 Responder

Eder Tonello

Bom Dia Rodolfo,

Primeiramente Parabéns pelos posts sobre a API do Google Maps!!

Você pode me dar um dica?

Eu preciso Apresentar no mapa a rota entre 2 pontos e marcar diversos outros pontos no mapa que não fazem parte dessa rota.

Com seu post consegui marcar 2 pontos e exibir a rota entre os 2 pontos (A e B) ok.

Verifique no seu post o exemplo de criar um array de endereços e posteriormente criar os makers no mapa, mas não estou conseguindo integrar tudo.

Mas o problema é que não cria os Markers, somente os 2 pontos da rota.

Meu HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Rota Clientes</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>

<body>
<div id="site">
<div id="mapa"></div>
<h1>Rota Clientes</h1>

<form name="teste" method="post" action="index.html">
<fieldset>
<legend>Criar rotas</legend>

<div>
<label for="txtEnderecoPartida">Endereço de partida:</label>
<input type="text" id="txtEnderecoPartida" name="txtEnderecoPartida" value="Iapó 371 Curitiba PR" />
</div>

<div>
<label for="txtEnderecoChegada">Endereço de chegada:</label>
<input type="text" id="txtEnderecoChegada" name="txtEnderecoChegada" value="Princesa Izabel 573 Curitiba PR"/>
</div>

<div>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar" />
</div>
</fieldset>


</form>


</div>

<script src="js/jquery.min.js"></script>

<!-- Maps API Javascript -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<!-- Arquivo de inicialização do mapa -->
<script src="js/mapa.js"></script>
<script src="js/ponstos.js"></script>




</body>
</html>

Meu JS:
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {



directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("mapa"), options);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("trajeto-texto"));

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {

pontoPadrao = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pontoPadrao);

var geocoder = new google.maps.Geocoder();

geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#txtEnderecoPartida").val(results[0].formatted_address);
}
});
});
}
}

initialize();


$("form").submit(function(event) {
event.preventDefault();

var enderecoPartida = $("#txtEnderecoPartida").val();
var enderecoChegada = $("#txtEnderecoChegada").val();

var request = {
origin: enderecoPartida,
destination: enderecoChegada,
//waypoints: [{location: 'Rodoviária, Curitiba'}, {location: 'Mercado, Festival'}],
travelMode: google.maps.TravelMode.DRIVING
};


directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
});

$("");



$(function(){

var javascript_array = new Array();
var geocoder = new google.maps.Geocoder();

javascript_array[1] = "Princesa Izabel 587 Curitiba PR";
javascript_array[2] = "Getulio Vargas 876 Curitiba PR";
javascript_array[3] = "Visconde de Guarapuava 965 Curitiba PR";

function carregarPontos() {
for (var i = 0; i < javascript_array.length; i++) {
endereco = javascript_array[i];

geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();

var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
title: "Meu ponto personalizado! :-D",
icon: 'img/marcador.png'
});
}
}
})
}
}

carregarPontos();


var enderecoPartida = "Iapo 371 Curitiba PR";
var enderecoChegada = "Princesa Izabel 573 Curitiba PR";


var request = {
origin: enderecoPartida,
destination: enderecoChegada,
//waypoints: [{location: 'Brigadeiro Franco 354 Curitiba PR'}, {location: 'Getulio Vargas 354 Curitiba PR'}],
travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});



});


17-09-2015 às 11:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eder Tonello

Cara, dê uma olhada no post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html, talvez te ajude.

Qualquer coisa me avise.

Abs!

30-09-2015 às 16:57 Responder

Walter Junior

Bom dia Rodolfo, primeiramente parabens pelo excelente tutorial!

Juro que li todos os comentários e li todos os links que você passou com a solução para o meu problema, porém sou muito noob e não consegui executar nenhuma delas.

O que eu tenho:
Latitude e longitude num BD MySql onde os usuários podem cadastrar novos endereços..

O que preciso:
Criar o JSON com esses dados vindos do Banco de Dados (ou de uma Data Table no codebehind).

Vi que a solução mais fácil seria criar um arquivo PHP para gerar esse JSON, porém não manjo NADA de PHP e não consegui fazer o arquivo.
Procurei pela solução em C# (minha aplicação é em C#) e entendi menos ainda..

Poderia me dar uma luz? algo que fosse mais claro de entender?

Abraços!!

25-09-2015 às 11:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Walter Junior

Fala Walter!

Vish cara, complicado... você teria que fazer com alguém que possa ir te explicando passo a passo =/

Abs!

26-10-2015 às 17:22 Responder

Walter Junior

Boa tarde Rodolfo,

Estou com muitas duvidas com esse projeto...

Fiz o download que você deixou e os pontos não aparecem.. o que poderia ser?

25-09-2015 às 16:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Walter Junior

Fala Walter!

Você está usando o Chrome? Pois ele impede dos pontos carregarem no mapa quando você está executando a aplicação na sua máquina.

Abs!

26-10-2015 às 17:20 Responder

wwwad

Pretendo algo parecido mas para a planta de um parque de estacionamento. pretendo identificar o caminho desde a entrada até ao lugar de estacionamento x

alguma sugestão?

03-10-2015 às 19:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a wwwad

Hm, nesse caso você vai ter que desenhar mesmo... não vejo vantagens utilizar a API do Google Maps para esse fim.

26-10-2015 às 16:14 Responder

Fagner

Baixei os arquivos do github e não exibe os marcadores, seria algum problema desktop? Tnho que mandar para um servidor web?

06-10-2015 às 17:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fagner

Você está usando o Chrome? Se sim, para rodar local, utilize algum outro navegador.

26-10-2015 às 16:12 Responder

marco tulio

no google chrome deve ter algum bug... deixei mostrando a posição e limpando.. só que ai passado um determinado tempo ele da bug na tela e nao apaga mais as posições... ficando entao acumulando pontos na tela...

14-10-2015 às 22:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a marco tulio

Eita! Esse bug eu não conhecia. Você testou em algum outro navegador?

26-10-2015 às 16:06 Responder

marco tulio

Em resposta a Rodolfo Pereira

sim em outro nao dava.. deixei nos 2 ao mesmo tempo...

mais mudei a config...

fiz um vetor auxiliar de marks pra evitar o delay ao carregar o json que pesquisa em outro banco de dados... ai carrego no vetor aux so depois troco com o que mostra as marks.. porque tava piscando no mapa tipo 2 a 3 segundos ate fazer a leitura...
ai mudei um pouco o codigo.. e acho que parou...

27-10-2015 às 21:39 Responder

Luis Paulo

Bom dia, te perguntar tem alguma API com qtd ilimidata que eu posso lancar o quanto de pontos no mapa eu quiser?

06-11-2015 às 09:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luis Paulo

Fala Luis, tudo certo?

A API do Google Maps não tem limite de pontos. Pode usar ela mesma :)

Abs!

18-12-2015 às 14:40 Responder

Rodrigo Batista

Rodolfo, parabens pelo post...
sabe me falar se consigo identificar no JSON de retorno do directions API, quando a rota passar por algum desses pontos que eu criar? ou alguma maneira de fazer isso?
por exemplo: quero colocar um ponto em alguma via, e quando a rota passar por ele, identificar isso lendo o JSON de resposta do web service

12-11-2015 às 15:59 Responder

tulio

Boa noite, não sou perito em programação porem tenho uma demanda. Sou bombeiro militar e trabalho com despacho de viaturas. na minha cidade temos 8 unidades de atendimento hospitalar. Queria saber se é possivel fazer algum tipo de programacao no google maps que me retorne qual é a unidade mais próxima do endereço onde a viatura se encontra. No caso este endereço seria inserido pelo usuário. Desde já grato

23-11-2015 às 02:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a tulio

Oi tulio, tudo bem?

Mande um e-mail para contato@princiweb.com.br que a gente pode conversar melhor sobre isso.

Abs!

18-12-2015 às 14:26 Responder

Henrique Ferreira

Bom dia! Primeiramente queria parabenizá-lo pelo excelente post, baixei a algum tempo o seu api personalizado e estava funcionando perfeitamente, agora ele está dando um erro de XMLHttpRequest cannot load sabe como solucionar?

23-11-2015 às 11:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Henrique Ferreira

Fala Henrique, tudo certo?

Quais alterações que você fez em relação ao código original?

Abs!

18-12-2015 às 14:27 Responder

Patrick

Boa noite!
Parabens pelo tutorial! Muito bom!
Talvez você consiga me ajuda a resolver uma questão.
Em vez de apresentar o numero absoluto de "pinos" aglomerados em uma região, quero apresentar a quantidade relativa de pontos que foram reunidos. Entendeu a ideia? Consegue me orientar?
Muito Obrigado!

23-11-2015 às 21:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Patrick

Fala cara, beleza?

Você quer mostrar a porcetagem agrupada de acordo com o total de "pinos" no mapa? Se sim, procurei aqui e não achei nada a respeito de como fazer isso =/

Abs!

18-12-2015 às 14:05 Responder

Alan Le Senechal

Obrigado por compartilhar, artigo de grande ajuda e conteúdo!
Vou utilizar algumas informações para integrar uma aplicação Android.
Parabéns e sucesso!

26-11-2015 às 23:10 Responder

Samara

Olá Rodolfo,
Gostaria de parabeniza-lo pelo post, excelente trabalho!
Está me ajudando muito com um projeto da faculdade!

Tenho uma dúvida, não estou conseguindo resolver. Gostaria de saber se você poderia ajudar, ou alguém que tenha feito algo parecido.

Como posso criar um filtro para as marcações? Estou tentando criar um filtro por categoria, porém não está atualizando as marcações.

HTML:

<div id="mapa"></div>
<select id="Select" onchange="filterMarkers(this.value)">
<option value="">Please select category</option>
<option value="Pediatria">Pediatria</option>
<option value="Geral">Geral</option>
<option value="Acupuntura">Acupuntura</option>
</select>

Mapa.js:

window.filterMarkers = function(esp) {
if (ponto.Especialidade = esp) {
// show marker
marker.setVisible(false);

} else {
// hide marker.
marker.setVisible(false);
}
}

Poderia me ajudar, por favor?
Obrigada!
 

30-11-2015 às 16:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samara

:)

18-12-2015 às 13:38 Responder

Luana

Olá, eu gostaria de saber como pegar automaticamente os pontos adicionados no banco de dados e mostrá-los, utilizando também o Ruby on rails. Obrigada!

02-12-2015 às 16:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luana

Oi Luana!

Infelizmente esse código vou ficar te devendo :(

Abs!

18-12-2015 às 13:36 Responder

Eduardo

Olá Rodolfo!
Excelente artigo, obrigado por compartilhar o conhecimento.

Após agrupar os grupo há possibilidade de dar zoom em um ponto específico?


09-12-2015 às 19:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eduardo

Oi Eduardo,

Sim, é possível. Quanto mais zoom você der, os pontos vão desagrupando.

Abs!

18-12-2015 às 13:33 Responder

ednei rocha

Excelente tópico, integrei com MySQL e funcionou, todavia gostaria de implementar tres itens:
1 - Manter aberto o title dos marcadores visíveis
2 - Ocultar o content de um marcador ao clicar em outro
3 - Criar um filtro (exemplo, hospital, escola, etc...)

Muito obrigado.

10-12-2015 às 15:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a ednei rocha

Fala cara, beleza?

O item 2 creio que o código desse post já faz isso. Sobre os outros itens, leva um tempinho pra fazer... se quiser, a gente pode fazer pra você :) É só mandar um e-mail para contato@princiweb.com.br

Abs!

18-12-2015 às 12:06 Responder

Wilson

Primeiramente parabéns! :)
Minha duvida é: como posso fazer isso dentro de uma rota? Exemplo tenho uma rota entre dois pontos e entre esses dois pontos quero colocar 3 ou mais marcadores.

15-12-2015 às 16:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Wilson

Fala cara, beleza?

Dá uma lida nesse post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html, na parte dos "DirectionsWaypoints". Talvez te ajude.

Qualquer coisa me avise :)

Abs!

18-12-2015 às 12:03 Responder

Wilson

Em resposta a Wilson

Vlw, irei dar uma olhada, obrigado!

21-12-2015 às 16:12 Responder

João Bolsson

Olá! Acompanhei o seu exemplo, parabéns pelo blog!

Para quem quiser outro exemplo de utilização do Google Maps em um site, pode acessar aqui: https://joaobolsson.wordpress.com/2015/12/09/google-maps-com-php/
Inclusive você pode salvar as coordenadas em um banco de dados e atualizar o mapa com marcadores personalizados

Confiram!

19-12-2015 às 14:45 Responder

Alexandre Ramos

Boa Tarde Rodolfo.

Gostaria de te agradecer, pois resolveu um problema enorme o seu post.

Porém hoje estou iniciando o desenvolvimento de um sistema de rasteamento por GPS, e gostaria de saber se poderia me ajudar como faço pra exibir as informações de posicionamento do banco de dados no mapa utilizo php e mysql.

Desde já agradeço.

05-01-2016 às 13:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre Ramos

Fala Alexandre,

Cara, tendo a latitude e longitude no  banco de dados, e só gerar um JSON a partir de um arquivo .php. Para isso, no Google você vai encontrar alguns tutoriais :)

Abs!

27-01-2016 às 08:35 Responder

Rodrigo Miranda

Olá Rodolfo, parabéns pelo post, super completo.

Tenho uma dúvida que deve ser fácil, rs...
Tem como criar um botão e ele volta para a posição original do mapa? ou seja ele vai voltar a dar o zoom que for para exibir todos os pontos entendeu?

Obrigado

07-01-2016 às 01:00 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo Miranda

Sim, dê uma olhada no método "setZoom" aqui https://developers.google.com/maps/documentation/javascript/reference

27-01-2016 às 08:39 Responder

jovani

Boa tarde, parabens!
eu queria colocar um player java script no json e nao estou conseguindo é possivel?

<script type="text/javascript">
jwplayer("player").setup({
sources: [{
file: "rtmp://endereco",

},{
file: "http://endereco"
}],
rtmp: {
bufferlength: 3
},
fallback: false
});
</script>

13-01-2016 às 16:20 Responder

Fagner Sutel

Caro Rodolfo,
Implementei o modelo algumas fezes já e com sucesso, inclusive inserindo links e tabelas em casa ponto.
Minha dúvida é, posso no mesmo mapa inserir os pontos como aqui demonstrado e exibir um polígono?
Desejo listar todas as vagas para Portadores de Deficiência no centro da cidade e montar um polígono exibindo os limites do centro.

20-01-2016 às 10:16 Responder

Fagner

há como atribuir dinamicamente diferentes ícones de marcadores, pretendo utilizar cores diferentes.

27-01-2016 às 15:17 Responder

Fuego

Que viagem, muito bom, sem palavras.......

30-01-2016 às 15:08 Responder

Carlos

Rodolfo,<br /><br />Recentemente fiz um contato pelo seu e-mail obtido no github e voc&#234; me pediu que o fizesse aqui. Lembra? <br />Pois &#233;! O Google Maps desde 29/01/2016 mudou a interface e agora os scripts dos mapas saem como esse colado abaixo. As tabelas publicadas receberam um numero criptografado como voc&#234; poder&#225; ver na consulta (query) abaixo. Estou tentando incluir o markerclusterer nesse meu mapa mas, n&#227;o estou conseguindo! A minha tabela tem 2952 dados e s&#243; consigo montar no FusionTables. Com os dados do seu exemplo (pontos.json) eu j&#225; consegui. Por&#233;m, com os meus dados eu n&#227;o consigo puxar importando de outra tabela json feita no openrefine e nem com o n&#250;mero abaixo puxando da tabela publicada no GoogleMaps. Voc&#234; poderia me dar uma assist&#234;ncia?<br /><br />Carlos<br /><br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta name=&quot;viewport&quot;&gt;&lt;/meta&gt;<br />&lt;title&gt;OUTROS - Google Fusion Tables&lt;/title&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />html, body, #googft-mapCanvas {<br /> height: 300px;<br /> margin: 0;<br /> padding: 0;<br /> width: 500px;<br />}<br />&lt;/style&gt;<br /><br />&lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.google.com/maps/api/js?sensor=false&amp;amp;v=3&quot;&gt;&lt;/script&gt;<br /><br />&lt;script type=&quot;text/javascript&quot;&gt;<br /> function initialize() {<br /> google.maps.visualRefresh = true;<br /> var isMobile = (navigator.userAgent.toLowerCase().indexOf(&#39;android&#39;) &gt; -1) ||<br /> (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));<br /> if (isMobile) {<br /> var viewport = document.querySelector(&quot;meta[name=viewport]&quot;);<br /> viewport.setAttribute(&#39;content&#39;, &#39;initial-scale=1.0, user-scalable=no&#39;);<br /> }<br /> var mapDiv = document.getElementById(&#39;googft-mapCanvas&#39;);<br /> mapDiv.style.width = isMobile ? &#39;100%&#39; : &#39;500px&#39;;<br /> mapDiv.style.height = isMobile ? &#39;100%&#39; : &#39;300px&#39;;<br /> var map = new google.maps.Map(mapDiv, {<br /> center: new google.maps.LatLng(-29.95817028017006, -28.898367273372542),<br /> zoom: 3,<br /> mapTypeId: google.maps.MapTypeId.ROADMAP<br /> });<br /> map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(&#39;googft-legend-open&#39;));<br /> map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(&#39;googft-legend&#39;));<br /><br /> layer = new google.maps.FusionTablesLayer({<br /> map: map,<br /> heatmap: { enabled: false },<br /> query: {<br /> select: &quot;col9&quot;,<br /> from: &quot;1frB6UcKoZKMintsBHYMvsuSrTtNGrEZwPflqXk5Z&quot;,<br /> where: &quot;&quot;<br /> },<br /> options: {<br /> styleId: 2,<br /> templateId: 2<br /> }<br /> });<br /><br /> if (isMobile) {<br /> var legend = document.getElementById(&#39;googft-legend&#39;);<br /> var legendOpenButton = document.getElementById(&#39;googft-legend-open&#39;);<br /> var legendCloseButton = document.getElementById(&#39;googft-legend-close&#39;);<br /> legend.style.display = &#39;none&#39;;<br /> legendOpenButton.style.display = &#39;block&#39;;<br /> legendCloseButton.style.display = &#39;block&#39;;<br /> legendOpenButton.onclick = function() {<br /> legend.style.display = &#39;block&#39;;<br /> legendOpenButton.style.display = &#39;none&#39;;<br /> }<br /> legendCloseButton.onclick = function() {<br /> legend.style.display = &#39;none&#39;;<br /> legendOpenButton.style.display = &#39;block&#39;;<br /> }<br /> }<br /> }<br /><br /> google.maps.event.addDomListener(window, &#39;load&#39;, initialize);<br />&lt;/script&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /> &lt;div id=&quot;googft-mapCanvas&quot;&gt;&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;

02-02-2016 às 15:31 Responder

José Marcos

Olá, Rodolfo!
Primeiramente, parabéns pelo post.
Cara, estou com o mesmo problema que pelo menos dois de seus leitores também estão tendo. Os marcadores só aparecem no Firefox. No Chrome e IE não.
Baixei o projeto de seu site exatamente como está, sem nenhuma alteração. Só coloquei mais um marcador.
Se quiser dar uma olhada, ele está publicado em www.josemarcos.eti.br/viagens Obrigado.

06-02-2016 às 19:28 Responder

José Marcos

Oi, Rodolfo. Eu de novo.
Complementando: Isso só acontece quando abro o arquivo localmente. A partir do site, está ok.

06-02-2016 às 19:35 Responder

Maurício

Olá!
Tudo bem?
Gostaria de saber se há a possibilidade de personalizar os ícones também, cada ponto com um ícone diferente.

08-02-2016 às 13:52 Responder

Fernanda

Rodolfo,

vc sabe se tem como identificar uma área específica no gráfico, por exemplo uma cidade, e esconder o restante do mapa?

Grata

10-02-2016 às 10:27 Responder

Michele

Em resposta a Fernanda

Oi Fernanda, você conseguiu descobrir uma forma de esconder o restante do mapa?

07-06-2016 às 15:11 Responder

Willians

Rodolfo Boa Tarde Cara me ajuda eu baixei o código e não esta aparecendo
icon finder , aparece apenas o mapa sem as localizações.

11-02-2016 às 16:53 Responder

Marcus

Bom dia!
Quanto você cobraria para desenvolver uma plataforma igual a essa, somente a parte de geolocalização com um mapa personalizado em HTML5?
Obrigado

16-02-2016 às 09:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcus

Oi Marcus :)

Entre em contato conosco pelo e-mail contato@princiweb.com.br

Abs!

 

24-02-2016 às 06:29 Responder

catarina

Parabéns Rodolfo pelo post, está muito completo e fácil para executar.

Consegui fazer um mapa personalizado como queria e adaptei muitos elementos depois de ler algumas das dicas nos comentário, mas uma coisa que ainda não consegui foi abrir o mapa no Google Chrome nem no IE, apenas abre correctamente no Firefox.
Mas gostava que abri-se em todos os browser's correctamente, é possível? como posso fazê-lo.
:) Catarina

22-02-2016 às 15:50 Responder

Fabio Torres

Amigo, boa noite! Gostaria de saber como faço para colocar o local do meu smartphone android nesse mapa, que ficará rodando em um pc.

25-02-2016 às 22:26 Responder

André

Parabéns pelo tutorial muito bom mesmo!!!
Gostaria de fazer aquele trajetos que ficam registrados em linha azul por onde a pessoa passou, é possível vc disponibilizar uma aula ?

26-02-2016 às 15:41 Responder

Regis

Excelente! Muito obrigado.

26-02-2016 às 15:47 Responder

Willian

Nesse exemplo (com o mesmo código), quando só se tem um ponto, este fica em um Zoom que praticamente não dá para ver nada. Como faço para diminuir o Zoom para um único só ponto.

28-02-2016 às 20:55 Responder

Hendrix

Cara voce sabe me dizer como que faço para deixar isso online para todos, e criar tipo waze?, pois to querendo que os usuarios coloquem marcações, devido ao lançamento de pokemon go, quero que usuarios cadastrados, adicionem pontos no mapa, e outros usuarios vejam esses pontos no caso locais que pokemons aparecem, e fique por algumas horas, mas que isso seja via aplicativo, mesmo sendo manual, e vice versa.

02-03-2016 às 21:29 Responder

Raquel

Gostaria de saber como fazer um mapa com os limites de delivery de nosso restaurante, geralmente falasse em raio de entrega mas gostaria de delimitar por avenidas, se possível.
Aguardo sugestões de como fazer. Obrigada
Raquel

06-03-2016 às 13:12 Responder

José Marcos

Olá Rodolfo!
Seria muito difícil juntar as duas funcionalidades numa mesma página? Ou seja, juntar o "Criando um mapa personalizado", com o "busca de endereço personalizada no Google Maps"?
Eu até que tentei, mas, devido a minha pouca experiência, não consegui.
Agradeço desde já.
José Marcos.

07-03-2016 às 18:49 Responder

julio Cesar

Ola
estou estudando este codigo do Google Maps API v3: Criando um mapa personalizado.
tenho duvidas:

Preciso pegar do banco os seguintes dados:

longitude
latitude
descrição
titulo
imagem
id para poder criar um botao para ir para pagina referente a este ponto/imagem

pode me ajudar ?

09-03-2016 às 17:02 Responder

Fagner Sutel

Como faço para desativar o zoom automático? Desconfio que seja no "fitBounds" mas ainda não consegui. Quero concentrar o zoom apenas na região do polígono da região central.
Segue meu mapa: http://www.sutel.com.br/ppds/mapaperso/index.php

15-03-2016 às 10:21 Responder

Guilherme

Rodolfo primeiramente muito obrigado pela ajuda, consegui fazer tudo da forma como você mostrou, porem existe a possibilidade de que os nomes dos pontos estejam sempre aparecendo, e não apenas quando passamos o mouse por cima ?

16-03-2016 às 09:25 Responder

Guilherme

E ae Rodolfo, tudo bom?!

Cara tem como fazer dessa forma e proteger a key utilizada para que ninguém consiga pegá-la e utilizar em outro locais?!

Neste caso falo de um key licenciada na qual a empresa utiliza.

Agradeço.

29-03-2016 às 15:03 Responder

Lucas Machado

Olá Rodolfo,

Parabéns pelo post, está muito bem explicado e para mim que estou iniciando, ajudou muito :)

Gostaria de tirar uma dúvida com você:
Consegui exibir um marcador ao clicar em um determinado local do mapa, e na infowindow deste marcador coloquei um textBox e um botão, onde eu digitaria um valor para o tamanho do circulo que seria desenhado no mapa.
A ideia era digitar o calor, clicar no botão e o círculo aparecer com o tamanho digitado.
Porém quando digito o valor e clico no botão, não estou conseguindo fazer o círculo aparecer no mapa.

Poderia me ajudar?

Desde já agradeço pela sua atenção.

29-03-2016 às 17:24 Responder

Lincoln

Rodolfo, em primeiro lugar parabéns pelos posts. Sou aluno do Senai e estou precisando desenvolver um tipo de gps usando o google maps, consigo localizar o equipamento mas essa localização é estática como eu faço para que o ponto da localização de movimente até o destino da rota?

30-03-2016 às 15:51 Responder

Lincoln

Rodolfo, boa tarde, como uso a localização do usuário para criar a rota dele até esse ponto fixo?

30-03-2016 às 17:29 Responder

Lucimar Schutz

Olá Rodolfo, resolvi o problema que reportei em um outro comentário de manhã, onde não conseguia marcar os pontos no maps. O que faltava era setar a linha "map: map," no trecho de código que faz a marcação dos pontos no mapa. Ficando assim:

var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
title: "",
icon: 'img/marcador.png'
});

Porém me deparei com outro problema, o agrupamento pelo MarkerClusterer não está mais funcionando, quando o mapa carrega, os icones vem agrupados corretamente, porém, se eu navegar pelo mapa aumentando e diminuindo o zoom o agrupamento para de funcionar e nada mais fica agrupado.
Agora minha cabeça deu nó, o que pode ser?


Obs. Obrigada pelo código, já me ajudou um monte.

15-04-2016 às 14:45 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucimar Schutz

Oi Lucimar!

Que bom que você conseguiu corrigir o problema inicial :)

Sobre no zoom os marcadores não ficarem agrupados, isso é estranho. Quando você aumenta ou diminui o zoom, aparece algum erro no console do browser?

Abs!

27-04-2016 às 02:39 Responder

Lucimar Schutz

Em resposta a Rodolfo Pereira

Olá Rodolfo, obrigada pelo retorno.

O único erro do console do browser foi o de keys, pois não havia definido uma chave para a minha aplicação, agora defini uma chave, porém o problema persiste, ainda não descobri o motivo.

Tentei passar o js completo de marcação no maps aqui, porém apareceu a seguinte mensagem:

A potentially dangerous Request.Form value was detected from the client ...

10-05-2016 às 09:40 Responder

Othon

Olá cara, gostei muito da tua "aula".
Estou aprendendo bastante.
Parabéns pela tua iniciativa.

20-04-2016 às 12:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Othon

:)

27-04-2016 às 02:36 Responder

Othon

Em resposta a Rodolfo Pereira

Olá Rodolfo estou pensando colocar isso(com alterações) num servidor web.

Tem como colocar isso num servidor web, um desses pequenos que funcionam em diretórios locais. Alguma sugestão??

27-04-2016 às 13:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Othon

Sim, mas qual a sua dúvida especificamente? Como publicar isso em um servidor?

03-05-2016 às 08:12 Responder

Rui Manuel Reis Quaresma

Olá Rodolfo.
Vejo que és muito bom nisto. Já conseguiste descobrir como se consegue implementar uma imagem ou desenhar por baixo das ruas? tenho experimentado muita coisa mas ainda não consegui lá chegar. E ainda não encontrei solução.

24-04-2016 às 15:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rui Manuel Reis Quaresma

Fala Rui,

Veja se te ajuda: https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

Qualquer coisa me avise... abs!

27-04-2016 às 02:32 Responder

Victor Cechinel

Boa noite, baixei agora e está dando um problema, você consegue ver?

26-04-2016 às 23:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Victor Cechinel

Qual problema que é? Dê uma olhada no console do browser que você está usando e cole o erro aqui :)

27-04-2016 às 02:30 Responder

Victor Cechinel

Em resposta a Rodolfo Pereira

Opa, esqueci de parabenizar, top o projeto :)

O erro é
jquery.min.js:5 XMLHttpRequest cannot load file:///Users/victorcechinel/Downloads/GoogleMapsAPIv3MapaPersonalizado-master/js/pontos.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Creio que seja problema na versão do Jquery, se eu mudar o jquery ele da erro no getJSON

Estou usando o chrome Versão 50.0.2661.86 (64-bit)

27-04-2016 às 03:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Victor Cechinel

Na verdade o problema é com o Chrome, que não aceita por padrão carregar arquivos diretamente de 'file'.

O que você precisa fazer é iniciar um servidor e abrir o mapa por ele. Você pode fazer isso com o http-server: https://www.npmjs.com/package/http-server

03-05-2016 às 01:12 Responder

Ricardo

Brother, parabéns pelo post!
Poderia me dar um help?
Estou tentando fazer uma marcação de pontos me baseando no seu exemplo, mas buscando as coordenadas a partir do Mysql.
Estou tomando um "coro" para fazer a conversão do .Json

Teria como verificar onde eh esta o meu erro:

include "./conecta.php";

$result = mysqli_query($conexao,"select * from dados_mapa");
$rows = array();
while($r = mysqli_fetch_assoc($result))
{
$rows[] = $r;
}
print json_encode($rows);

?>


/* global google */

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();

function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}

infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}

function carregarPontos() {
$.ajax({
type: "POST",
url: "teste.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (pontos) {
for (var i = 0; i < pontos.length; i++) {
var Id = pontos[i].id;
var Nome = pontos[i].name;
var Latitude = pontos[i].lat;
var Longitude = pontos[i].lng;
var latlngbounds = new google.maps.LatLngBounds();
//$.each(pontos, function(index, ponto) {
var marker = new google.maps.Marker({ position: new google.maps.LatLng(pontos.Latitude, pontos.Longitude), title: pontos.Nome, icon: 'img/marcador.png' });
var myOptions = { content: " " + pontos.address + " ",

pixelOffset: new google.maps.Size(-150, 0)
};
infoBox[pontos.Id] = new InfoBox(myOptions);
infoBox[pontos.Id].marker = marker;
infoBox[pontos.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(pontos.Id, marker);
});
markers.push(marker);
latlngbounds.extend(marker.position); //});
var markerCluster = new MarkerClusterer(map, markers);
map.fitBounds(latlngbounds);
}
}
});
}


carregarPontos();

Percebi que o erro ocorre nesta linha:
infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {

Quando digito "[ponto.Id]" o mapa carrega porém sem nenhum ponto.
Ao digitar [pontos.Id], o mapa não carrega, ficando somente o fundo cinza.

Já verifiquei todos os campos e estão Idênticos ao BD.

Poderia me ajudar?
Obrigado.

04-05-2016 às 03:17 Responder

Fagner Sutel

O markerclusterer deu pau geral em todos sites que verifiquei não está funcionando

12-05-2016 às 09:56 Responder

Leonardo

Gostaria de saber que api utilizo para formular rotas e retornar um preço?
tipo da loggi.com.br

21-05-2016 às 19:46 Responder

Márcio Freitas

Bom dia!

fui ver o seu blog, para me dar um apoio para o meu TCC, mas não entendo,

tem alguns arquivos em java script que quando eu vejo no html não ligam.

25-05-2016 às 10:36 Responder

Michele

Rodolfo, bom dia!

Você sabe se é possível mostrar no mapa somente o Brasil (por exemplo)?

06-06-2016 às 10:29 Responder

Thiago Muylaert

Ola amigo, adorei o seu post. gostaria de saber como faço isso mais o usando o gps do pc. quando entramos no google maps pelo pc, ele logo localiza a gente, gostaria de auto localizar no meu site, e dizer as distancia mais próximas dos pontos que eu marquei. como fosse fazer uma pesquisa de restaurante, e ele mostrar o mas próximo pela minha localização. usando no celular ou no pc, todos por meio de browser.

abraços amigo.

06-06-2016 às 20:10 Responder

Saulo

Amigo muito baca seu post, me ajudou muito, olha tenho uma duvida, como faço para usar o google maps para ele buscar o endereço mais próximo de onde estou ? eu trato isso via banco ? ou vi app mesmo, não sei nem por onde iniciar rsrs

07-06-2016 às 17:10 Responder

Cristiano Soares

Sensacional, véi! Parabéns pelo post!

09-06-2016 às 08:55 Responder

Julyano

Em resposta a Cristiano Soares

ele só aparece o número por que não está encontrando a imagem que estava sendo utilizada no exemplo. Dê uma olhada no console ;)

18-07-2016 às 15:07 Responder

Edson

Amigo, primeiramento parabéns pelo projeto muito legal e importante. Estou vindo tirar uma dúvida e/ou um esclarecimento sobre o agrupamento automático de marcadores, ele foi desativado pela google ?

13-06-2016 às 12:03 Responder

Marcos Elder.

Meus parabéns por compartilhar seu conhecimentos Rodolfo. Muito claro é objetivo!
Não sei o que esta acontecendo comigo, pois já tentei várias vezes com seu arquivo de download, no IE e no Chrome, mas não exibe os markers, apenas o mapa.

16-06-2016 às 22:40 Responder

Marcus Polo

Grande Post, Parabéns

17-06-2016 às 19:51 Responder

Eliziele

Oii ! Parabéns, muito legal ! Uma dúvida: com essa metodologia, eu consigo fazer com que o usuário calcule a rota a partir da localização dele ou de um endereço, até um dos pontos que eu inseri no mapa? Abraço :)

20-06-2016 às 15:02 Responder

Tiago

Bom dia, sei que o post é antigo, não estou conseguindo fazer funcionar o MarkerClusterer quando ele agrupa ele some as cores como antigamente.

Eu tenho um projeto que fiz a 1 ano e parou e a empresa entrou em contato pois eles ainda usam, verifiquei que nem no seu DEMO ele esta funcionando o agrupamento, você sabe se trocou a versão ou algo?

https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html

nesse local parece que funciona!

22-06-2016 às 10:15 Responder

William Gleyton Pessini Moreschi

Em resposta a Tiago

Então Tiago eu tambem tava com esse problema resolvi de maneria simples...
Faça download:
https://googlemaps.github.io/js-marker-clusterer/images/m1.png https://googlemaps.github.io/js-marker-clusterer/images/m2.png https://googlemaps.github.io/js-marker-clusterer/images/m3.png https://googlemaps.github.io/js-marker-clusterer/images/m4.png https://googlemaps.github.io/js-marker-clusterer/images/m5.png
No exemplo do Rodolfo esta assim:
var markerCluster = new MarkerClusterer(map, markers);

Mude para:
var markerCluster = new MarkerClusterer(map, markers,{imagePath: '../pasta/m'});

mantenha /m aqui no meu exemplo funcionou

09-07-2016 às 14:50 Responder

Eduardo Ferreira Galvão de Oliveira

Em resposta a Tiago

Olá Tiago conseguiu resolver seu problema com os marcadores e quando ele agrupa? A empresa que estou também usa esta "Google Maps API v3" e há alguns meses os marcadores sumiram e só aparecem quando o zoom está muito próximo (zoom:3) e depois se aproximarmos mais eles somem.

Outra questão que estou tentando adequar é que aqui ao invés de usar json o antigo programador utiliza XML e customizou para que os dados fossem consumidos desta forma.

29-07-2016 às 16:39 Responder

Rodrigo

Em resposta a Tiago

estou com o mesmo problema algum conseguiu resolver?

31-07-2016 às 20:31 Responder

Douglas

Em resposta a Tiago

Tive o mesmo problema e que foi tirada a pagina aonde estava as imagens para resolver tem que baixar https://github.com/googlemaps/js-marker-clusterer os arquivos e configurar para buscar no teu sistema

25-08-2016 às 16:22 Responder

Denis Izaias Pereira

Em resposta a Tiago

Olá, primeiramente gostaria de parabenizado por disponibilizar tal conteúdo.

Realizei as configurações e a inclusão desta API em meu site porém da erro de autenticação e não carrega, ja olhei no google criei uma chave mas não consigo fazer funcionar... Olhei alguns exemplos acima e ainda assim estou com dificuldade.

Meu site é http://juc.diiwebdesign.com/contato.html
Att

08-09-2016 às 17:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Denis Izaias Pereira

Olhei no console do Chrome e vi o seguinte erro:

js?sensor=false:34
Google Maps API error: MissingKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-erro

Entra no link acima e dê uma lida no erro, creio que vai te ajudar a solucionar o problema.

Abs!

20-09-2016 às 09:57 Responder

EDSON CARNEIRO

Rodolfo, primeiramente parabéns pelo post, muito rico de informação usei ele em um projeto mas agora atualmente não consegue realizar o agrupamento dos pontos só está aparecendo a numeração, teve alguma modificação e/ou atualização da google? Como seria a possível sanar esse problema?

29-06-2016 às 12:11 Responder

Jhonatan

Olá Rodolfo! Estou tentando mostrar um mapa com minhas coordenadas armazenadas no BD. As implementações estão corretas. Ha algo errado com o xhtml?

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyCqZ4n6WsapveOZxGjtUC7KqkpL_foPCts"
type="text/javascript"></script>
</h:head>
<title>Rastreamento</title>
<h:body>
<h:form>
<p:poll interval="10"
rendered="true"
listener="#{gadoBean.obterPosicaoTag}"
update="mapa" />

<p:gmap id="mapa"
rendered="true"
center="#{gadoBean.center}"
zoom="18"
model="#{gadoBean.mapa}"
type="HYBRID"
style="width:600px;height:400px"/>
</h:form>
</h:body>
</html>

07-07-2016 às 17:17 Responder

henrique

como se faz pra por essa caixa de comentarios no site ?

17-07-2016 às 16:09 Responder

Bruna Garcia de Almeida

Post show, mas queria saber como trocar a cor ao passar o mouse em cima e visualizar "anúncios" pelo mapa.

26-07-2016 às 14:19 Responder

William Flor

Boa tarde Rodolfo, muito show o seu tutorial, apenas um detalhe, quando agrupa ele não exibe exibe nada além do número de pontos.

http://softautomotiva.com.br/mapa.html

17-08-2016 às 16:40 Responder

Renan

Parabéns pelo conteúdo.
Excelente didática.
Deus te abençoe

07-09-2016 às 21:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Renan

:)

20-09-2016 às 10:00 Responder

Hector

Meu infobox não está abrindo. Segue script:

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
    var latlng = new google.maps.LatLng(-20.2969974, -40.3218996);
    var options = {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapa"), options);
}
initialize();

function abrirInfoBox(id, marker) {
    if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
        infoBox[idInfoBoxAberto].close();
    }
    infoBox[id].open(map, marker);
    idInfoBoxAberto = id;
}

function carregarPontos() {
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(-20.2968022, -40.3223133),
        title: "Meu ponto personalizado! 1 :-D",
        map: map,
        icon: 'images/marcador.png',
    });
    var myOptions = {
            content: "

                um

                ", pixelOffset: new google.maps.Size(-150, 0), infoBoxClearance: new google.maps.Size(1, 1) }; infoBox[1] = new InfoBox(myOptions); infoBox[1].marker = marker1; infoBox[1].listener = google.maps.event.addListener(marker1, 'click', function (e) { abrirInfoBox(1, marker1); }); } carregarPontos();

Tem como verificar por favor ?

13-09-2016 às 12:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hector

Confesso que é um pouco complicado eu analisar o seu código e ver exatamente o problema, hehehe...

Você pode abrir o console do seu browser e ver se está aparecendo algum erro? Talvez isso te ajude a achar o problema.

Valeu!

20-09-2016 às 09:55 Responder

Adilcio

Em resposta a Rodolfo Pereira

Rodolfo, excelente seu trabalho em compartilhar seus conhecimentos, sou muito novo neste seguimento da api google, mais preciso de um "norte".

Como posso fazer para gerar varios "pontos" no mapa, baseado em um banco de dados msql com as Lat e Long ?
Exemplo tenho 25 pontos Lat e Long em um msql, como relacionar todos fazendo essa consulta no banco de dado ?

Me de um norte.
Grato

30-11-2016 às 23:11 Responder

JEFERSON MACHADO

otimo

26-09-2016 às 22:57 Responder

Raphael

Parabéns, ótima didática.
Sabe se tem como desenhar um marcador ao invés de exibir uma imagem, quando mesmo estiverem agrupados?

Ex: Exibir um ponto verde para até cinco marcadores agrupados, ponto amarelo para mais de dez agrupados...

Já tentou algo assim?
Sabe se é possível nessa API?

05-10-2016 às 12:30 Responder

Guilherme

Tutorial muito top! Até fiz um sisteminha aqui, mas tenho uma dúvida: como faria para a div "mapa" atualizar a cada 10 segundos, ou a cada solicitação post da página?

07-10-2016 às 09:32 Responder

Pedro

Amigo, como faria para buscar a localização dos pontos no banco de dados POSTGRESQL, por exemplo?

Obrigado abraços!

19-10-2016 às 18:02 Responder

Valdiney

Muito bom o seu site! Tenho um site em wordpress que usa o mapa do google, no entanto, ao registrar um domíno e inserir-lo no meu site o mapa parou de aparecer. Voce tem alguma ideia do que pode ser?

04-11-2016 às 10:16 Responder

Tiago Ferraz

Olá Rodolfo, como faço para que seja feita as marcações?

08-11-2016 às 21:52 Responder

Matsuba.com.br

Perfeito!
Por isso que amo a internet e as pessoas que compartilham conhecimentos!

Fiz um mapa com mapeamento de clientes!
Coloquei mais de 300 pontos no mapa, ficou TOP!

Desde já muitíssimo obrigado!
#SucessoSempre

20-11-2016 às 10:56 Responder

Fábio Posser

Olá Rodolfo, parabéns pelo post.
Fiz a implementação porém notei que o agrupador de pontos não está destacando os números.
Sabe informar alguma solução para isto?
Note que no seu demo acontece a mesma coisa, http://www.princiweb.com.br/demos/google-maps-api-v3-criando-mapa-personalizado/ Em Campinas por exemplo, só aparece o número 6 em preto, misturado as demais letras do mapa dificultando a identificação.

Obrigado!

24-11-2016 às 21:44 Responder

Fábio Posser

Olá, tentei desagrupar e também não consegui.
Segui o que você orientou e não deu certo.

Tem alguma outra dica?

Obrigado!



Para não agrupar os pontos:

1. Retire as linhas 55 e 61 do arquivo "mapa.js";

2. Passe o parâmetro "map" para o marker:


var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Meu ponto personalizado! :-D",
icon: 'img/marcador.png',
map: map
});

25-11-2016 às 00:42 Responder

Edson

Rodolfo, bom dia, sensacional seus posts, extremamente útil, você é fera mesmo.
Gostaria de pedir uma ajuda.
1 - Quando um internauta acessar meu site, é possível informar a posição dele no mapa: Ex: Você está aqui--> Mapa com a localização do usuário.

2 - Com base nessa localização colocar no mapa as lojas próximas ao usuário, utilizando um ráio de 5 KM? Tenho uma lista de endereços que preciso colocar no mapa próximo ao usuário do site.

Muito obrigado pela ajuda e grande abraço

02-12-2016 às 09:23 Responder

Pedro Henrique Romualdo Goulart

Cara eu faço o download e nao funciona de jeito nenhuma abrindo o index do meu pc, queria saber o porque ?

27-12-2016 às 13:07 Responder

Walter Mathias

Cara, através de um arquivo kml, conseguimos inserir automaticamente círculos de um raio de 3Km por exemplo sobre uma determinada coordenada?

28-12-2016 às 15:35 Responder

Galileu Garcia

Olá!
Estou acompanhando o tutorial e por algum motivo o ponto escolhido não está sendo mostrado como marcador no mapa. Obrigado!

28-12-2016 às 16:31 Responder

Caio

Olá,

Preciso integrar respostas do Google Forms com o Google Maps de maneira automática Poderíamos conversar sobre esse projeto?

11-01-2017 às 23:15 Responder

Rodrigo Rafael Cunha

Rodolfo parabens pelas paginas e ter detalhado o uso do google maps api.
Tenho algumas dúvidas, talvez sejam simples ou não, lá vai:
1 - tenho uma aplicação que faz uma consulta no banco de dados e retorna vários pontos numa rua e bairro.
2 - gostaria de delimitar o bairro primeiro e posteriormente inserir os pontos, redimensionando conforme o tamanho do bairro.
Alguma sugestão?

16-01-2017 às 15:30 Responder

Leandro

Boa tarde, gostaria de saber se é possível personalizar apenas um marcador em específico, por exemplo o que indica o ponto de partida de um trajeto como na postagem: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html. Obrigado, aguardo resposta.

19-01-2017 às 17:05 Responder

Diego Cavalcanti

Parabéns pelo tutorial, foi muito esclarecedor.

27-01-2017 às 15:57 Responder

bazinga

Rodolfo safadão!
baita tutorial!
mandou bem

27-01-2017 às 21:22 Responder

Yssis

:)
vlw bem útil

02-02-2017 às 14:10 Responder

Marcus Guarani

Eu baixei no Github, porem quando eu executo ele me dá erro , como faço para arumar isso.

14-02-2017 às 13:35 Responder

Marcus Guarani

Gostaria de saber como faço para chamar do banco Mysql as informações e como eu mostro via PHP?

14-02-2017 às 17:43 Responder

Paulo Coelho

gostaria de saber como criar um raio e quando estiver dentro desse raio eu possa ser avisado

20-02-2017 às 15:51 Responder

Homero de Castro

Olá, preciso fazer um mapa que busque as coordenadas de um modulo gps e que trace a rota percorrida por esse modulo, pode me dar alguma sugestão?

24-02-2017 às 10:31 Responder

Marcia

Boa noite. No meu caso eu tenho um cadastro de clientes com seus endereços respectivos.
Como eu posso fazer seguindo seu tutorial sem a latitude e longitude, ou seja apenas com o nome da rua, numero, bairro e cep ?

11-03-2017 às 22:14 Responder

Jose Camargo

Bravo Rodolfo!
Não vi se o post está atualizado, mas com certeza ajudará muito.
Obrigado por compartilhar seu conhecimento e tempo.
Estará em minhas preces. hehehe

14-03-2017 às 22:03 Responder

Sérgio Machado

Esse tutorial é antigo mas esta me salvando, consegui resolver o problema do agrupamento dos pontos, e conseguir integrar ao Wordpress, usando campos personalizados, quem quiser é só pedir que dou o código.

15-03-2017 às 15:44 Responder

wallace rodrigues

Parabéns pelo post, muito bom.
Amigo tentei mostrar o mapa dentro do modal no bootstrap e não funciona, alias, até funciona, só se eu dé um zoom na pagina. Obrigado

15-03-2017 às 16:05 Responder

Valéria Barbalho

Não consegui fazer esse simples exemplo, pois não consegui incluir a biblioteca jquery. Sou principiante auto didata. Eu baixei uma versão da biblioteca, que vem com o número da versão. Aí renomeei para apenas jquery e minha página não consegue carregar o arquivo, mesmo com o caminho certo. Dá esse erro:

jquery.js:9557 XMLHttpRequest cannot load file:///C:/Users/Val%C3%A9ria/Documents/AP3/js/pontos.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Voce pode me dar uma dica?
Grata,

17-03-2017 às 10:39 Responder

Cosme

Ótimo post, mais como é muito antigo, implementando como é apresentado ainda funciona ou teve muitas mudanças. E como eu faria para pegar os endereços completos de um banco de dados e apresentar no mapa os pontos relativos aos endereços?

22-03-2017 às 23:36 Responder

Rodrigo

Boa Tarde, estou tentando usar o Marker Clusterer Plus em meu mapa e não esta agrupando, da erros como se não existissem as imagens do agrupamento, alguém poderia me ajudar?

Erro:
m2.png - Failed to load resource: the server responded with a status of 404 (Not Found)
m1.png - Failed to load resource: the server responded with a status of 404 (Not Found)

24-03-2017 às 16:26 Responder

Vitoria

Olá, não está mostrando os marcadores, eu preciso fazer um trabalho e estou usando esse codigo como base algum poderia me dar uma ajuda?

29-03-2017 às 19:38 Responder

Lucas

Ótimo post, muito informativo!
Eu e uns colegas estávamos querendo fazer um aplicativo de mapa para registrar agressões. No caso, os usuários adicionariam os marcadores no local desejado, relatando o episódio. É possível fazer isso seguindo essas instruções e utilizando o phonegap?

07-04-2017 às 16:41 Responder

Fernando

Caro amigo, fiz o tutorial, mas não consigo fazer aparecer mais de 10 pontos.

Poderia me orientar? Essa limitação pode ser customizada no código ou é alguma limitação da api do google?

Obrigado!

08-04-2017 às 13:44 Responder

Carlos Eduardo Ranzi

Olá Rodolfo,
Agradeço pelo tópico. Realmente abriu horizontes. Tinha a idéia de um projeto educacional/histórico e não sabia qual a melhor modalidade. Certamente este foi um excelente pontapé inicial. A partir daqui, visitei muitos fóruns, sempre retornando para verificar algum dado.

Fiz um sistema em PHP que cadastra pontos, e por consequência infowindows, que está funcionando perfeitamente (ao menos em nível de localhost!) e o mapa está sendo gerado sem problemas.
Passei um bom tempo até conseguir incorporar o mapa no meu sistema (até então só abre em página específica para o mapa).
Ocorre que este mesmo mapa que funciona perfeitamente em página específica, não demonstra os pontos marcados quando colocado dentro de minha div. (neste caso, aparece só o mapa com a referência do local que foi apontado inicialmente.
Tem alguma idéia se por acaso há algum bloqueio do google no caso de incorporação deste tipo de situação?
Novamente obrigado pelo post. Feliz Páscoa!

14-04-2017 às 21:33 Responder

Jean Batista

Olá, primeiramente parabéns pelo post, mais eu estou querendo fazer parecido como você fez porém gostaria de inserir simbologia de transito como placas, semafaros e etc ao invés de balazinho,pode me da uma dica como faço e por onde começo, Obs, sei muito pouco de programação! heeh HELPP!!

20-04-2017 às 17:14 Responder

Afrânio

Muito bom, parabéns! Mas é possível mostrar ao usuário o local onde ele está? Tipo para indicar que há uma loja próximo dele?

15-05-2017 às 09:09 Responder

will will

oi amigo ainda esta funcional? fiz apenas as modificacoes dos pontos e adicionei a paikey e nao funcionou.obg

16-05-2017 às 23:10 Responder

Thiago

Olá
Rodolfo

Quando os pontos são unificados por estarem próximo, ficava um circulo azul no fundo agora so fica o numero
ai nem da pra ver que alí tem uma junção de pontos, como resolver isso?

18-05-2017 às 14:42 Responder

Danilo Cerne

Olá, revivendo este post estou implementei os códigos iguais ao do tutorial, porém meu mapa agrupa todos os pins, mas ao clicar sobre o agrupamento o pin (do local exato) não aparece. Por favor, pode me ajudar?

23-05-2017 às 16:39 Responder

Juliana

Obrigada pelo post, foi muito útil!

31-05-2017 às 20:42 Responder

Andeilson

Fala Rodolfo, beleza?
Cara, será que você poderia me ajudar?
Atualmente meu mapa está quase completo, porém, eu queria que o Marker abrisse mostrando foco nas regiões do Brasil (Sul, Norte, e etc).. e que calcula-se por REGIÃO, atualmente ele puxa por estado se não estou errado.


http://agfprojetos.cphost0016.servidorwebfacil.com/projetos/conif/
Seria possível?

Valeus!!

07-06-2017 às 01:41 Responder

Cosme

Não está mais administrando este canal amigo?

15-06-2017 às 09:29 Responder

Diana

ótimo conteúdo me ajudou muito, parabéns !

16-06-2017 às 15:56 Responder

Jario Nunes

Olá, preciso apenas da distância entre dois pontos, Ex. Rua X a Rua Y?
Resposta, a distância é de x km.
obrigado e parabéns pelo poste.

20-06-2017 às 11:02 Responder

Luiz Hildebrando Coutinho leal

Pra quem não ta conseguindo fazer os marcadores ficarem coloridos, ou seja, ficam aparecendo apenas os números na cor preta, é por conta da variável markerCluster, só adicionar mais um parâmetro nela, ficará assim:

var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

21-06-2017 às 22:32 Responder

VALDIR SANTOS JR

Bom dia Rodolfo
Obrigado pelas dicas!
Estou desenvolvendo um sistema web voltado prara prefeituras administrarem as demandas diárias municípias, carregando em um mapa de fundo no Google Maps onde o usuário pode escolhar algumas infraestruturas (escolas, postos de saúde, semáforos, pontes, etc.) do município que haja interesse de visualizar. Um outro colega desenvolve as rotinas no Maps.
Nossa dúvida é como nomear estes pontos sem necessidade do click no icone. Exemplo visualizamos no Maps o contorno do município e suas pequenas localidades e aglomerações, cada uma com denominação própria. Gostariamos de nomear estas localidades ao lado do icone, e claro, de acordo com o zoom
Você poderia nos informar se existe esta possibilidade.e como realizá-la?
Obrigado!!
Eng Valdir Santos Jr
valdjrabc@yahoo.com

03-08-2017 às 13:09 Responder