Circular Google Map

by Jan Gregor Triebel

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);
            
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
}

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