O escreveu (ou copiou) isso no dia 04/08/2009 Voltar

Ao fazer um site hoje precisei utilizar esse recurso bacana da API do google maps, o como chegar/traçar rotas é bem mais fácil do que parece e o engraçado é que não tem muitos tutoriais sobre isso.

No Newsmade (blog) hávia uma postagem do Deividy sobre como chegar porem estava bem, bem desatualizada, ainda utilizava aquela chave da api v2, então resolvi atualizar a postagem para API v3, honestamente como já disse é bem simples utilizar, segue o script:

 

<!DOCTYPE html> 
<html> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<style type="text/css"> 
		* {  margin: 0px; padding: 0px }
		form input{
			
		}
		#mapview{ visibility: hidden;}
	</style>

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<title>Colocando um como chegar/traçar rotas do google maps em seu site, por newmsade</title>

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript"> 
		var directionDisplay;
		var directionsService = new google.maps.DirectionsService();
		var map;

		function initialize() {
			directionsDisplay = new google.maps.DirectionsRenderer();
			var myLatlng = new google.maps.LatLng();
			
			var myOptions = {
				zoom:7,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: myLatlng
			}

			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			directionsDisplay.setMap(map);
			directionsDisplay.setPanel(document.getElementById("directionsPanel"));
		}

		function calcRoute() {
			var start = document.getElementById("endereco").value;
			var end = document.getElementById("destino").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);
				} else {
					alert(status);
				}

				document.getElementById('mapview').style.visibility = 'visible';
			});
		}
	</script>
</head> 
<body onload="initialize()">

<form action="javascript: void(0);" onSubmit="calcRoute()">
	<div>
		Destino: <input type="text" size="50" value="Rua João Pedroso - SBO" id="destino" />
	</div>
	
	<div>
		Origem: <input type="text" size="50" value="americana" id="endereco" />
	</div>
	<button type="submit">Como chegar?</button>
</form>

<div id="mapview">
	<div id="map_canvas" style="float: left; width: 500px; height: 340px;"></div>
	<div class="direcao" style="float: left; width: 500px; height: 340px; overflow: scroll;">
		<div id="directionsPanel" style="width: 480px;height 100px"></div>
	</div>
</div>
</body> 
</html>

Só explicando, existem dois inputs um para destino e outro para origem (sério... não diga), caso você não queira mostrar o destino é só mudar o campo para type=hidden...

com esse simples scripts suas páginas de contato ficaram bem mais bacana

Comentar

Quase todos direitos reservados a Newsmade
| Newsmade