UlisesGascon · April 23, 2016 00:19
diff --git a/geolocation_to_fictizia.html b/geolocation_to_fictizia.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Llegando a Fictizia desde tu posición</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map {
            height: 100%;
        }
        
        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }
    </style>
 </head>

 <body>
    <div id="floating-panel"> <b>Medio de transporte: </b>
        <select id="mode">
            <option value="DRIVING">Vehículo</option>
            <option value="WALKING">A pie</option>
            <option value="TRANSIT">Transporte público</option>
        </select>
    </div>
    <div id="map"></div>
    <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?extension=.js&output=embed"></script>
    <script>
        /*global google*/
        (function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var directionsDisplay = new google.maps.DirectionsRenderer;
                    var directionsService = new google.maps.DirectionsService;
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 14,
                        center: {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        }
                    });
                    directionsDisplay.setMap(map);
                    calculateAndDisplayRoute(directionsService, directionsDisplay);
                    document.getElementById('mode').addEventListener('change', function() {
                        calculateAndDisplayRoute(directionsService, directionsDisplay);
                    });

                    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                        var selectedMode = document.getElementById('mode').value;
                        directionsService.route({
                            origin: {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            },
                            destination: {
                                lat: 40.422134,
                                lng: -3.718210
                            },
                            travelMode: google.maps.TravelMode[selectedMode]
                        }, function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                            } else {
                                console.log('Directions request failed due to ' + status);
                            }
                        });
                    }
                }, function() {
                    console.warn('Error: El Servicio de Geolocalización esta fallando.');
                });
            } else {
                console.warn('Error: Tu navegador no soprota la Geolocalización.');
            }
        }());
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Llegando a Fictizia desde tu posición</title>
	<style>
	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#map {
	height: 100%;
	}

	#floating-panel {
	position: absolute;
	top: 10px;
	left: 25%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	text-align: center;
	font-family: 'Roboto', 'sans-serif';
	line-height: 30px;
	padding-left: 10px;
	}
	</style>
	</head>

	<body>
	<div id="floating-panel"> <b>Medio de transporte: </b>
	<select id="mode">
	<option value="DRIVING">Vehículo</option>
	<option value="WALKING">A pie</option>
	<option value="TRANSIT">Transporte público</option>
	</select>
	</div>
	<div id="map"></div>
	<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?extension=.js&output=embed"></script>
	<script>
	/global google/
	(function() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var directionsDisplay = new google.maps.DirectionsRenderer;
	var directionsService = new google.maps.DirectionsService;
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 14,
	center: {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	}
	});
	directionsDisplay.setMap(map);
	calculateAndDisplayRoute(directionsService, directionsDisplay);
	document.getElementById('mode').addEventListener('change', function() {
	calculateAndDisplayRoute(directionsService, directionsDisplay);
	});

	function calculateAndDisplayRoute(directionsService, directionsDisplay) {
	var selectedMode = document.getElementById('mode').value;
	directionsService.route({
	origin: {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	},
	destination: {
	lat: 40.422134,
	lng: -3.718210
	},
	travelMode: google.maps.TravelMode[selectedMode]
	}, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	} else {
	console.log('Directions request failed due to ' + status);
	}
	});
	}
	}, function() {
	console.warn('Error: El Servicio de Geolocalización esta fallando.');
	});
	} else {
	console.warn('Error: Tu navegador no soprota la Geolocalización.');
	}
	}());
	</script>
	</body>

	</html>