JSFiddle - React, Tailwind, and code Playground

by nnur ffarazi

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body onload="initialize()">
    <div id="map_canvas" style="zIndex:0;"></div>
    <canvas id="canvas" width="240" height="297" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <img id="scream" width="50" height="50" src="https://agdvts2.s3.amazonaws.com/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20563048815583cde906423e61%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/car1.png" alt="The Scream">
    <img id="source" style="zIndex:100;" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <h2 class='show'></h2>

</body>

</html>

CSS

html {
     width: 100%;
     height: 100%;
 }
 body {
     width: 100%;
     height: 100%;
     margin: 0;
 }
 #map_canvas {
     width: 50%;
     height: 50%;
 }

JavaScript

function createMarker(width, height, radius) {

    var canvas, ctx;





    canvas = document.createElement("canvas");


    ctx = canvas.getContext("2d");


    //context.font = "30px Arial";
    //context.fillText("Hello World", 10, 50);
    
    var imageurl = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

    var img = document.getElementById("canvas");
    var image = document.getElementById("source");
    ctx.drawImage(img, 10, 10);
    //ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);

    ctx.globalAlpha = 0.5;

    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);

    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);

    return canvas.toDataURL();

}


// example
function initialize() {



    // creating a map
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // creating a marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-25.363882, 131.044922),
        map: map,
        title: "Hello World!",
        icon: createMarker(100, 100, 18)
    });
}