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>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/kmz/geoxml3.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 geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: true
  });
  geoXml.parseKmlString(kmlStr);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmlStr = '<Placemark><Style><LineStyle><color>ff0000ff</color><width>2</width></LineStyle><PolyStyle><fill>0</fill></PolyStyle><BalloonStyle><text><![CDATA[$[name]<br>PR0: $[PR0]<br>PR1: $[PR1]<br>PR2: $[PR2]]]></text></BalloonStyle></Style><ExtendedData><SchemaData schemaUrl="#seb"><Data name="PR0"><value>CORS</value></Data><Data name="PR1"><value>BRB</value></Data><Data name="PR2"><value>F15</value></Data></SchemaData></ExtendedData><MultiGeometry><Polygon><altitudeMode>clampToGround</altitudeMode><outerBoundaryIs><LinearRing><altitudeMode>clampToGround</altitudeMode><coordinates>71.0035714700001,38.4757616580001 71.0567352510001,38.398144523 71.1035044220001,38.422803406000138.4764993150001 71.0035714700001,38.4757616580001</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry></Placemark>';