title: Google Maps Polygon - redraw after adding new points
body: <p>I have a script, where I need to be able to draw a poligon.
  Here is the <a href="http://jsfiddle.net/zoli/98nzyg4d/5/" rel="nofollow">current script</a>.</p>
  
  <p>When I add a new point, a new poligon is drawn over the old one, instead of redraw the current polygon with the new point added.
  I tried to add </p>
  
  <pre><code>    poligon.setMap(null);   
  </code></pre>
  
  <p>before creating the new poligon is created, but then the polygon will not apear at all.</p>
  
  <p>Can anyone tell me what am I doing wrong?</p>
  
  <p>I am new to Google maps API, so please be gentle.</p>
  
  <p>Thanks a lot for your help.</p>
  
  <p>code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var coords = [];
  var poligonCoords = [];
  var map = null;
  var poligon = null;
  
  function getMinX(a) {
    var ar = [];
    for (i = 0; i &lt; a.length; i++) {
      ar.push(a[i].x);
    }
    return Math.min.apply(Math, ar);
  }
  
  function getMaxX(a) {
    var ar = [];
    for (i = 0; i &lt; a.length; i++) {
      ar.push(a[i].x);
    }
    return Math.max.apply(Math, ar);
  }
  
  function getMinY(a) {
    var ar = [];
    for (i = 0; i &lt; a.length; i++) {
      ar.push(a[i].y);
    }
    return Math.min.apply(Math, ar);
  }
  
  function getMaxY(a) {
    var ar = [];
    for (i = 0; i &lt; a.length; i++) {
      ar.push(a[i].y);
    }
    return Math.max.apply(Math, ar);
  }
  
  function getCoords() {
    jQuery('ul#coords li').each(function() {
      var x = jQuery(this).children('input:first-child').val();
      var y = jQuery(this).children('input:last-child').val();
      coords[coords.length] = {
        "x": x,
        "y": y
      };
    });
  }
  
  function setPoligon() {
    if (!poligon) {}
    for (i = 0; i &lt; coords.length; i++) {
      var point = new google.maps.LatLng(coords[i].x, coords[i].y);
      poligonCoords.push(point);
    }
    poligon = new google.maps.Polygon({
      paths: poligonCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
  
    poligon.setMap(map);
  }
  
  function initialize() {
  
    getCoords();
  
    var minX = getMinX(coords);
    var minY = getMinY(coords);
  
    var maxX = getMaxX(coords);
    var maxY = getMaxY(coords);
  
    centerX = minX + ((maxX - minX) / 2);
    centerY = minY + ((maxY - minY) / 2);
    if (!centerX || !centerY) {
      centerX = 46.361416;
      centerY = 25.802191;
    }
    var mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(centerX, centerY),
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      scaleControl: true,
      streetViewControl: true
    };
  
  
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
    setPoligon();
  
    google.maps.event.addListener(map, 'dblclick', function(event) {
      var ev = event.latLng;
      document.getElementById("latLong").innerHTML = "" + ev.lat().toFixed(6) + ", " + ev.lng().toFixed(6) + "";
      jQuery("ul#coords").append(jQuery("ul#coords li:first-child").clone());
      jQuery("ul#coords li:last-child").children('input:first-child').val(ev.lat().toFixed(6));
      jQuery("ul#coords li:last-child").children('input:last-child').val(ev.lng().toFixed(6));
      getCoords();
      setPoligon();
    });
  
  }
  google.maps.event.addDomListener(window, 'load', initialize);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      html,
        body {
          height: 100%;
          margin: 0px;
          padding: 0px;
          position: relative;
        }
        #map-canvas {
          margin: 0px;
          padding: 0px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 20%;
        }
        #info {
          margin: 0px;
          padding: 1em;
          box-sizing: content-box;
          position: absolute;
          top: 80%;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ececec;
          border-top: 1px solid #cccccc;
          box-shadow: 0 0 .5em #636363;
          overflow: auto;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;div id='info'&gt;
    &lt;div class='row'&gt;
      &lt;ul id='coords'&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.216917'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.728241'&gt;
        &lt;/li&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.214539'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.729388'&gt;
        &lt;/li&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.211428'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.730610'&gt;
        &lt;/li&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.209813'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.725277'&gt;
        &lt;/li&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.209296'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.717523'&gt;
        &lt;/li&gt;
        &lt;li&gt;X:
          &lt;input type='text' name='coords[][x]' value='46.213830'&gt;Y:
          &lt;input type='text' name='coords[][y]' value='25.722928'&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    Info: &lt;span id='latLong'&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>