JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1"]{
border-radius:16px;
border:1px solid #000 !important;
}
JavaScript
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 160.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
new google.maps.Marker({map:map,position:map.getCenter(),
shape:{coords:[17,17,18],type:'circle'},
icon:{url:'https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1',
size:new google.maps.Size(34,34)},optimized:false})
}
google.maps.event.addDomListener(window, 'load', initialize);