Route 17

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<h2>route 17 map</h2>
      <div id="map_canvas" style="width:500px; height:500px; float:left; margin-right: 20px;"></div>
      <div>
        <label><strong>Direction:</strong></label>
        <input type="checkbox" checked="checked" name="direction" id="NB" value="NB" />
        <label>NB</label>
        <input type="checkbox" checked="checked" name="direction" id="SB" value="SB" />
        <label>SB</label>
        <input type="checkbox" checked="checked" name="direction" id="NB-Tripper" value="NB-Tripper" />
        <label>NB Tripper</label>
        <input type="checkbox" checked="checked" name="direction" id="SB-Tripper" value="SB-Tripper" />
        <label>SB Tripper</label>
      </div>
      <div style="padding-top: 20px;">
        <label><strong>Enter an address:</strong></label>
        <span class="formw">
        <input type="text" id="address" value="">
        <input type="button" id="search" value="search" style="margin-top: 5px;">
        <input type="button" id="reset" value="reset">
        </span> </div>

CSS

body  {
    font: 62.5% Verdana, Arial, Helvetica, sans-serif;
}

JavaScript

function initialize() {
    
    // Change these variables for each route
    var routeNumber = '17';                // Route number as string
    var mapLatitude = 37.9193;                // Center of map latitude
    var mapLongitude = -122.5168;            // Center of map longitude
    var zoomLevel = 12;                        // Map zoom level
    
    // Map styling
    var styleArray = [
        { 
            featureType: "water", 
            elementType: "geometry.fill", 
            stylers: [ 
            { color: "#dfe4f0" } 
            ]
        },{ 
            featureType: "road", 
            elementType: "labels.text.stroke", 
            stylers: [ { color: "#ffffff" }
            ]
        },{
            featureType: "road", 
            elementType: "geometry.fill", 
            stylers: [ { color: "#ffffff" }
            ]
        },{
            featureType: "road", 
            elementType: "geometry.stroke", 
            stylers: [ { visibility: "off" }
            ]
        },{
            featureType: "administrative", 
            elementType: "labels.text.stroke", 
            stylers: [ { color: "#ffffff" }
            ]
        },{
            featureType: "poi", 
            stylers: [ { lightness: 20 }
            ]
        },{ 
            featureType: "administrative.land_parcel", 
            elementType: "geometry", 
            stylers: [ { visibility: "off" }
            ]
        },{
            featureType: "road", 
            elementType: "labels.icon", 
            stylers: [ { lightness: 50 }, { saturation: -100 }
            ]
        },{
            featureType: "transit.line", 
            elementType: "geometry.fill", 
            stylers: [ { weight: 0.1 }
            ]
        },{ 
            featureType: "administrative.neighborhood", 
            elementType: "labels.text", 
            stylers: [ { visibility: "off" }
            ]
        } 
    ];
    
    // Map display options
    var myOptions = {
   ...