title: How to redraw exactly the same polygon that was drawn by the user (more than 4 vertices)?
body: <p>My project involves allowing user to draw a polygon on Google Maps, and at a later even retrieve that shape. For this I'm storing the polygon path in my database, and querying it at a later stage to Draw it for the user again. This works when I have simple polygons (like Triangles, or squares), but complicated ones are seldom the same polygon as was drawn.</p>
  
  <p>I am getting the coordinates of path through: 
  <code>var polyArray = selectedShape.getPath().getArray();</code>
  I store these values in my database.</p>
  
  <p>To draw, I'm using google.maps.Polygon() : </p>
  
  <pre><code>var redrawnPolygon = new google.maps.Polygon({
          paths: polygonCoords
        });
  </code></pre>
  
  <p>As you can see the images of polygons are not the same as drawn, which makes sense because the vertices stored by getPath() can produce more than one polygon. How can I make sure that the original polygon is the one drawn? Shouldn't getPath() add more vertices automatically? Should I do them manually? How?</p>
  
  <p>Drawn by the user:
  <a href="https://i.stack.imgur.com/OS38Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OS38Q.png" alt="enter image description here"></a></p>
  
  <p>Redrawn using google.maps.Polygon()
  <a href="https://i.stack.imgur.com/Napdx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Napdx.png" alt="enter image description here"></a></p>