28 de fevereiro de 2011

Traçando rotas com a versão 3 da API do Google Maps - Parte II

Traçar rotas usando a API do Google Maps é uma tarefa relativamente simples. Para o processo básico, basta criar instâncias de dois serviços existentes na API - um que calcula as rotas (DirectionsService) e outro que as exibe (DirectionsRenderer). Além, é claro, de fornecermos o endereço de origem e o de destino (ou pares latitude/longitude que correspondam aos locais desejados). Esse processo básico foi assunto de um outro post aqui no blog, onde foi apresentado um passo a passo para esse uso da API.

Rotas onde apenas dois pontos são especificados atendem uma gama grande de situações, mas nem sempre isso é suficiente. É o que ocorre quando há uma logística mais complexa envolvida no traçado da rota, como por exemplo, quando temos um ponto de origem e outro de destino mas queremos também estabelecer locais intermediários que devem constar da rota calculada.

Na realidade, o trabalho feito no post básico sobre rotas nos deixa bem próximos de atender também a necessidade de passar por outros pontos preestabelecidos. O que vai abaixo é parte do código explicado naquele outro post, justamente o trecho que traça a rota entre dois locais dados:
var directionsService, directionsRenderer;
var enderDe, enderAte;

directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

enderDe = 'ALAMEDA SANTOS, 1000, SÃO PAULO - SP, 01418-9028';
enderAte =
'AVENIDA NAÇÕES UNIDAS, 17-17, BAURU - SP, 17013-035';

var request = {
origin:endDe,
destination:endPara,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(response);
}
});)

A variável request nesse código é do tipo DirectionsRequest. De acordo com a documentação dessa classe, além das propriedades utilizadas no exemplo básico acima, ela possui uma outra chamada waypoints. A propriedade waypoints é um array de objetos do tipo DirectionsWaypoint, cada um contendo informações sobre um endereço intermediário que deve constar do trajeto final. Cada endereço pode ser informado como um texto - exatamente como fazemos para definir os pontos de origem e destino - ou ainda o par latidude/longitude que representa o local por onde a rota deve passar.

Com isso, podemos montar um novo exemplo para traçar a rota entre dois locais, passando obrigatoriamente por uma lista de outros locais, cujos endereços são fornecidos. É preciso apenas passar uma lista desses endereços usando a propriedade waypoints do objeto request:
var directionsService, directionsRenderer;
var enderDe, enderAte;

directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

/* Endereço de origem e o de destino. */
enderDe = 'ALAMEDA SANTOS, 1000, SÃO PAULO - SP, 01418-9028';
enderAte =
'AVENIDA NAÇÕES UNIDAS, 17-17, BAURU - SP, 17013-035';

/* Locais intermediários por onde a rota deve passar. */
var local1, local, local3;
local1 = {location:'AV. 11 DE JUNHO, 52, SÃO PAULO - SP'};
local2 = {location:'RUA CEL. MURSA, 10, SÃO PAULO - SP'};
local3 = {location:'RUA CAMPOS SALLES, 214, BOTUCATU - SP'};

var request = {
origin:endDe,
destination:endPara,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: new Array (local1, local2, local3)
};

Acrescentando esse valor do waypoints ao exemplo básico publicado no outro post, temos o mapa e a rota abaixo:

O HTML com este exemplo completo pode ser acessado neste link.

Veja que os endereços da lista não precisam estar na mesma cidade. Outro aspecto importante a se destacar é que a rota é traçada a partir do local de origem, passando pelos pontos extras na ordem exata em que eles foram incluídos na lista. Isto é, o serviço da API que traça as rotas não faz qualquer inferência a respeito da melhor ordem a seguir para obter a rota mais curta. Portanto, quando essa questão for um problema, é preciso prestar atenção ao construir o array waypoints para evitar que a rota resultante seja irracional.

Por fim, como a propriedade waypoints é do tipo Array, todos os métodos e propriedades dessa classe são aplicáveis, inclusive push, que permite acrescentar novos itens ao array depois que ele foi instanciado:
request.waypoints.push (
{location: 'AV. RODRIGUES ALVES, 14-10, BAURU - SP' }
);

A documentação para a classe Array está disponível neste link.

Mais Informações
Básico sobre rotas com a versão 3 da API do Google Maps, Documentação da classe DirectionsRequest, Documentação da classe DirectionsWaypoint

46 comentários :

Anônimo disse...

Muito bom essa explicação ... estou faz dois dias tentando aprender a fazer mapas e esse exemplo ajudou bastante. Consegui adiantar muita coisa mas ainda não consigo remover os marcadores. É possível remover os marcadores desse seu exemplo acima e só mostrar a rota em azul??Se sim, como?

Obrigado, joão henrique

Luís Gustavo Fabbro disse...

João

Há uma propriedade do DirectionsRenderer que permite configurar se os marcadores automáticos serão desenhados ou não. O nome dela é suppressMarkers; ajustando-a com valor true, os marcadores serão suprimidos do mapa.

mapDisplay = new
google.maps.DirectionsRenderer();
mapDisplay.suppressMarkers = true;

Todos os mapas que compartilharem esse renderer serão exibidos sem os marcadores. Lembre-se também que você pode criar marcadores manualmente mas esses continuarão a ser exibidos, não importa o valor de suppressMarkers.

Anônimo disse...

Muito obrigado amigo. Está funcionando agora como queria.

joão henrique

virgilio solano disse...

Depois de ter que implementar dessa maneira virando a documentação, fui pesquisar se tinha a sequência do post 2, depois que eu virei a noite acabei encontrando a versão 3 do tutorial, ainda bem que aprendi muito lendo a documentação do maps, pelo menos valeu as hrs acordadas,
parabens pelo post

Augusto disse...

Os dois artigos foram excelentes, me ajudou a concluir meu projeto, porém me surgiu uma outra tarefa que estou meio penando para conseguir fazer, e gostaria de saber se vc já fez algo do gênero.

Eu tenho 1 endereço de origem e 1000 origens de destinatário, e eu só vou precisar desenhar no mapa somente a primeira OU às 3 rotas mas próximas.

Já pesquise algumas coisas como calcular rota, usar o getdistance(), mais mesmo assim tá dificil.

E novamente parabéns pelo post.

Luís Gustavo Fabbro disse...

Augusto

Você pode usar o retorno da função route do directionsService para obter a distância entre a origem e o destino de cada rota e determinar quais são as 3 mais curtas.

Veja na documentação que o parâmetro response da função que é passada para o route é do tipo DirectionsResult, que dá acesso à propriedade legs, um array de DirectionsLeg contendo informações sobre cada trecho da rota - incluindo sua distância em metros. Basta somar o comprimento de cada trecho pra obter a distância total do trajeto.

[]s

Augusto disse...

Vlw, Luiz vou seguir suas instruções, dando certo ou não, eu retorno aqui para dizer.

flws.

Luís Gustavo Fabbro disse...

Mais detalhes sobre essa implementação podem ser encontrados no seguinte post :
Informações sobre rotas com a versão 3 da API do Google Maps.

gildo chagas disse...

Ola Luis bom dia.

É isso que estava procurando.

Abraço!

Gildo Chagas

gildo chagas disse...

Boa tarde Luis.

existe alguma forma de eu conseguir a latitude e longitude de um determinado endereço usando essa API?

Luís Gustavo Fabbro disse...

Gildo

Dê uma olhada no post Usando a versão 3 da API do Google Maps. Ele mostra o básico sobre endereços na API do Google Maps.

Veja que a função do Geocoder que trata os resultados da busca de um endereço recebe como parâmetro um array de GeocoderResult. Uma das propriedades do Result é o par latitude/longitude do endereço encontrado.

[]s

Unknown disse...

Luis Gustavo

Primeiramente Parabéns pelos post, tem me ajudado muito em minhas aplicações.
Sou novo nessa área e estou com uma dúvida. Esse código abaixo, cria alguns Marker no mapa baseando-se pela Latitude e Longitude. É possível Traçar Rota entre esses pontos? Qual a melhor forma de fazer isso?
Desde já grato.

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map = new GMap2(document.getElementById('map'), { size: new GSize(1140,600) })
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-23.671773,-46.622660), 12);

var marker1 = new GMarker(new GLatLng(-23.669961,-46.576716));
map.addOverlay(marker1);
var marker2 = new GMarker(new GLatLng(-23.665178,-46.569428));
map.addOverlay(marker2);
var marker3 = new GMarker(new GLatLng(-23.660140,-46.556620));
map.addOverlay(marker3);
var marker4 = new GMarker(new GLatLng(-23.652535,-46.548611));
map.addOverlay(marker4);
var marker5 = new GMarker(new GLatLng(-23.645081,-46.541861));
map.addOverlay(marker5);
var marker6 = new GMarker(new GLatLng(-23.640455,-46.534018));
map.addOverlay(marker6);

Luís Gustavo Fabbro disse...

Luiz

O exemplo no post usa a propriedade waypoints com endereços textuais porque é mais fácil compreender o que está acontencendo. Mas, se olhar a documentação dela, verá que ela admite tanto um endereço textual quanto um objeto do tipo Latitude/Longitude.

Como você possui uma lista de pares Latitude/Longitude, pode adaptar o exemplo e passar essas informações no lugar dos endereços textuais.

var request = {
origin:endDe,
destination:endAte,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: new Array (
{location: new google.maps.LatLng(-23.669961,-46.576716) },
{location: new google.maps.LatLng(-23.665178,-46.569428) },
{location: new google.maps.LatLng(-23.660140,-46.556620) },
{location: new google.maps.LatLng(-23.652535,-46.548611) },
{location: new google.maps.LatLng(-23.645081,-46.541861) }
)
};

Os valores origin e destination também podem ser passados como Latitude/Longitude. Na versão 3 da API, esses pares são objetos do tipo google.maps.LatLng, como mostrado acima.

[]s

Unknown disse...

Luis Gustavo, Obrigado pela atenção no post anterior.
Como falei para você minha inexperiência nessa area, estou com esse código (abaixo), ele cria o mapa porem não cria os Marker. O que falta nele? Desde já grato

function initialize()
{
//Cria o Mapa com o Local Padrão
var map;
var directionsService = new google.maps.DirectionsService();
var myOptions = {zoom: 13, center: new google.maps.LatLng(-23.671773,-46.622660), mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//Locais a serem traçados no mapa
var request = {
origin: Origem,
destination: Destino,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: new Array (
{location: new google.maps.LatLng(-23.669961,-46.576716) },
{location: new google.maps.LatLng(-23.665178,-46.569428) },
{location: new google.maps.LatLng(-23.660140,-46.556620) },
{location: new google.maps.LatLng(-23.652535,-46.548611) },
{location: new google.maps.LatLng(-23.645081,-46.541861) }
) };

}

Abixo disso tenho apenas body onload="initialize()".
Não sei como seguir daqui pra frente, já que todos as LatLng estão armazenadas no array.

Luís Gustavo Fabbro disse...

Luiz

O código que vc postou apenas traça a rota; para marcar locais no mapa, você deve criar instâncias do objeto Marker. Ex:
marker = new google.maps.Marker(
{map: map,
position: Origem,
animation: google.maps.Animation.DROP,
visible:true
}
);

[]s

Unknown disse...

Ola Luís, boa noite.
Estou tentando usar seu codigo para calcular apenas a distancia de 2 cidades no globo, porém nao estou tendo sucesso. Alguma dica ??

Luís Gustavo Fabbro disse...

Jilvan

Olhe o post Informações sobre rotas com a versão 3 da API do Google Maps. Ele mostra como calcular a distância total de trajetos - mesmo em rotas simples, com apenas 2 pontos. O post mostra também que não é obrigatório desenhar a rota num mapa para obter essas informações.

[]

JRA disse...

Meu nome é josé, email: jromeci@hotmail.comboa noite gente estive lendo o post, e quero saber se é possivel desenvolver uma rota utilizando diversos pontos (ex 50 endereços) e obter um itinerário mais curto e objetivo fornecendo o ponto inicial e final. Alguem pode me ajudar.

Luís Gustavo Fabbro disse...

José

Há uma propriedade da requisição chamada optimizeWaypoints que, qdo informada como true, faz com que os pontos de parada do waypoints sejam ordenados automaticamente para produzir o trajeto mais curto, de acordo com a solução para o problema do Caixeiro Viajante. Há um exemplo neste link.

Ps. Acho que na versão gratuita do Google Maps há restrição para a qtde de waypoints numa única requisição; confirme isso antes de tentar usar numa solução profissional com tantos pontos intermediários.

[]s

Unknown disse...

Estou aprendendo muito com seus artigos a utilização do API maps, mas o que estou precisando é exatamente o que este artigo descreve acrescido de permitir trabalhar com marcações ao longo de rotas dentro de um raio de afastamento da rota controlado. resumindo, seria esse artigo trabalhando em conjunto com esse artigo http://balaiotecnologico.blogspot.com.br/2012/10/trabalhando-com-marcacoes-em-mapas-com.html mas ao inves de ser em um ponto fixo seria ao longo de toda a rota.

me sugere algo?

Luís Gustavo Fabbro disse...

Felipe

Que tipo de dificuldade você encontrou para reunir numa única solução o conteúdo dos dois posts ?

[]s

Unknown disse...

Luís,

uma possibilidade seria criar um array com pares de coordenadas ao longo da rota para que eu pudesse procurar os estabelecimentos próximos da rota essa busca seria feita em um banco de dados mysql e o calculo seria baseado na equacão haversine o artigo seguinte descreve de forma simples isso https://developers.google.com/maps/articles/phpsqlsearch_v3?hl=pt-br. o problema é justamente ter esse array com um conjunto de pares de coordenadas contidas na rota traçada (não sei se isso é possível) teria algo nessa plicação que desse esse retorno? ou outra solução ideia?

Luís Gustavo Fabbro disse...

Felipe

Será um trabalho manual mas você terá que popular o banco de dados com os pontos de interesse possíveis de serem mostrados. A outra parte do trabalho é descobrir em tempo de execução quais desses pontos estão próximos à rota traçada.

Quando você pede para traçar uma rota, você estipula pontos de origem e destino, podendo eventualmente adicionar pontos de parada (waypoints) ao trajeto. Em relação a esses pontos conhecidos você até conseguirá aplicar a haversine. Mas, pelo que entendi, você também quer acrescentar marcadores a pontos ao longo do trajeto, independendo se esses pontos foram ou não adicionados ao waypoints.

Não olhei a fundo esse aspecto da API mas talvez você consiga obter o par latitude/longitude na resposta de um clique no mapa ou em algum ponto da rota e usar essa informação para obter os pontos de interesse próximos registrados no DB. Mas, dependendo do seu objetivo, mesmo esse comportamento pode não ser o ideal.

[]s

Unknown disse...

Luís,

Realmente aplicar o haversine nos pontos de origem, chegada e waypoints é simples, desde que, como você falou, eu tenha um banco de dados populados com os pontos de interesse.

Mas não seria suficiente analisar somente esses pontos, teria que identificar pontos (lat/log) ao longo da rota, talvez com alguns espaçamentos de 5 em 5, 10 em 10 km e assim identificar todos os pontos de interesse próximo a rota desenhada.

E, por fim, apesar da solução do clique ser interessante não alcançaria meu objetivo de ter uma visualização plena onde se possa ter uma comparabilidade dos melhores pontos.

Portanto, continuarei a minha saga, mas caso tenha algum estalo fique a vontade de me contactar felipe_rezende@live.com.

Abs.

Evandro disse...

Parabéns pelo post, mas o que quero mesmo não estou encontrando. Sou vendedor e visito em média 30 clientes por dia, até hoje não consigo fazer uma rota eficaz para economizar tempo e sempre acabo fazendo um zigue-zague desnecessário. Se eu colocar 30 endereços o google não consegue organizar isso com a melhor rota possível entre eles ? Grato.

Luís Gustavo Fabbro disse...

Evandro

Há uma propriedade da requisição chamada optimizeWaypoints que, qdo informada como true, faz com que os pontos de parada do waypoints sejam ordenados automaticamente para produzir o trajeto mais curto, de acordo com a solução para o problema do Caixeiro Viajante. Há um exemplo neste link.

[]s

Evandro disse...

Maravilha, deu certo.. mas não consegui colocar mais que 8 Waypoints, após isso ele não calcula a rota. Será que estou fazendo algo errado ou tem esse limite ?

Luís Gustavo Fabbro disse...

Evandro

Há restrições sim para uso gratuito, embora eu não tenha encontrado informações especificas sobre o waypoints. Veja o FAQ para mais detalhes a respeito das restrições de uso. O endereço é https://developers.google.com/maps/faq#usagelimits.

[]s

Tiago disse...

Luís, boa tarde!
Estou seguindo o API e passo a passo do seu Post, estou passando minha Origem - Destino, e o outros locais (waypoints) a partir de formulário .php onde o usuário que passa seus locais, porém não consigo deixar os waypoints vazios. Como posso fazer isso?
Parabéns pelo post!
Tiago

Luís Gustavo Fabbro disse...

Tiago

Que tipo de problema você teve para deixar o waypoints vazio? Houve alguma mensagem de erro?

Por ser um Array, o waypoints pode ser zerado no javascript através de sua propriedade lenght:
request.waypoints.length = 0;

Você ainda pode declará-lo vazio no objeto request. Simplesmente construa o Array sem parâmetros:
var request = {
origin:endDe,
destination:endPara,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: new Array ()
};

[]s

MrDiniz disse...

Cara... primeiramente parabéns pela iniciativa.. não existem muitos lugares que explicam detalhadamente a utilização da API do google maps...

Eu estou tentando passar lat e longitude para o origin mas não está dando certo... minha função:
function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

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

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

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

directionsDisplay.setMap(map);

var url = "./arq/data.xml";
downloadUrl(url, function(data) {
var xmlDoc = xmlParse(data);
var records = xmlDoc.getElementsByTagName("marker");

for (var i = 0; i < records.length; i++) {
var rec = records[i];

var name = rec.getAttribute("descr");
var lat = parseFloat(rec.getAttribute("lat"));
var lng = parseFloat(rec.getAttribute("lng"));

var pt = new google.maps.LatLng(lat, lng);
var start;
var end;
if(i==0){
start = pt;
alert(start);
}
if(i==(records.length-1)){
end = pt;
alert(end);
}


var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});


var html = name;

createMarker(pt,html,map);



}

});

}

Luís Gustavo Fabbro disse...

MrDiniz

A parte que mostra o par latitude/longitude como centro do mapa desenhado está correto. Que tipo de problema deu pra você? Há mensagem de erro? Quais os sintomas?

PS: Como o código não está completo (faltam algumas funções e outros recursos), não consegui examinar o resto...

[]s

MrDiniz disse...

Oi Luís... você quer que eu te mande por email? para não polir seu site?

Luís Gustavo Fabbro disse...

Você pode enviar outros recursos e informações para o email do blog. Não se esqueça de detalhar o problema que você encontrou. O endereço é
balaiotecnologico@gmail.com
.
[]s

MrDiniz disse...

Olá Luís... te enviei ok? obrigado mais uma vez pela atenção

Luís Gustavo Fabbro disse...

Rafael

Como seu XML é um recurso no servidor, a URL para ele deve refletir a hierarquia de pastas do recurso do seu servidor. Testando localmente, me bastou informar o nome da pasta e do arquivo :
var url = "arquivoMapaGoogle/data.xml";
downloadUrl(url, function(data) {
// ...
}

Caso queira (ou necessite) montar a URL inteira, pode fazer uma composição baseada na URL da página atual, representada pela variável document.URL, nativa no javascritpt.

As mesmas considerações valem para a URL das imagens que você indicou na criação dos marcadores.

MrDiniz disse...

Oi Luís, mais uma vez obrigado pelo retorno... Mas não consegui... tentei usar o document.URL mas ele trás cum caminho que não é útil para minha utilidade, e não sei como gravar o arquivo dentro do WebContent para poder ler o arquivo de lá... mas obrigado mesmo assim

Luís Gustavo Fabbro disse...

Provavelmente você terá que criar um mecanismo para diferenciar seu ambiente de desenvolvimento do de produção, visto que a organização em ambos parece ser ligeiramente diferente....

[]s

MrDiniz disse...

Consegui Luíz.. usei JSTL e consegui passar as coordenadas... ufa.. muito obrigado mesmo pela atenção e disposição em me ajudar... eu te mandei aquela dúvida dos marcadores por email... obrigado mesmo.

MrDiniz disse...

Oi Luís consegui com o polilyne... obrigado...

MrDiniz disse...

Eu só precisava saber se você soubesse me informar, como eu coloco os endereços na função de click, em vários markers, pois eu só consegui colocar um dado, e mostrar na tela as rotas de um ponto a outro.. tentei utilizar o método de directionsService, mas não consegui adaptar para o que eu tenho que são pontos em lugares até dentro de casas.. com essa função ele traça rotas e joga os marcadores para a rua:

Assim coloquei a função de click:
var infowindow = new google.maps.InfoWindow({
content: info,

});

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

Agora não sei como adicionar o endereço no infowindow e como mostrar as direções de um ponto à outro.. com o código abaixo sem ser traçando a rota:

var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var rota = i+1;
summaryPanel.innerHTML += '
Rota: '+ rota + '
De:
';
summaryPanel.innerHTML += route.legs[i].start_address + '
Para:
';
summaryPanel.innerHTML += route.legs[i].end_address + '
';
summaryPanel.innerHTML += 'Distância: ' + '
';
summaryPanel.innerHTML += route.legs[i].distance.text + '

';
}
}
});

Luís Gustavo Fabbro disse...

Rafael

As rotas são sempre traçadas usando vias públicas; você pode burlar isso traçando suas próprias linhas por sobre o mapa mas então terá que traçar tudo manualmente (como mostrado neste outro post).

Para impedir o usuário de escolher outra rota, instrua a requisição a não providenciar rotas alternativas usando a propriedade provideRouteAlternatives como false.

Não entendi o que você quer fazer com o clique do marcador mas o jeito de forçar pontos numa rota é incluir tais pontos no waypoints, como mostrado no post.

[]s

MrDiniz disse...

Olá luís obrigado pelo retorno... estarei lendo o que passou..
Sobre os marcadores é assim, eu vou ler uma lista de coordendadas que serão marcadores no mapa, ai quando a pessoa clicar em cima, aparecer dentro do infowindow o endereço...

tentei usar a função para converter coordenadas em endereço:

function codeLatLng(){
if (geocoder){

geocoder.geocode({'latLng': pontos()}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
for (var i = 0; i <= locations.length; i++) {

summaryPanel.innerHTML += '
Sinal: ' + datas[i] + '
';
summaryPanel.innerHTML+=results[0].formatted_address;
summaryPanel.innerHTML += '
';
}

}
});

}
}

essa função to colocando na tela (que tbm preciso fazer) mas precisava tbm quando clicar no marcador,
mais não está funcionando direito, pois não sei como colocar em cada marcador isso...


minha função de criar marcador:
function createMarker(point,info,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
});

var infowindow = new google.maps.InfoWindow({
content: "Dispositivo: " + info + "
Endereço: "

});

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

}

MrDiniz disse...

Consegui adicionar no infowindow, mas não listar na tela os endereços..

google.maps.event.addListener(marker, 'click', function() {

endereco(info,this.position);

infowindow.open(map,this);

});


function endereco(info,point){

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

geocoder.geocode({'latLng': point}, function(results, status){

if (status == google.maps.GeocoderStatus.OK){

infowindow.setContent('Coordenadas: ' + point + '
Dispositivo: ' + info + '
Endereço: ' + results[0].formatted_address);

} else {


}

});

}

Luís Gustavo Fabbro disse...

Rafael

No código que vc enviou para o email do blog não existe uma variável com o nome infowindow e isso está ocasionando erro no javascript. Ao substituir pelo nome correto (infoWindow, com o w maiúsculo), declarado no começo do código, a sua função endereco passou a operar como esperado.

[]s

MrDiniz disse...

Obrigado Luíz, e me desculpe por ter te incomodado tanto... funcionou... obrigado mesmo

Postar um comentário

OBS: Os comentários enviados a este Blog são submetidos a moderação. Por isso, eles serão publicados somente após aprovação.

Observação: somente um membro deste blog pode postar um comentário.