Google Map Drawing

by Camille Bechayda

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>



    <div id="panel">
      <div id="color-palette"></div>
      <div>
        <button id="delete-button">Delete Selected Shape</button>
          <button id="postdb">Save</button>
      <button id="getlocs">Get</button>
      </div>
    </div>
    <div id="map"></div>

CSS

#map, html, body {
        padding: 0;
        margin: 0;
        height: 100%;
      }

      #panel {
        width: 200px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        float: right;
        margin: 10px;
      }

      #color-palette {
        clear: both;
      }

      .color-button {
        width: 14px;
        height: 14px;
        font-size: 0;
        margin: 2px;
        float: left;
        cursor: pointer;
    display:none;
      }

      #delete-button {
        margin-top: 5px;
      }
            #getlocs {
        margin-top: 5px;
      }

JavaScript

var drawingManager;
   var map;
      var all_overlays = [];
      var polygons = [];
      var selectedShape;
      var colors = ['#F17c45','#1E90FF', '#32CD32', '#FF8C00', '#4B0082'];
      var selectedColor;
      var colorButtons = {};

      function clearSelection() {
        if (selectedShape) {
          selectedShape.setEditable(false);
          selectedShape = null;
        }
      }

      function setSelection(shape) {
        clearSelection();
        selectedShape = shape;
        shape.setEditable(true);
        selectColor(shape.get('fillColor') || shape.get('strokeColor'));
      }

      function deleteSelectedShape() {
            alert('deleteSelectedShape')
        if (selectedShape) {
          selectedShape.setMap(null);
        }
      }

      function deleteAllShape() {
      alert('deleteAllShape')
        for (var i=0; i < all_overlays.length; i++)
        {
          all_overlays[i].overlay.setMap(null);
        }
        all_overlays = [];
      }
      
      function postToDB() {

        
           console.log(polygons.length);
           for (var i = 0; i < polygons.length; i++) {
               var polygonBounds = polygons[i].getPath();
               // Iterate over the polygonBounds vertices.
               var PolyNum = i
               console.log(PolyNum);
               polygonBounds.forEach(function (xy, i) {
                   console.log('Coordinate: ' + PolyNum + ':' + i + '<br>' + xy.lat() + ',' + xy.lng());
               });
           }
        
      }
      
      function getLocations(){
      	        var triangleCoords = [
            {lat: -38.62741529362134, lng: 176.10292196273804},
            {lat: -38.63023145635632, lng: 176.10453128814697},
            {lat: -38.629996780353174, lng: 176.10043287277222}
        ];

        // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
 ...