JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>



    <div class="cercas">
                <row class="coordenadas-cercas" id="5821">
                    <div class="col-sm-8">
                        <label>Cerca</label>
                        <input type="hidden" disabled="" class="form-control" name="id" value="5821"><input type="text" disabled="" class="form-control" name="coordenadas" value="-23.06834841983161,-46.52108056272749;-23.074033959895914,-46.51284081663374;-23.12456152574212,-46.54476983274702;-23.11982537398394,-46.553696224348585;">
                    </div>
                </row>

    </div>

    <script>
        //$('.cercas').hide();
        // This example creates a simple polygon representing the Bermuda Triangle.

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: { lat: -23.300459, lng: -45.968528 },
                mapTypeId: 'terrain'
            });

            $(".coordenadas-cercas").each(function (index) {

                var Coordenadas = $(this).find("input[name=coordenadas]").val();
                coordenadasList = Coordenadas.split(';')
                var t = [];

                for (var i = 0; i < coordenadasList.length; i++) {
                    t.push(
                        {
                            lat:...