title: Django - How to save "Google Maps Polygon" to Model?
body: <p>I want to create a polygon on Googlemaps, which should be posted to my postgres-database using Django/GeoDjango.</p>
  
  <p>User select their area via Google Maps, Polygon should be saved.
  i want to todo calculations on these Polygons.
  On the other hand, other polygons should be displayed on the map.</p>
  
  <p>I think, I have to use ajax/jquery but yes, im a django noob. :D</p>
  
  <p>(Sorry for my English)</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>from django.contrib.gis.db import models
  
  class Area(models.Model):
  owner = models.ForeignKey(User)
  poly = models.PolygonField()
  objects = models.GeoManager()
  </code></pre>
  
  <p><strong>Views.py</strong></p>
  
  <pre><code>@csrf_protect
  def create_area(request):
  if request.user.is_authenticated():
      return render(request, 'basics/map_claim.html')
  </code></pre>
  
  <p><strong>GoogleMaps.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  
  
   var map;
   var marker;
      var polygon;
   var myCenter=new google.maps.LatLng(51.508742,-0.120850);
   var geocoder;
   var infowindow;
      var polypoints=[];
  
  
   function initialize() {
       geocoder = new google.maps.Geocoder()
     var mapProp = {
       center:myCenter,
       zoom:2,
       mapTypeId:google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
          panControl:false,
          rotateControl:false,
      mapTypeControl:true,
          streetViewControl: false
      };
      marker=null;
  
      map = new google.maps.Map(document.getElementById("map-container"),mapProp);
      google.maps.event.addListener(map, 'click', function(event) {
              polypoints.push(event.latLng);
              placePolygon();
              console.log(polypoints);
      });
   }
  
  
      function placePolygon(){
          if(polygon){
              polygon.setPaths(polypoints);
          }
          else {
                  polygon=new google.maps.Polygon({
                  paths: polypoints,
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 3,
                  fillColor: '#FF0000',
                  fillOpacity: 0.35,
                  editable: true
              });
          } polygon.setMap(map);
      }
  
   function getLocation() {
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(showPosition);
       } else {
           x.innerHTML = "Geolocation is not supported";
           y.innerHTML = "by this browser.";
       }
   }
  
   function showPosition(position) {
       var latlng={lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude)};
       placeMarker(latlng);
   }
  
  
   function placeMarker(location) {
       if(marker){
           infowindow.close();
           marker.setPosition(location);
           geocoder.geocode({'location': location}, function(results, status){
               infowindow.setContent(results[0].formatted_address);
               infowindow.open(map,marker);
           })
       }
       else{
           marker = new google.maps.Marker({
           position: location,
           map: map,
           });
           geocoder.geocode({'location': location}, function(results, status){
               infowindow = new google.maps.InfoWindow({content: results[0].formatted_address});
               infowindow.open(map,marker);
           })
           map.setZoom(6);
       }
    map.setCenter(marker.getPosition());
   }
   google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;
    $('#location-map-modal').on('shown.bs.modal', function(e) {
          initialize();
      });
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for everything. :/</p>