JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

<div id="map_canvas" style="width:800px; height:600px;"></div>

JavaScript

var polys = ['POLYGON((23.953261 37.733372,23.953623 37.733202,23.953572 37.733132,23.954075 37.732896,23.954126 37.732966,23.954550 37.732767,23.954566 37.732698,23.954467 37.732603,23.954258 37.732476,23.953007 37.733041,23.953207 37.733303,23.953261 37.733372),(23.953695 37.732771,23.954243 37.732524,23.954427 37.732635,23.954496 37.732702,23.954484 37.732757,23.954133 37.732921,23.954087 37.732859,23.953525 37.733122,23.953577 37.733192,23.953292 37.733326,23.953080 37.733050,23.953695 37.732771))', 'MULTIPOLYGON(((23.949134 37.734540,23.948811 37.734215,23.948775 37.734238,23.949077 37.734541,23.948689 37.734820,23.948809 37.734747,23.949134 37.734540)),((23.948536 37.734531,23.948449 37.734447,23.948414 37.734470,23.948472 37.734526,23.948420 37.734560,23.948449 37.734588,23.948536 37.734531)))'];


function parsePolyStrings(ps) {
    var i, j, lat, lng, tmp, tmpArr,
        arr = [],
        //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
        m = ps.match(/\([^\(\)]+\)/g);
    if (m !== null) {
        for (i = 0; i < m.length; i++) {
            //match all numeric strings
            tmp = m[i].match(/-?\d+\.?\d*/g);
            if (tmp !== null) {
                //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
                for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
                    lat = Number(tmp[j]);
                    lng = Number(tmp[j + 1]);
                    tmpArr.push(new google.maps.LatLng(lat, lng));
                }
                arr.push(tmpArr);
            }
        }
    }
    //array of arrays of LatLng objects, or empty array
    return arr;
}

function init() {
    var i, tmp,
        myOptions = {
            zoom: 16,
            center: new google.maps.LatLng(23.9511, 37.7337),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById("map_canvas"),...