Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full code for how to use TravelTime data and draw Polygons on Google maps
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.