JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_canvas"></div>
<canvas id="myCan" width="300" height="150"></canvas>
<script>
    window.onload = function() {
        can = document.getElementById("myCan");
        cxt = can.getContext("2d");
        var myOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(23.04, 72.56)
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(23.04, 72.56)
        });
    }

    function startCapturing() {
        var canvas = document.querySelectorAll('canvas')[0];
        var source = canvas.toDataURL();
        var img = new Image();
        img.onload = function() {
            cxt.drawImage(img, 0, 0);
            startCapturing();
        }
        img.src = source;
    }
</script>

CSS

* {
    margin:0px;
    padding:0px;
}
#map_canvas {
    height:500px;
    width:500px;
    display:inline-block;
}