JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="mapframe">
<div id="map"></div>
</div>
CSS
#mapframe {
margin: 50px;
width: 290px;
height: 290px;
overflow: hidden;
border: 10px solid #fff;
border-radius: 200px;
box-shadow: 0px 0px 1px #555;
}
#map {
width: 290px;
border-radius: 200px;
}
JavaScript
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.586328,-58.416967),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
map: map,
icon: 'http://nicolasdanelon.com.ar/Dev/marker.png',
title: '3818',
url: 'http://goo.gl/maps/2WMJU',
position: map.getCenter()
});
google.maps.event.addListener(marker, 'click', function() {
window.open ( marker.url, '3818' ) ;
});
}
(function() {
initialize();
})();