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>
    <title> Distrito Tec </title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background-color: #CCC;
            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");
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="jumbotron">
            <h1> Distrito Tec - Siendo Agentes de Cambio </h1>
        </div>
    </div>

    <div class="container">
        <div class="col-sm-12">
            <div id="black_background">
        </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div id="map" class="col-sm-8">
                <div id="infoDistrito" class="col-sm-4">
                </div>
            </div>
        </div>
    </div>
    <footer class="container">
        <p>Footer Text</p>
    </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
            });
    }

    $(window).resize(function () {
        var h = $(window).height(),
            offsetTop = 190; // Calculate the top offset

        $('#map').css('height', (h - offsetTop));
    }).resize();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpbN1WlA7B4BoJ6vCYSD-LsVW6CHJtW5U&callback=initialize" async defer>
</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");
        });
        var idk = rsr.getById("la_florida");

    });
</script>

</html>