danjesus/Google maps Mashup.html

## Google maps Mashup.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Directions Mashup On LQDI Design & Interação  :: @dannjesus </title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style type="text/css">

*{font:13px helvetica;}
li{	display:inline-block;}
li a{ height:20px; line-height:20px; text-decoration:none; font-size:15px; color:blue;}
li a:hover{ text-decoration:underline;}
.container { width:800px; margin: 20px auto;}
.maps{ float:left;width:300px; height:300px; border:5px solid #ccc; outline:1px inset #eee; margin-right:5px;}
.panel { float:left;height:280px; overflow:auto; }

</style>

<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var origin = new google.maps.LatLng(-23,6819, -46,6585);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: origin
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }

  function calcDriving() {
    var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
    var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
    var request = {
        origin:Oend,
        destination:Dend,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

  function calcPublic() {
    var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
    var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
    var request = {
        origin:Oend,
        destination:Dend,
        travelMode: google.maps.DirectionsTravelMode.PUBLIC
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

  function calcWalking() {
    var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
    var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
    var request = {
        origin:Oend,
        destination:Dend,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

  $(function(){

  	initialize();
  	calcDriving();

  	$('li a').click(function(){

  		var service = $(this).attr('href');

  		switch(service){
  			case "#driving": calcDriving(); break;
  			case "#public": calcPublic(); break;
  			case "#walking": calcWalking(); break;
  		}
  	});

  });
</script>
</head>
<body>

<div class="container">

<!-- LOAD MAP -->
<div id="map_canvas" class="maps"></div>

 <!-- NAV BAR -->
 <ul>
	<li class="active"> <a href="#driving">DRIVING</a> </li>
	<li> <a href="#walking">WALKING</a> </li>
 </ul>

 <!-- LOAD DIRECTIONS -->
 <div id="directionsPanel" class="panel"></div>
</div>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Directions Mashup On LQDI Design & Interação :: @dannjesus </title>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<style type="text/css">

	*{font:13px helvetica;}
	li{ display:inline-block;}
	li a{ height:20px; line-height:20px; text-decoration:none; font-size:15px; color:blue;}
	li a:hover{ text-decoration:underline;}
	.container { width:800px; margin: 20px auto;}
	.maps{ float:left;width:300px; height:300px; border:5px solid #ccc; outline:1px inset #eee; margin-right:5px;}
	.panel { float:left;height:280px; overflow:auto; }

	</style>

	<script type="text/javascript">
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var map;

	function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var origin = new google.maps.LatLng(-23,6819, -46,6585);
	var myOptions = {
	zoom:7,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	center: origin
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("directionsPanel"));
	}

	function calcDriving() {
	var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
	var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
	var request = {
	origin:Oend,
	destination:Dend,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	function calcPublic() {
	var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
	var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
	var request = {
	origin:Oend,
	destination:Dend,
	travelMode: google.maps.DirectionsTravelMode.PUBLIC
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	function calcWalking() {
	var Oend = "R. Claudia Múzio - Cidade Ademar, São Paulo, 04429-280, Brasil";
	var Dend = "Agua Chata, Guarulhos - São Paulo, 07251-060, Brasil";
	var request = {
	origin:Oend,
	destination:Dend,
	travelMode: google.maps.DirectionsTravelMode.WALKING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	}
	});
	}

	$(function(){

	initialize();
	calcDriving();

	$('li a').click(function(){

	var service = $(this).attr('href');

	switch(service){
	case "#driving": calcDriving(); break;
	case "#public": calcPublic(); break;
	case "#walking": calcWalking(); break;
	}
	});

	});
	</script>
	</head>
	<body>

	<div class="container">

	<!-- LOAD MAP -->
	<div id="map_canvas" class="maps"></div>

	<!-- NAV BAR -->
	<ul>
	<li class="active"> <a href="#driving">DRIVING</a> </li>
	<li> <a href="#walking">WALKING</a> </li>
	</ul>

	<!-- LOAD DIRECTIONS -->
	<div id="directionsPanel" class="panel"></div>
	</div>


	</body>
	</html>