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="btnLoad1">Load 1</button>
      <button id="btnLoad2">Load 2</button> 
    </div>
  </div>
</div>

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

CSS

html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   #map {
     height: 100%;
   }
   
   #panel {
     float: left;
     width: 20%;
     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;
var infowindow = new google.maps.InfoWindow();
var loadedPolygon;

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
  });

  loadBenchmarks();
  initControls();

}

function loadBenchmarks() {

  var json1 = {
    "benchmarks": [{
      "title": "Benchmark 1 <br> taupo",
      "lat": -38.62664418215437,
      "lng": 176.10270638018847
    }, {
      "title": "Benchmark 2",
      "lat": -38.626711235654604,
      "lng": 176.1050023511052
    }, {
      "title": "Benchmark 3",
      "lat": -38.62723089815539,
      "lng": 176.10019583255053
    }]
  };

  $.each(json1.benchmarks, function(key, data) {

    var latLng = new google.maps.LatLng(data.lat, data.lng);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title
    });
    var details = data.title + ".";

    bindInfoWindow(marker, map, infowindow, details);
  });
}

//
function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

function loadPolygonsFromDB() {
  deletePolygons();

  map.data.addGeoJson(loadedPolygon);

}

function deletePolygons() {
  map.data.forEach(function(feature) {
    // If you want, check here for some constraints.
    map.data.remove(feature);
  });
}

function savePolygonsToDB() {
  map.data.toGeoJson(function(json) {
    console.log(JSON.stringify(json));
  });
}

function initControls() {

  $("#btnDelete").click(function() {
    deletePolygons();
  });
  $("#btnSave").click(function() {
   ...