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/polys/geoxml3.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

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 myparser = new geoXML3.parser({
    map: map,
    zoom: 7,
    markerOptions: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    }
  });
  myparser.parseKmlString(kmlStr);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document> <name>Massachusetts Cities</name> <Folder> <Placemark>  <name>Boston</name>  <description>Boston is the capital of and largest city in Massachusetts. The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description>  <LookAt>  <longitude>-71.05977300312775</longitude>  <latitude>42.35843100531216</latitude>  <altitude>0</altitude>  <heading>-2.107386233340164e-009</heading>  <tilt>0</tilt>  <range>34426.00143998101</range>  <altitudeMode>relativeToGround</altitudeMode>  <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>  </LookAt>  <styleUrl>#msn_ylw-pushpin9</styleUrl>  <Point>  <altitudeMode>absolute</altitudeMode>  <coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates>  </Point> </Placemark> <Placemark>  <name>Worcester</name>  <description>Worcester is known as the &quot;Heart of the Commonwealth&quot; due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description>  <LookAt>  <longitude>-71.80229299737233</longitude>  <latitude>42.2625930065606</latitude>  <altitude>0</altitude>  <heading>1.76716070878667e-009</heading>  <tilt>0</tilt>  <range>17233.50055269895</range>  <altitudeMode>relativeToGround</altitudeMode> ...