title: Remembering Points with Google Maps Geometry
body: <p>I'm using a plugin for Google Maps Geometry called <a href="http://maps.co.mecklenburg.nc.us/geoportal/" rel="nofollow noreferrer">GeoPortal</a> to work our measurements on the roof of buildings. </p>
  
  <p>I've got the plugin working fine into my application, it picks up on the Longitude and Latitude of a previous page where they are dynamically created from an entered address.</p>
  
  <p>The issue I am having is that people need to be able to navigate backwards and forwards through the application, meaning that the area plot needs to be remembered, so when they navigate back to that page they will not have to redraw the area every time. </p>
  
  <p>In example I need to remember this plot layout for when the person navigates back to the page:</p>
  
  <p><img src="https://i.stack.imgur.com/mnfVx.png" alt="enter image description here"></p>
  
  <p><em>My code is as follows:</em></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var map;
  
  var measure = {
      mvcLine: new google.maps.MVCArray(),
      mvcPolygon: new google.maps.MVCArray(),
      mvcMarkers: new google.maps.MVCArray(),
      line: null,
      polygon: null
  };
  
  jQuery(document).ready(function() {
  
      map = new google.maps.Map(document.getElementById("map"), {
          zoom: 21,
          center: new google.maps.LatLng(51.502378,-0.114348),
          mapTypeId: google.maps.MapTypeId.HYBRID,
          draggableCursor: "crosshair" 
      });
  
  
      google.maps.event.addListener(map, "click", function(evt) {
          measureAdd(evt.latLng);
      });
  
  });
  
  
  function measureAdd(latLng) {
  
      var marker = new google.maps.Marker({
          map: map,
          position: latLng,
          draggable: true,
          raiseOnDrag: false,
          title: "Drag me to change shape",
          icon: new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))
      });
  
      measure.mvcLine.push(latLng);
      measure.mvcPolygon.push(latLng);
  
      measure.mvcMarkers.push(marker);
  
      var latLngIndex = measure.mvcLine.getLength() - 1;
  
      google.maps.event.addListener(marker, "mouseover", function() {
          marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex-hover.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8)));
      });
  
      google.maps.event.addListener(marker, "mouseout", function() {
          marker.setIcon(new google.maps.MarkerImage("http://maps.co.mecklenburg.nc.us/geoportal/img/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)));
      });
  
      google.maps.event.addListener(marker, "drag", function(evt) {
          measure.mvcLine.setAt(latLngIndex, evt.latLng);
          measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
      });
  
      google.maps.event.addListener(marker, "dragend", function() {
          if (measure.mvcLine.getLength() &gt; 1) {
              measureCalc();
          }
      });
  
      if (measure.mvcLine.getLength() &gt; 1) {
  
          if (!measure.line) {
  
              measure.line = new google.maps.Polyline({
                  map: map,
                  clickable: false,
                  strokeColor: "#FF0000",
                  strokeOpacity: 1,
                  strokeWeight: 3,
                  path:measure. mvcLine
              });
  
          }
  
          if (measure.mvcPolygon.getLength() &gt; 2) {
  
              if (!measure.polygon) {
  
                  measure.polygon = new google.maps.Polygon({
                      clickable: false,
                      map: map,
                      fillOpacity: 0.25,
                      strokeOpacity: 0,
                      paths: measure.mvcPolygon
                  });
  
              }
  
          }
  
      }
  
      if (measure.mvcLine.getLength() &gt; 1) {
          measureCalc();
      }
  
  }
  
  function measureCalc() {
  
      var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());
      jQuery("#span-length").text(length.toFixed(1))
  
      if (measure.mvcPolygon.getLength() &gt; 2) {
          var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
          jQuery("#span-area").text(area.toFixed(1));
          document.getElementById('RoofArea').value = area.toFixed(1); 
          document.getElementById('submit').disabled = false;
      }
  
  
  }
  
  function measureReset() {
  
      if (measure.polygon) {
          measure.polygon.setMap(null);
          measure.polygon = null;
      }
      if (measure.line) {
          measure.line.setMap(null);
          measure.line = null
      }
  
      measure.mvcLine.clear();
      measure.mvcPolygon.clear();
  
      measure.mvcMarkers.forEach(function(elem, index) {
          elem.setMap(null);
      });
      measure.mvcMarkers.clear();
  
      jQuery("#span-length,#span-area").text(0);
      document.getElementById('submit').disabled = true;
  
  }
  </code></pre>
  
  <p><strong>HTML/CSS</strong></p>
  
  <pre><code>&lt;style&gt;
      #map {
      width: 500px;
      height: 400px;
      margin: 0 auto; 
      border: 5px solid #2F4B9E;
      }
  &lt;/style&gt;
  
  &lt;div&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;p&gt;Length (red line): &lt;span id="span-length"&gt;0&lt;/span&gt; mt&lt;br /&gt;
      Area (grey area): &lt;span id="span-area"&gt;0&lt;/span&gt; mt&amp;sup2;&lt;br /&gt; 
      &lt;a href="javascript:measureReset();"&gt;Reset Measure&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/uwhmJ/1/" rel="nofollow noreferrer">jsFiddle</a></strong></p>