ruliana/faculdades_perto_de_metro_sp.html

## faculdades_perto_de_metro_sp.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <h1>Universidades Próximas</h1>
    <form>
      <select id="estacoes" name="estacoes">
        <option>Estações de Metrô</option>
      </select>
    </form>
    <table id="tab-universidades" border="1">
    </table>
    <script>
var stations = {
  vila_mariana: {name: "Metrô Vila Mariana", position: new google.maps.LatLng(-23.5936937, -46.6340123)},
  santa_cruz: {name: "Metrô Santa Cruz", position: new google.maps.LatLng(-23.598064, -46.634325)},
  praca_da_arvore: {name: "Metrô Praça da Árvore", position: new google.maps.LatLng(-23.605236, -46.6337548)}
};

function load_stations() {
  var selectbox = $("#estacoes");
  for (var i in stations) {
    var station = stations[i];
    selectbox.append('<option value="' + i + '">' + station.name + "</option>");
  }
}

function selected_station(){
  var st = $("#estacoes").children("option:selected").val();
  return stations[st];
}

function load_universities_nearby() {
  var place = selected_station().position;
  var map = new google.maps.Map(document.getElementById("map"), {
    center: place,
    zoom: 15
  });

  var request = {
    location: place,
    types: ["university"],
    rankBy: google.maps.places.RankBy.DISTANCE
  };

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback_universities);
}

function callback_universities(results, status) {
  var universities = $("#tab-universidades");
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    universities.html("<tr><th>Nome</th><th>Distância</th>");
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();
      var name = place.name;
      var dist = distance(selected_station().position, place.geometry.location);
      universities.append("<tr><td>" + name + "</td><td>" + dist + "m</td>");
    }
  }
}

function distance(latLng1, latLng2) {
  return Math.round(google.maps.geometry.spherical.computeDistanceBetween(latLng1, latLng2));
}

load_stations();
$('#estacoes').change(load_universities_nearby);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	<body>
	<div id="map"></div>
	<h1>Universidades Próximas</h1>
	<form>
	<select id="estacoes" name="estacoes">
	<option>Estações de Metrô</option>
	</select>
	</form>
	<table id="tab-universidades" border="1">
	</table>
	<script>
	var stations = {
	vila_mariana: {name: "Metrô Vila Mariana", position: new google.maps.LatLng(-23.5936937, -46.6340123)},
	santa_cruz: {name: "Metrô Santa Cruz", position: new google.maps.LatLng(-23.598064, -46.634325)},
	praca_da_arvore: {name: "Metrô Praça da Árvore", position: new google.maps.LatLng(-23.605236, -46.6337548)}
	};

	function load_stations() {
	var selectbox = $("#estacoes");
	for (var i in stations) {
	var station = stations[i];
	selectbox.append('<option value="' + i + '">' + station.name + "</option>");
	}
	}

	function selected_station(){
	var st = $("#estacoes").children("option:selected").val();
	return stations[st];
	}

	function load_universities_nearby() {
	var place = selected_station().position;
	var map = new google.maps.Map(document.getElementById("map"), {
	center: place,
	zoom: 15
	});

	var request = {
	location: place,
	types: ["university"],
	rankBy: google.maps.places.RankBy.DISTANCE
	};

	var service = new google.maps.places.PlacesService(map);
	service.nearbySearch(request, callback_universities);
	}

	function callback_universities(results, status) {
	var universities = $("#tab-universidades");
	if (status == google.maps.places.PlacesServiceStatus.OK) {
	universities.html("<tr><th>Nome</th><th>Distância</th>");
	for (var i = 0; i < results.length; i++) {
	var place = results[i];
	var lat = place.geometry.location.lat();
	var lng = place.geometry.location.lng();
	var name = place.name;
	var dist = distance(selected_station().position, place.geometry.location);
	universities.append("<tr><td>" + name + "</td><td>" + dist + "m</td>");
	}
	}
	}

	function distance(latLng1, latLng2) {
	return Math.round(google.maps.geometry.spherical.computeDistanceBetween(latLng1, latLng2));
	}

	load_stations();
	$('#estacoes').change(load_universities_nearby);
	</script>
	</body>
	</html>