ffflabs/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example: getting the user position with HTML5 Geolocation API, then using google maps to find a route to the desired clicked location.

  
## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
	<head>
		<style>
		#map-canvas {
			height:600px;
			width:900px;
		}
		</style>
		<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

		<script>
			var	map = null;

			function initialize() {
		 		map = new google.maps.Map(document.getElementById('map-canvas'), {
					zoom: 14,
					center: {lat: 41, lng: -89.5}
				});

		 		var directionService= new google.maps.DirectionsService();
				var directionsDisplay = new google.maps.DirectionsRenderer();

				var getRoute=function (request) {
					directionService.route(request, function (response, status) {
						if (status == google.maps.DirectionsStatus.OK) {
							directionsDisplay.setDirections(response);
							directionsDisplay.setMap(map);
						} else {
							console.log('Not OK',  response, status);
						}
					});
				};

				navigator.geolocation.getCurrentPosition(function (location) {
					var lng=location.coords.longitude;
					var lat=location.coords.latitude;
					map.setCenter({lat:lat, lng:lng});

					var originMarker=new google.maps.Marker({position:{lat:lat, lng:lng},
										map:map,
										title:'This is your position'
										});

					google.maps.event.addListener(map,'click',function(mouseEvent) {
						console.log('clicked on ',mouseEvent.latLng.lat(), mouseEvent.latLng.lng());
						var destinationMarker= new google.maps.Marker({	position:mouseEvent.latLng,
												map:map,
												title:'This is your destination',
												draggable:true,
												clickable:true
											});


						var request = {	origin: originMarker.getPosition(),
								destination: destinationMarker.getPosition(),
								travelMode: 'DRIVING',
						};
						getRoute(request);
					});

				});
			}

			google.maps.event.addDomListener(window, 'load', initialize);

		</script>
	</head>
	<body>
		<h4>Click on your desired destination</h4>
		<div id="map-canvas" width="900" height="600"></div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<head>
	<style>
	#map-canvas {
	height:600px;
	width:900px;
	}
	</style>
	<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

	<script>
	var map = null;

	function initialize() {
	map = new google.maps.Map(document.getElementById('map-canvas'), {
	zoom: 14,
	center: {lat: 41, lng: -89.5}
	});

	var directionService= new google.maps.DirectionsService();
	var directionsDisplay = new google.maps.DirectionsRenderer();

	var getRoute=function (request) {
	directionService.route(request, function (response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	directionsDisplay.setMap(map);
	} else {
	console.log('Not OK', response, status);
	}
	});
	};

	navigator.geolocation.getCurrentPosition(function (location) {
	var lng=location.coords.longitude;
	var lat=location.coords.latitude;
	map.setCenter({lat:lat, lng:lng});

	var originMarker=new google.maps.Marker({position:{lat:lat, lng:lng},
	map:map,
	title:'This is your position'
	});

	google.maps.event.addListener(map,'click',function(mouseEvent) {
	console.log('clicked on ',mouseEvent.latLng.lat(), mouseEvent.latLng.lng());
	var destinationMarker= new google.maps.Marker({ position:mouseEvent.latLng,
	map:map,
	title:'This is your destination',
	draggable:true,
	clickable:true
	});


	var request = { origin: originMarker.getPosition(),
	destination: destinationMarker.getPosition(),
	travelMode: 'DRIVING',
	};
	getRoute(request);
	});

	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<h4>Click on your desired destination</h4>
	<div id="map-canvas" width="900" height="600"></div>
	</body>
	</html>