Map Border

by shanejones

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div class="map-wrapper">

    <div id="map"></div>
    
    <div class="border">
        <hr class="top"/>
        <hr class="right"/>
        <hr class="bottom"/>
        <hr class="left"/>
    </div>
    
</div>

SCSS

* {
    padding: 0;
    margin: 0;
}

.map-wrapper {
    position: relative;
    height: 300px;
    width: 400px;
    
    
    #map {
        width: 100%;
        height: 100%;
    }
    
}


hr {
    
    border: none;
    
    &.top {
        position: absolute;
        top: 1%;left: 1%;
        width: 96%;
        margin: 1%;
        border-bottom: 3px solid black;
    }
    
    &.bottom {
        position: absolute;
        bottom: 1%;left: 1%;
        width: 96%;
        margin: 1%;
        border-bottom: 3px solid black;
    }
    
    &.left {
        position: absolute;
        top: 1%;left: 1%;
        height: 96%;
        margin: 1%;
        border-left: 3px solid black;
    }
    
    
    
    &.right {
        position: absolute;
        top: 1%;left: 1%;
        height: 96%;
        margin: 1%;
        border-left: 3px solid black;
    }
    
}

JavaScript

var map;

google.maps.event.addDomListener(window, "load", function () {

  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoWindow = new google.maps.InfoWindow();

  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

});