index.html

<html><body >


<div id="array_area_form_elements">
</div>

<div id="mapspace" style="width: 968px; height: 480px;"></div>

<script src="https://maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry,drawing" type="text/javascript"></script>
<script src="maps.js"></script>

  <div id="array_area">
  "some words come here"
  </div>

<div id='controls'>
  rows: <input type="text" id='rows'/>
  columns: <input type="text" id='columns'/>
  <button value='draw' id='submitButton'>draw</button>
</div>
<!-- todo: box size and spacing, hide prev boxes -->
<!-- related: better array controls -->

<div id="info">
  number of boxen: <span id='boxNum'></span>
<div>

<div id="otherControls">
  <button value='drawExclusionRectangle' id='drawExclRect'>draw the deleting rectangle</button>
</div>
</body></html>