Untitled

<!DOCTYPE html>
<html>
  <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>CMPT 350 Assignment 1</title>
        <style>
            <!-- Map Style Settings -->
            html, body, #map-canvas {
                height: 100%;
                width: 90%;
                margin: 0px;
                padding: 0px
            }
            <!-- Notification Panel Settings -->
            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
        <script>
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var haight = new google.maps.LatLng(37.7699298, -122.4469157);
            var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

            function initialize() {
                // variables for directions display and for default location
                directionsDisplay = new google.maps.DirectionsRenderer();
                var myLatlng = new google.maps.LatLng(52.13122,-106.65175);

                // Setting for the map
                var mapOptions = {
                    zoom: 12,
                    center: myLatlng
                }
                // Defining the map and setting the directions display to said map
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);

                // Add initial marker
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Current Position'
                });
                /*
                // testing for geolocation compatibility
                if(navigator.geolocation) {
                    browserSupportFlag = true;
                    navigator.geolocation.getCurrentPosition(function(position) {
                    initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                    map.setCenter(initialLocation);
                    }, function() {
                        handleNoGeolocation(browserSupportFlag);
                    });
                }
                // If not compatible
                else {
                    browserSupportFlag = false;
                    handleNoGeolocation(browserSupportFlag);
                }

                // If geolocation fails
                function handleNoGeolocation(errorFlag) {
                    if (errorFlag == true) {
                        alert("Geolocation service failed.");
                        initialLocation = newyork;
                    } else {
                        alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
                        initialLocation = siberia;
                    }
                    map.setCenter(initialLocation);
                }
                */
            }
            //Calculate the route
            function calcRoute() {
                var selectedMode = document.getElementById('mode').value;
                var request = {
                    origin: haight,
                    destination: oceanBeach,
                    travelMode: google.maps.TravelMode[selectedMode]
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }
            //Initialize on window load
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
  </head>

  <body>
        <!-- travel mode panel -->
        <div id="panel">
            <b>Mode of Travel: </b>
            <select id="mode" onchange="calcRoute();">
                <option value="DRIVING">Driving</option>
                <option value="WALKING">Walking</option>
                <option value="BICYCLING">Bicycling</option>
                <option value="TRANSIT">Transit</option>
            </select>
        </div>
        <!-- map panel -->
        <div id="map-canvas"></div>
  </body>
</html>