JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 400px; height: 400px;"></div>
<script>

    function initMap(vareaRegiao) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {lat: 24.886, lng: -70.268},
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        // Construct the polygon.
        var varea_atibaia_monta = new google.maps.Polygon({
            paths: vareaRegiao,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });
        varea_atibaia_monta.setMap(map);
    }
    
    var vareaRegiao;
    $.ajax({
        type: "GET",
        url: "https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty", // isto é só uma coisa qualquer para este exemplo, troque pelo servico correto ("/projto/Pontos.json")
        dataType: "json",
        success: function (data) {
            vareaRegiao = [ // aqui entram os dados que realmente deseja, que vieram de /projto/Pontos.json
                {lat: 25.774, lng: -80.190},
                {lat: 18.466, lng: -66.118},
                {lat: 32.321, lng: -64.757},
                {lat: 25.774, lng: -80.190}
            ];
            initMap(vareaRegiao);
        }
    });
</script>