Inner border with radius on google maps element

This is the only way I have found so far to be able to have a usable google maps element with a inner border and border radius. This could be achieved using less extra markups though, but it wouldn't be suitable for high radius values.

by amenadiel

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>

 <div class="map" id="map"></div>

SCSS

#map {
  width: 100%;
  height: 500%;

}

JavaScript

new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    zoomControl: true,
    center: new google.maps.LatLng(28, -41),
    mapTypeId: "roadmap"
});