Load Save GMaps

by Camille Bechayda

HTML

<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&libraries=drawing,geometry"></script>
<div id="panel">
  <div id="panel-content">
    <div id="controls">
      <button id="btnDelete">Delete</button>
      <button id="btnSave">Save</button>
      <button id="btnLoad">Load</button>
    </div>
  </div>
</div>

<div id="map"></div>

CSS

html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   #map {
     height: 100%;
   }
   
   #panel {
     float: left;
     width: 35%;
     height: 100%;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     outline: 1px solid rgba(0, 0, 0, 0.2);
     z-index: 100;
   }
   
   #controls {
     padding-bottom: 8px;
   }

JavaScript

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {
      lat: -38.6295,
      lng: 176.1028
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    // only show roadmap type of map, and disable ability to switch to other type
    mapTypeControl: false
  });

  map.data.setControls(['Polygon']);
  map.data.setStyle({
    editable: true,
    draggable: true
  });
  bindDataLayerListeners(map.data);


  loadPolygons(map); //load saved data
}


// Apply listeners to refresh the GeoJson display on a given data layer.
function bindDataLayerListeners(dataLayer) {
  dataLayer.addListener('addfeature', savePolygon);
  dataLayer.addListener('removefeature', savePolygon);
  dataLayer.addListener('setgeometry', savePolygon);
}

//Load from local storage
function loadPolygons(map) {
  var data = JSON.parse(localStorage.getItem('geoData'));


  map.data.forEach(function(f) {
    map.data.remove(f);
  });
  map.data.addGeoJson(data)
  console.log("Data Loaded");
  console.log(data);

  initControls(data);
}

function loadPolygonsFromDB(data) {
  deletePolygons(data);

  var loadedPolygon = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [176.10179342329502, -38.62508517059725],
            [176.10454000532627, -38.62520251673278],
            [176.10348857939243, -38.627147081877744],
            [176.10179342329502, -38.62508517059725]
          ]
        ]
      },
      "properties": {}
    }]
  }

  map.data.addGeoJson(loadedPolygon);
  console.log("loaded from button");

}

function deletePolygons(data) {
  var clientData = map.data;
  console.log(clientData);
  console.log(data);

  var datalength = data.features.length;

  for (i = 0; i <= datalength; i++) {
    data.features.splice(0, 1);
    console.log(i);
  }

  //reload 
  localStorage.setItem('geoData',...