Circular Google Map

HTML

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyABi665smb1CDc-mJxV78TfrOKXVNizoQU&amp;sensor=false"></script>
<div class="cms-map-wrapper circular">
    <div id="googleMap" class="cms-map"></div>
</div>

CSS

.cms-map-wrapper.circular {
    width: 50%;
    margin: auto;
    background-color:red;
}
.cms-map {
    border: solid 5px blue;
    border-radius: 100%;
    padding-bottom: 100%;
    margin-bottom: 20px;
}

JavaScript

function showMapWithAddress(mapElementId, address) {

    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            position = results[0].geometry.location;

            var mapProp = {
                center: position,
                zoom: 14
            };

            var map = new google.maps.Map(document.getElementById(mapElementId), mapProp);
            var marker = new google.maps.Marker({
                position: position,
                title: address,
                flat: true,
                clickable: false
            });

            marker.setMap(map);
            setTimeout(function () {
                google.maps.event.trigger(map, 'resize');
                map.setCenter(position);
            }, 100);
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
}

showMapWithAddress('googleMap', 'Josef-Bautz-Strasse 14, 63457 Hanau, Germany');