MockusT/TravelTime_data_on_Google_maps_Full.html

## TravelTime_data_on_Google_maps_Full.html
<html>

    <head>
        <style>
            body {
                background-color: gray;
            }

            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&callback=initMap" async defer></script>
        <script>
            var map;
            function initMap() {
                var mapOpts = {
                    center: {lat: 51.5031653, lng: -0.1123051},
                    zoom: 13,
                };

                map = new google.maps.Map(document.getElementById('map'), mapOpts);

                var marker0 = new google.maps.Marker({
                    position: {lat: 51.5031653, lng: -0.1123051},
                    map: map,
                    title: 'London Waterloo train station',
                    animation: google.maps.Animation.DROP
                });

                if (!google.maps.Polygon.prototype.getBounds) {
                    google.maps.Polygon.prototype.getBounds = function() {
                        var bounds = new google.maps.LatLngBounds();
                        var paths = this.getPaths();
                        var path;
                        for (var i = 0; i < paths.getLength(); i++) {
                            path = paths.getAt(i);
                            for (var ii = 0; ii < path.getLength(); ii++) {
                                bounds.extend(path.getAt(ii));
                            }
                        }
                        return bounds;
                    }
                }

                sendGeocodingRequest(startingLocation);
            }

                // The name of the starting location. We will have to geocode this to coordinates.
                var startingLocation = "London Waterloo Train Station";
                // The departure time in an ISO format.
                var departureTime =  new Date().toJSON();
                // Travel time in seconds. We want 15 minutes travel time so it is 15 minutes x 60 seconds.
                var travelTime = 60 * 15;
                // These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace
                var APPLICATION_ID = "place your app id here";
                var API_KEY = "place your api key here";


            // Sends the geocoding request.
            function sendGeocodingRequest(location) {
                // The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
                var request = {
                query: location };
                var xhr = new XMLHttpRequest();
                xhr.responseType = "json";
                xhr.open("GET", "https://api.traveltimeapp.com/v4/geocoding/search?query="+ location)
                xhr.setRequestHeader( "X-Application-Id", APPLICATION_ID);
                xhr.setRequestHeader( "X-Api-Key", API_KEY);
                xhr.setRequestHeader( "Accept-Language", " en-US");
                xhr.onreadystatechange = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    if(xhr.readyState === 4){
                    sendTimeMapRequest(xhr.response)
                    }
                } else {
                    console.error("Check your login")
                }
            };
            xhr.send();
            };


            // Sends the request of the Time Map multipolygon.
            function sendTimeMapRequest(geocodingResponse) {

                // The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/
                var coords = geocodingResponse.features[0].geometry.coordinates;
                var latLng = { lat: coords[1], lng: coords[0] };

                var request = {
                departure_searches: [{
                    id: "first_location",
                    coords: latLng,
                    transportation: {
                    type: "public_transport" },

                    departure_time: departureTime,
                    travel_time: travelTime }],

                arrival_searches: [] };

            var xhr = new XMLHttpRequest()
            xhr.addEventListener("readystatechange", function () {
                if (this.readyState === 4) {
                drawTimeMap(this.response);
                }
            });
            xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map")
            xhr.setRequestHeader("X-Application-Id", APPLICATION_ID);
            xhr.setRequestHeader("X-Api-Key", API_KEY);
            xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
            xhr.responseType = "json";
            xhr.send(JSON.stringify(request));


            // Draws the resulting multipolygon from the response on the map.
            function drawTimeMap(response) {

                // Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes

                var paths = response.results[0].shapes.map(function (polygon) {
                    var shell = polygon.shell
                    var holes = polygon.holes
                    return [shell].concat(holes);
                }).map(x=>x[0]);

                var polygon = new google.maps.Polygon({
                    paths,
                    strokeColor: "#F5A623",
                    strokeOpacity: 1,
                    strokeWeight: 5,
                    fillColor: "#46461F",
                    fillOpacity: 0.25
                });
                polygon.setMap(map);
                map.fitBounds(polygon.getBounds())

            };
            }

        </script>
    </body>
</html>
	<html>

	<head>
	<style>
	body {
	background-color: gray;
	}

	html, body, #map {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&callback=initMap" async defer></script>
	<script>
	var map;
	function initMap() {
	var mapOpts = {
	center: {lat: 51.5031653, lng: -0.1123051},
	zoom: 13,
	};

	map = new google.maps.Map(document.getElementById('map'), mapOpts);

	var marker0 = new google.maps.Marker({
	position: {lat: 51.5031653, lng: -0.1123051},
	map: map,
	title: 'London Waterloo train station',
	animation: google.maps.Animation.DROP
	});

	if (!google.maps.Polygon.prototype.getBounds) {
	google.maps.Polygon.prototype.getBounds = function() {
	var bounds = new google.maps.LatLngBounds();
	var paths = this.getPaths();
	var path;
	for (var i = 0; i < paths.getLength(); i++) {
	path = paths.getAt(i);
	for (var ii = 0; ii < path.getLength(); ii++) {
	bounds.extend(path.getAt(ii));
	}
	}
	return bounds;
	}
	}

	sendGeocodingRequest(startingLocation);
	}

	// The name of the starting location. We will have to geocode this to coordinates.
	var startingLocation = "London Waterloo Train Station";
	// The departure time in an ISO format.
	var departureTime = new Date().toJSON();
	// Travel time in seconds. We want 15 minutes travel time so it is 15 minutes x 60 seconds.
	var travelTime = 60 * 15;
	// These secret variables are needed to authenticate the request. Get them from http://docs.traveltimeplatform.com/overview/getting-keys/ and replace
	var APPLICATION_ID = "place your app id here";
	var API_KEY = "place your api key here";


	// Sends the geocoding request.
	function sendGeocodingRequest(location) {
	// The request for the geocoder. Reference: http://docs.traveltimeplatform.com/reference/geocoding-search/
	var request = {
	query: location };
	var xhr = new XMLHttpRequest();
	xhr.responseType = "json";
	xhr.open("GET", "https://api.traveltimeapp.com/v4/geocoding/search?query="+ location)
	xhr.setRequestHeader( "X-Application-Id", APPLICATION_ID);
	xhr.setRequestHeader( "X-Api-Key", API_KEY);
	xhr.setRequestHeader( "Accept-Language", " en-US");
	xhr.onreadystatechange = function () {
	if (xhr.status >= 200 && xhr.status < 300) {
	if(xhr.readyState === 4){
	sendTimeMapRequest(xhr.response)
	}
	} else {
	console.error("Check your login")
	}
	};
	xhr.send();
	};


	// Sends the request of the Time Map multipolygon.
	function sendTimeMapRequest(geocodingResponse) {

	// The request for Time Map. Reference: http://docs.traveltimeplatform.com/reference/time-map/
	var coords = geocodingResponse.features[0].geometry.coordinates;
	var latLng = { lat: coords[1], lng: coords[0] };

	var request = {
	departure_searches: [{
	id: "first_location",
	coords: latLng,
	transportation: {
	type: "public_transport" },

	departure_time: departureTime,
	travel_time: travelTime }],

	arrival_searches: [] };

	var xhr = new XMLHttpRequest()
	xhr.addEventListener("readystatechange", function () {
	if (this.readyState === 4) {
	drawTimeMap(this.response);
	}
	});
	xhr.open("POST", "https://api.traveltimeapp.com/v4/time-map")
	xhr.setRequestHeader("X-Application-Id", APPLICATION_ID);
	xhr.setRequestHeader("X-Api-Key", API_KEY);
	xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
	xhr.responseType = "json";
	xhr.send(JSON.stringify(request));


	// Draws the resulting multipolygon from the response on the map.
	function drawTimeMap(response) {

	// Reference for the response: http://docs.traveltimeplatform.com/reference/time-map/#response-body-json-attributes

	var paths = response.results[0].shapes.map(function (polygon) {
	var shell = polygon.shell
	var holes = polygon.holes
	return [shell].concat(holes);
	}).map(x=>x[0]);

	var polygon = new google.maps.Polygon({
	paths,
	strokeColor: "#F5A623",
	strokeOpacity: 1,
	strokeWeight: 5,
	fillColor: "#46461F",
	fillOpacity: 0.25
	});
	polygon.setMap(map);
	map.fitBounds(polygon.getBounds())

	};
	}

	</script>
	</body>
	</html>