94 lines
3.0 KiB
HTML
94 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Driving directions to clicked point | CartoDB.js</title>
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||
|
|
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||
|
|
<style>
|
||
|
|
html, body, #map {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<!-- include google maps library -->
|
||
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
|
||
|
|
|
||
|
|
<!-- include cartodb.js library -->
|
||
|
|
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var map;
|
||
|
|
|
||
|
|
function main() {
|
||
|
|
|
||
|
|
// Map center
|
||
|
|
var myLatlng = new google.maps.LatLng(37.753, -122.433);
|
||
|
|
|
||
|
|
var myOptions = {
|
||
|
|
zoom: 13,
|
||
|
|
center: myLatlng,
|
||
|
|
disableDefaultUI: true,
|
||
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render basemap
|
||
|
|
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
||
|
|
|
||
|
|
// Create services for later rendering of directions
|
||
|
|
var directionsDisplay = new google.maps.DirectionsRenderer();
|
||
|
|
directionsDisplay.setMap(map);
|
||
|
|
var directionsService = new google.maps.DirectionsService();
|
||
|
|
|
||
|
|
// The location of the Exploratorium
|
||
|
|
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
|
||
|
|
|
||
|
|
// Our CartoDB visualization
|
||
|
|
var vizjson_url = "https://documentation.cartodb.com/api/v2/viz/4a885510-d6fb-11e4-aedb-0e4fddd5de28/viz.json";
|
||
|
|
|
||
|
|
cartodb.createLayer(map, vizjson_url)
|
||
|
|
.addTo(map)
|
||
|
|
.done(function(layers) {
|
||
|
|
|
||
|
|
var subLayer = layers.getSubLayer(0);
|
||
|
|
|
||
|
|
subLayer.setInteraction(true); // Interaction for that layer must be enabled
|
||
|
|
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
|
||
|
|
|
||
|
|
// Setup our event when an object is clicked
|
||
|
|
layers.on('featureClick', function(e, latlng, pos, data){
|
||
|
|
|
||
|
|
// the location of the clicked school
|
||
|
|
var school = new google.maps.LatLng(latlng[0], latlng[1]);
|
||
|
|
|
||
|
|
// our DirectionsRequest
|
||
|
|
var request = {
|
||
|
|
origin : school,
|
||
|
|
destination : exploratorium,
|
||
|
|
travelMode : google.maps.TravelMode.DRIVING
|
||
|
|
};
|
||
|
|
|
||
|
|
// use route method to generate directions
|
||
|
|
directionsService.route(request, function(response, status) {
|
||
|
|
if (status == google.maps.DirectionsStatus.OK) {
|
||
|
|
directionsDisplay.setDirections(response);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = main;
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|