JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<link rel="stylesheet" href="https://google-developers.appspot.com/maps/documentation/utils/geojson/styles.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="panel">
      <div id="panel-content">
        <div id="panel-title">Simple GeoJSON Editor</div>
        <hr/>
        <div id="geojson-controls">
          <button onclick="document.getElementById('geojson-input').select();">Select All</button>
          <a id="download-link" href="data:;base64," download="geojson.json"><button>Download</button></a>
        </div>
        <textarea id="geojson-input"
            placeholder="Drag and drop GeoJSON onto the map or paste it here to begin editing."></textarea>
      </div>
    </div>

    <div id="map-container">
      <div id="map-holder"></div>

      <div id="drop-container">
        <div id="drop-silhouette"></div>
      </div>
    </div>

JavaScript

// The Google Map.
var map;

// The HTML element that contains the drop container
var dropContainer;
var panel;
var geoJsonInput;
var downloadLink;
var byId = function(element_id) {
    return document.getElementById(element_id);
}
function initMap() {
	// Initialize the map.
    map = new google.maps.Masp(byId('map-holder'), {
    	center: {lat:0, lng:0},
        zoom: 3
    });
    // google.maps.event.adDomListener(window, 'resize', resizeGeoJsonInput);
}

google.maps.event.addDomListener(window, 'load', initMap);