CompanyMap Test

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div class="container-fluid" id="mapwrapper">
    <div class="row">
        <h1 class="col-md-12" id="maphdr">Texas Mutual Insurance Company</h1>
    </div>
    <div class="row">
        <div class="col-md-10">
            <div id="map"></div>
        </div>
        <div class="col-md-2 sideBar-Wrap">
             <h2>CapMetro Routes</h2>

            <ul id="sidebar">
                <li>
                    <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked>
                    <label>Route 1</label>
                </li>
                <li>
                    <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked>
                    <label>Route 7</label>
                </li>
                <li>
                    <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked>
                    <label>Route 10</label>
                </li>
                <li>
                    <input type="checkbox" id="layer3" onclick="toggleLayer(3)" checked>
                    <label>Route 135</label>
                    <br>
                    <input type="checkbox" id="layer4" onclick="toggleLayer(4)" checked>
                    <label>Route 320</label>
                </li>
                <li>
                    <input type="checkbox" id="layer5" onclick="toggleLayer(5)" checked>
                    <label>Route 350</label>
                </li>
                <li>
                    <input type="checkbox" id="layer6" onclick="toggleLayer(6)" checked>
                    <label>Route 935</label>
                </li>
                <li>
                    <input type="checkbox" id="layer7" onclick="toggleLayer(7)" checked>
                    <label>Route 985</label>
                </li>
                <li>
                    <input type="checkbox" id="layer8" onclick="toggleLayer(8)" checked>
                    <label>Route...

CSS

#mapwrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 98%;
}
#maphdr {
    font: 24px"trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
   
}
#describe {
    font: 14px"trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
    font-weight: bold;
    position: absolute;
    top: 95%;
    right: 0px;
}
#info {
    font: 14px"trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
    font-weight: bold;
    position: absolute;
    top: 2px;
    right:0px;
}
#map {
    position: absolute;
    top: 4%;
    left: 1%;
    min-height: 600px;
    min-width: 98%;
}
.sideBar-Wrap h2 {
    font-size:18px
}
ul#sidebar {
    font: 16px"trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
    width:100%;
    margin:0;
    padding:0;
}
ul#sidebar li {
    list-style-type:none;
}
ul#sidebar li label {
    margin-left:10px;
}
#geocode {
    font: 16px"trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
    position: absolute;
    top: 94%;
    left: 1%;
    min-width: 70%;
    min-height: 4%;
    padding: 5px;
    background: white;
}
#alert {
    position: absolute;
    top: 50%;
    left: 0;
    min-width: 100%;
    text-align: center;
    display: none;
}
#alert p {
    min-width: 150px;
    margin: 0 auto 0 auto;
    padding: 10px;
    background: white;
    border: 1px solid #aaa;
}
body.loading #alert {
    display: block;
}
a {
    text-decoration: none;
    padding: 5px 10px 5px 10px;
}
a:link {
    color: #0000ff;
}
a:visited {
    color: #0000ff;
}
a:hover {
    color: #ffff00;
    background-color: #999999;
    text-decoration: underline;
}
a:active {
    color: #FF0000;
}

JavaScript

var layers = [];

function toggleLayer(i) {
    if (layers[i].getMap() == null) {
        layers[i].setMap(map);
    } else {
        layers[i].setMap(null);
    }
}

var map = null;
var mArray = null;
var image = null;
var content = null;
var title = null;
var infowindow = null;

function initMap() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        scaleControl: true
    };

    content = document.createElement("DIV");
    title = document.createElement("DIV");
    content.appendChild(title);
    infowindow = new google.maps.InfoWindow({
        content: content
    });

    image = "http://www.capmetro.org/gismaps/images/cat2.png";
    image2 = "http://www.capmetro.org/gismaps/images/cat0.png";

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var markers = [{
        lat: 29.479904,
        lng: -98.445281,
        info: "<b>Address: 701 IVY LANE</b><br><b>City: SAN ANTONIO</b><br><b>State: TX</b><br><b>ZipCode: 78209</b><br><br><a href=http://www.capmetro.org/planner/?loc1=701%IVY%LANE&loc1lat=29.479904&loc1lng=-98.445281&loc2=TEXAS%MUTUAL%INSURANCE%COMPANY&loc2lat=30.323562&loc2lng=-97.701670&minimize=x&type=N>Plan Trip</a>"
    }, {
        lat: 30.115497,
        lng: -97.856297,
        info: "<b>Address: 12705 SHADY ACRES DRIVE</b><br><b>City: BUDA</b><br><b>State: TX</b><br><b>ZipCode: 78610</b><br><br><a href=http://www.capmetro.org/planner/?loc1=12705%SHADY%ACRES%DRIVE&loc1lat=30.115497&loc1lng=-97.856297&loc2=TEXAS%MUTUAL%INSURANCE%COMPANY&loc2lat=30.323562&loc2lng=-97.701670&minimize=x&type=N>Plan Trip</a>"
    }, {
        lat: 30.100189,
        lng: -97.843471,
        info: "<b>Address: 256 MCKENNAS COVE</b><br><b>City: BUDA</b><br><b>State: TX</b><br><b>ZipCode: 78610</b><br><br><a...