JSFiddle - React, Tailwind, and code Playground

by nicolas_danelon

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;
	height: 320px;
	border-radius: 200px;
}

JavaScript

function initialize() {
		var mapOptions = {
			panControl: false,
			zoomControl: false,
			mapTypeControl: false,
			scaleControl: false,
			streetViewControl: false,
			overviewMapControl: false,
			draggable: false,
			scrollwheel: false,
			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();
	})();