JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt7OcciflokvTrGkk_W9PyN73doIF6YE8&callback=initMap">
</script>

<div id="map" style="width: 100%; height: 400px;"></div>
<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: 39.8283, lng: -98.5795} // Center of the USA
    });

    var items = document.querySelectorAll('.table.w-dyn-item');
    
    items.forEach(function(item) {
        var latLongStr = item.querySelector('#latlong').textContent.trim().split(', ');
        var lat = parseFloat(latLongStr[0]);
        var lng = parseFloat(latLongStr[1]);
        var name = item.querySelector('#name').textContent;
        var city = item.querySelector('#city').textContent;
        var avatar = item.querySelector('#avatar').src;

        var contentString = '<div><img src="' + avatar + '" style="width:50px;height:50px;"></img><br/><strong>' + name + '</strong><br/>' + city + '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var canvas = document.createElement('canvas');
        canvas.width = 54;
        canvas.height = 54;
        var context = canvas.getContext('2d');

        var image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function () {
            // Draw image as a circle with border
            context.beginPath();
            context.arc(27, 27, 25, 0, Math.PI * 2, true);
            context.closePath();
            context.clip();

            context.drawImage(image, 2, 2, 50, 50);

            context.beginPath();
            context.arc(27, 27, 25, 0, Math.PI * 2, true);
            context.lineWidth = 2;
            context.strokeStyle = 'white';
            context.stroke();

            var marker = new google.maps.Marker({
                position: {lat: lat, lng: lng},
                map: map,
                icon:...