JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

CSS

#map{ 
    height: 400px; 
    width: 500px;
}

JavaScript

var overlay;

myOverlay.prototype = new google.maps.OverlayView();

function initialize(){
    var myLatLng = new google.maps.LatLng(51.036551, 1.488292);
    var myOptions = {
        zoom:9,
        center:myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);
    var marker = new google.maps.Marker({position:myLatLng,map:map});
    marker.setMap(map);
    var swBound = new google.maps.LatLng(51.00, 1.32);
    var neBound = new google.maps.LatLng(51.15, 1.6);
    var bounds = new google.maps.LatLngBounds(swBound,neBound);
    var imageCode = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" onload="if (parent.svgViewerNotifyOnLoad) parent.svgViewerNotifyOnLoad(evt);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 300" width="100%" zoomAndPan="disable"><rect height="300" id="svgEditorBackground" style="fill:none;stroke:none;" width="300" x="0" y="0"/><g style="fill-opacity:1; fill:none;" transform="scale(0.5) translate(200,200) "><g style="fill: #ffffff; stroke:#000000; stroke-width:0.172"><path d="M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z"/></g><g style="fill: #ffffff; stroke:#000000; stroke-width:0.172"><path d="M-118.774 81.262C-118.774 81.262 -119.323 83.078 -120.092 82.779C-120.86 82.481 -119.977 31.675 -140.043 26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z"/></g><g style="fill: #ffffff; stroke:#000000; stroke-width:0.172"><path d="M-91.284 123.59C-91.284 123.59 -89.648 124.55 -90.118 125.227C-90.589 125.904 -139.763 113.102 -149.218 131.459C-149.218 131.459 -145.539 112.572 -91.284 123.59z"/></g><g style="fill: #ffffff; stroke:#000000; stroke-width:0.172"><path d="M-94.093 133.801C-94.093 133.801 -92.237 134.197 -92.471 134.988C-92.704 135.779 -143.407...