Untitled

<!--AIzaSyDpbN1WlA7B4BoJ6vCYSD-LsVW6CHJtW5U-->
<!-- Google API Key -->

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <title> Distrito Tec </title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background-color: #FAFAFA;
            margin: 0;
        }

        #map-outer {
            height: 440px;
            padding: 20px;
            border: 2px solid #CCC;
            margin-bottom: 20px;
            background-color: #FFF
        }

        #map-container {
            height: 400px
        }

        @media all and (max-width: 991px) {
            #map-outer {
                height: 650px
            }
            #map {
                margin: 0;
                padding: 0;
                height: 50%;
            }
        }

        #black_background {
            background-color: black;
            width: 795px;
            height: 550px;
            margin: 0;
            background-image: url("dtec.PNG");
        }

        #footer {
            background-color: black;
            padding: 30px;
            border-top-left-radius: 2em;
            border-top-right-radius: 2em;
        }
    </style>
</head>

<body>

    <div class="jumbotron" style="background-color:black;">
        <div class="row text-center">
            <span class="col-sm-3 col-md-3" style="position:relative; top:25px;">
                    <img src="http://distritotec.itesm.mx/wp-content/uploads/2014/02/DistritoTec_Logo_1.png">
                </span>
            <span class="col-sm-8 col-md-8 ">
                    <h1 style="color:#FAFAFA"> Siendo Agentes de Cambio </h1>
                </span>

        </div>
    </div>

    <div class="row">

        <div class="col-sm-7 col-md-offset-1" style="padding-left:0">
            <div id="black_background">
            </div>
        </div>

    </div>
    <div id="map_section">
        <div class="container">
            <div class="row">
                <div id="map" class="col-sm-8">
                </div>
            </div>
        </div>
    </div>
    <footer class="container">
        <div id="footer">
        </div>
    </footer>
</body>

<script>
    var panorama;
    var panorama2;

    function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('map'), {
                position: {
                    lat: 25.6526088,
                    lng: -100.2910001
                },
                pov: {
                    heading: 165,
                    pitch: 0
                },
                zoom: 1
            });
    }
</script>
<script src="raphael.js"></script>
<script src="my_raphael_svg.js"></script>


<script>
    $(document).ready(function () {
        $("svg").attr("id", "distrito_canvas");
        $("#distrito_canvas").appendTo("#black_background");
        $("path").css("opacity", "0.5");
        $("path").hover(function () {
            $(this).css("opacity", 0.8);
            $(this).css("stroke-width", 2);
            $(this).css("stroke", "222222");
            $(this).css("cursor", "pointer");
        });
        $("path").mouseout(function () {
            $(this).css("opacity", 0.5);
            $(this).css("stroke-width", 0);
            $(this).css("stroke", "000000");
            $(this).css("cursor", "auto");
        });
        $("path").each(function (index) {
            $(this).attr("id", index);
        });

    });
</script>
<script src="por_zona.js"></script>

</html>