[Resolvido] Google Maps

David Borges · Abril 28, 2011

Galera, procurei um bucado pelo google mas não consegui encontrar o que preciso.

Tenho apenas o endereço que preciso marcar no mapa, não tenho a latitude e longitude do local.

Preciso marcar o mapa com esse endereço e caso o usuário precise mostrar a rota para o novo endereço.

De tudo que achei, o que mais se aproximou do que preciso foi este link, porém reparem que é api v2 e como ela está sendo descontinuada, estou à procura de algo já na versão 3.

Alguém tem uma indicação de exemplo para eu poder me apoiar??

Muito obrigado!!

Paulo André · Abril 29, 2011

Se te ajudar, fiz um tutorial de como traçar rota utilizando a API 3 do Google Maps. :)

Para você fazer a geocodificação reversa, aqui você tem um exemplo de como fazer em javascript mesmo.

David Borges · Abril 29, 2011

Paulo, muito obrigado!! deu certinho!!

Eu usei seu tuto + o guia do google para montar o exemplo abaixo.... ele funciona certinho, porém não estou conseguindo adicionar a infowindow no marcador... pode me ajduar a ver onde estou errando?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
 var directionDisplay;
 var directionsService = new google.maps.DirectionsService();
 var map;

 function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var sao_paulo = new google.maps.LatLng(-122.41175,37.771008);

var infoWindow = new google.maps.InfoWindow({maxWidth: 200});

var myOptions = {
     zoom:7,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: sao_paulo
   }



 geocoder = new google.maps.Geocoder();

 ///--------------------------------------------------------



			var address = "Sao Paulo, Brasil"
			geocoder.geocode( { 'address': address}, 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,
			title: 'Pique Academia - Sede 2'

				        });
				      } else {
				        alert("Não foi possivel localizar o local, erro: " + status);
				      }
				    });



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



directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById("painelDirecao"));

google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('texto teste');
infoWindow.open(map, marker);
}); 








 }

 function calcRoute() {
   var start = document.getElementById("start").value;
   var end = document.getElementById("end").value;
   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);
     }
   });
 }
</script>
</head>
<body onload="initialize()">
<div id="printPanel">
<div>

<b>Start: </b>
<select id="start" onchange="calcRoute();">
 <option value="">Vazio</option>
 <option value="Av Murchid Homsi, 1404, Sao Jose do Rio Preto, sp, brasil">Av Murchid Homsi, 1404, Sao Jose do Rio Preto, sp</option>


</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
<option value="">Vazio</option>
 <option value="Rua Augusto Signorini, 628, Sao Jose do Rio Preto, sp, brasil">Rua Augusto Signorini, 628, Sao Jose do Rio Preto, sp</option>

</select>
</div>
 <div id="map_canvas" style="margin-top:25px;margin-right:340px;"></div>
 <div id="painelDirecao" style="float:right;width:320px;"></div>
</div>
</body>
</html>

Paulo André · Maio 1, 2011

Olá David,

acontece que, como o Javascript é assíncrono, a geocodificação foi feita após terminas todos os processos da função initialize(), já que foi feita uma solicitação ao servidor da Google para então retornar o status da sua busca por "Sao Paulo, Brasil".

Então você precisará atribuir o balão de informação dentro desta função de geocodificação, após retornar o status OK.

var address = "Sao Paulo, Brasil"
geocoder.geocode( {
'address' : address
}, 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,
		title : 'Pique Academia - Sede 2'

	});

	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent('texto teste');
		infoWindow.open(map, marker);
	});
} else {
	alert("Não foi possivel localizar o local, erro: " + status);
}
});

[]'s ;)

David Borges · Maio 2, 2011

putz Paulo... mtu obrigado pela explicação e pelo exemplo!! RESOLVIDO!!

Pessoal, se alguém precisar do código, inclusive com mais de um marcador no mapa.

Aí é só fazer um loop com todos os seus locais e descrições.

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
 var directionDisplay;
 var directionsService = new google.maps.DirectionsService();
 var map;

 function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var sao_paulo = new google.maps.LatLng(-122.41175,37.771008);

var infoWindow = new google.maps.InfoWindow({maxWidth: 200});

var myOptions = {
     zoom:7,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: sao_paulo
   }



 geocoder = new google.maps.Geocoder();

 ///--------------------------------------------------------



var address = "Sao Paulo, Brasil"
geocoder.geocode( {
       'address' : address
}, 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,
                       title : 'Pique Academia - Sede 2'

               });

               google.maps.event.addListener(marker, 'click', function() {
                       infoWindow.setContent('texto teste');
                       infoWindow.open(map, marker);
               });
       } else {
               alert("Não foi possivel localizar o local, erro: " + status);
       }
});



var address = "Campinas, Brasil"
geocoder.geocode( {
       'address' : address
}, 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,
                       title : 'Pique Academia - Sede 2'

               });

               google.maps.event.addListener(marker, 'click', function() {
                       infoWindow.setContent('texto teste 2');
                       infoWindow.open(map, marker);
               });
       } else {
               alert("Não foi possivel localizar o local, erro: " + status);
       }
});



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



directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById("painelDirecao"));


 }

 function calcRoute() {
   var start = document.getElementById("start").value;
   var end = document.getElementById("end").value;
   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);
     }
   });
 }
</script>
</head>
<body onLoad="initialize()">
<div id="printPanel">
<div>

<b>Start: </b>
<select id="start" onChange="calcRoute();">
 <option value="">Vazio</option>
 <option value="Av Murchid Homsi, 1404, Sao Jose do Rio Preto, sp, brasil">Av Murchid Homsi, 1404, Sao Jose do Rio Preto, sp</option>


</select>
<b>End: </b>
<select id="end" onChange="calcRoute();">
<option value="">Vazio</option>
 <option value="Rua Augusto Signorini, 628, Sao Jose do Rio Preto, sp, brasil">Rua Augusto Signorini, 628, Sao Jose do Rio Preto, sp</option>

</select>
</div>
 <div id="map_canvas" style="margin-top:25px;margin-right:340px;"></div>
 <div id="painelDirecao" style="float:right;width:320px;"></div>
</div>
</body>
</html>

allangaspar · Dezembro 9, 2014

Olá bom dia,

pessoal estou com um problema parecido, só que um pouco mais complexo se alguém puder me ajudar, estou montando um mapa multi-rotas onde o meu JS é o seguinte:

var directionsService = new google.maps.DirectionsService();

var num, map, data;

var requestArray = [], renderArray = [];

var id = [];

var clientes = [];

// A matriz JSON contendo algumas pessoas / rotas e os destinos / stops

//var jsonArray = {

// "Person 1": ["(-3.845760, -38.497608)", "(-3.7359344,-38.4870534)", "(-3.7346932,-38.4853306)", "(-3.7228843,-38.4826676)", "(-3.723337,-38.4871833)", "(-3.845760, -38.497608)"],

// "Person 2": ["Fortaleza", "Aquiraz", "Cascavel-CE", "Beberibe", "Aracati"],

// "Person 3": ["Fortaleza", "Caninde", "Boa Viagem", "Taua"]

//}

// 16 cores padrão para polilinhas navegação

var colourArray = ['grey', 'red', 'fuchsia', 'black', 'yellow', 'white', 'lime', 'maroon', 'purple', 'aqua', 'green', 'silver', 'olive', 'blue', 'navy', 'teal'];

// Vamos fazer uma série de pedidos que se tornarão polylines individuais no mapa.

function generateRequests(jsonArray) {

requestArray = [];

for (var route in jsonArray) {

// Esta empresa lida com uma das pessoas / rotas.

// Em algum lugar para armazenar os waypoints

var waypts = [];

// 'start' e 'finish' será a origem e destino rotas

var start, finish

// LASTPOINT é usado para garantir que pontos de interesse duplicados são retirados

var lastpoint

data = jsonArray[route].Pontos;

clientes = jsonArray[route].Clientes;

id.push({"id":parseInt(jsonArray[route].Id)});

limit = data.length

for (var waypoint = 0; waypoint < limit; waypoint++) {

if (data[waypoint] === lastpoint) {

continue;

}

// Prepare o LASTPOINT para o próximo ciclo

lastpoint = data[waypoint]

// Adicione isto ao waypoint para a matriz para fazer o pedido

waypts.push({

location: data[waypoint],

//name: clientes[waypoint],

stopover: true

});

}

// Pegue o primeiro ponto para o 'start' local

start = (waypts.shift()).location;

// Pegue o último waypoint para o uso como um 'finish' local

finish = waypts.pop();

if (finish === undefined) {

// A menos que não havia local de chegada, por algum motivo?

finish = start;

} else {

finish = finish.location;

}

// Vamos criar o objeto de solicitação do Google Maps

var request = {

origin: start,

destination: finish,

waypoints: waypts,

travelMode: google.maps.TravelMode.DRIVING

};

// e salve-o em nosso requestArray

requestArray.push({ "route": route, "request": request });

}

processRequests();

}

function processRequests() {

// contador para acompanhar a apresentação do pedido e processar um de cada vez;

var i = 0;

// Usado para enviar a solicitação de 'i'

function submitRequest() {

directionsService.route(requestArray.request, directionResults);

}

// Usado como callback para a solicitação acima para a corrente 'i'

function directionResults(result, status) {

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

var teste = clientes.clientes;

// Criar um DirectionsRenderer única 'i'

renderArray = new google.maps.DirectionsRenderer();

renderArray.setMap(map);

renderArray.setOptions({

preserveViewport: true,

suppressInfoWindows: false,

suppressMarkers: false,

polylineOptions: {

strokeWeight: 4,

strokeOpacity: 0.8,

strokeColor: colourArray[id.id-1]

},

markerOptions: {

icon: 'img/marcador.png',

title:clientes.toString()

//icon: 'img/marcador.png',

//path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,

// scale: 3,

// strokeColor: colourArray

},

});

// Utilize este novo processador com o resultado

renderArray.setDirections(result);

// e começar a próxima solicitação

nextRequest();

}

function nextRequest() {

// Incrementar o contador

i++;

// Certifique-se de que ainda estão à espera de um pedido

if (i >= requestArray.length) {

// Sem mais o que fazer

return;

}

// Enviar um outro pedido

submitRequest();

}

// Este pedido é apenas para lançar todo o processo

submitRequest();

}

// chamando OnLoad

function init(jsonData) {

// Alguns configuração do mapa básica (da documentação da API)

var mapOptions = {

center: new google.maps.LatLng(-3.7191666667, -38.5438888889),

zoom: 8,

mapTypeControl: false,

streetViewControl: false,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

// Inicie a tomada de pedido

generateRequests(jsonData)

}

$(function () {

//mudar para o endereço de produção

//http://intranet/IN0189E.aspx

$.get("http://localhost:3211/IN0189e.aspx", function (data) {

init(data);

});

so que como estou trabalhando com arrays de requisições to meio perdido de como criar um marcador personalizado alguem poderia me dar uma dica???

Octavio Cerciari · Maio 29, 2017

Olá amigo, estou fazendo dessa mesma maneira, você conseguiu??

Entrar

Arquivado

[Resolvido] Google Maps

Recommended Posts

David Borges 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo André 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

David Borges 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo André 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

David Borges 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

allangaspar 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Octavio Cerciari 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante