Hi guys,
I go to work and come back home through a specific road. Google map sometimes give me false information which might because that road is pretty new.Most of the time, going through that road is the fastest route. So every morning when I prepare going to work I check google map commute info once and do that once again when I go back home. I found the codes somewhere else and did some small modification. This is the HMTL codes generated the attached map.
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints (LatLng)</title>
<script type="text/javascript" src="hain.js" charset="UTF-8"></script><style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxx"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: "-33.877181, 151.103690",
destination: "-33.814887, 151.001866",
waypoints: [{
location: "-33.833934, 151.026166",
stopover:true}],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
computeTotalDistance(response);
} else {
alert("directions response "+status);
}
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "Dis is: "+ totalDist + " km<br>Time is: " + (totalTime / 60).toFixed(2) + " mins";
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:none;width:100%;height:90%;"></div>
<div id="control_panel" style="float:left;width:100%;height:10%;text-align:left;padding-top:0px">
<div id="directions_panel" style="margin:0px;background-color:#FFEE77;"></div>
<div id="total"></div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
1:But it is lacking the traffic layer. Can someone help to add the traffic information codes please.
I need the time travel on traffic layer as well.
2: Is it possible to make the map full screen and the distance, time info floating on top left corner of the map?
3: I want to ask IFTTT to send me a copy of this map from home to work at 9am as an attachment of an email and send me a copy of map from work to home at 6pm. Do you know how to achieve that? Thanks.
Regards
Clement