CommuteTestFinal?

by dannyywhite

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;.js"></script>
<input type="text" id="lat" value=51.520497>
<input type="text" id="lon" value=-0.109827>
<button onclick="paint()">paint</button>
<div id="map-canvas"></div>
<div id="results"></div>

CSS

#map-canvas {
    height: 600px;
}

JavaScript

/*
INPUT:
- mapCenter
- radiusInput
- travelMode
- maxTime

OUTPUT
- Polygon area


Steps:
- STEP1: Select 10 equidistant points in a circunference with center o {{mapCenter}} and radius of {{radiusInput}}
- STEP2: Calculate the directions route from the center to each of the 10 points selected before
- STEP3: For each of those 10 routes, calculate the point that corresponds to the traveled time of {{maxTime}}
- STEP4: Create a polygon area with the final points

Changes required:
- create an additional step between STEP1 and STEP2 to detect when a point is over water
  better explanation down in the code (between STEP1 and STEP2)

*/



var directionsDisplay;
var map;
var directionsService = new google.maps.DirectionsService();
var stepDisplay = new google.maps.InfoWindow();
var numberedMarker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=___|FE6256|000000";
var countRoute = 0;
var n = 0;
var mapZoom = 12;
var MAX_TIME = 15; //in minutes
var totalPoints = 10
var latCenter = 51.520497;
var lonCenter =  -0.109827;
var centerLatLng = new google.maps.LatLng(latCenter, lonCenter);
var radius = 3000;  //in meters
var travelMode = 'TRANSIT'; // can be TRANSIT, DRIVING, BICYCLING, WALKING

var routeResults = [];
var allFinalPoints = [];
var totalPointsAdjusted = totalPoints;
var randomColorInt = 0;



function initialize() {
    
    /////////////////////// start of STEP1
		
    var mapOptions = {
        zoom: mapZoom,
        center: centerLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP       
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    marker = new google.maps.Marker({
            position: centerLatLng,
            map: map
        });
    
    google.maps.event.addListenerOnce(map, 'idle', function () {
        
        var circle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.6,
            strokeWeight: 2,
            fillColor:...