JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var xml = parseXml(xmlStr);
    var markers = xml.getElementsByTagName("marker");
    var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<markers.length; i++) {
      var polygonStr = markers[i].getAttribute("shape");
      if (polygonStr.indexOf("POLYGON") != -1) {
         var paths = parsePolyStrings(polygonStr);
         for (var j=0; j<paths[0].length;j++) {
            console.log(paths[0][j].toUrlValue(6));
            bounds.extend(paths[0][j]);
         }
         var poly = new google.maps.Polygon({
                paths : paths,
                strokeColor : '#FF0000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : '#FF0000',
                fillOpacity : 0.35
            });
            poly.setMap(map);
      }
    }
    map.fitBounds(bounds);
}
// from https://stackoverflow.com/questions/16482303/convert-well-known-text-wkt-from-mysql-to-google-maps-polygons-with-php/16502322#16502322
// but with latitude and longitude reversed
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) {
                    lng = Number(tmp[j]);
                    lat = Number(tmp[j + 1]);
                    tmpArr.push(new...