javascript - Save drawn polygon in googlemaps api -


hello guys try save drawn polygon google map api , , don't know how.i want save polygon(coordinates, or path , send them in form .this have until now, tried read documentation can't understand much.

<script>     function initmap() {         var map = new google.maps.map(document.getelementbyid('map'), {             center: {lat: 46.435812, lng: 27.639917},             zoom: 17,             maptypeid: 'hybrid'});         var drawingmanager = new google.maps.drawing.drawingmanager({            drawingmode: google.maps.drawing.overlaytype.marker,            drawingcontrol: true,            drawingcontroloptions: {                position: google.maps.controlposition.top_center,                drawingmodes: ['polygon']            },        });         drawingmanager.setmap(map);     }; </script> 

edit:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=aizasybr0yeeoubwc8qytig79dmhfozxr44wx5w&libraries=geometry,drawing&callback=initmap"></script> 

for polygon, same thing done in similar question: saving coordinates , data google maps in database, use appropriate event polygon (polygoncomplete) , process through path, adding coordinates appropriate form field:

google.maps.event.addlistener(drawingmanager, 'polygoncomplete', function(polygon) {   var coordstr = "";   (var = 0; < polygon.getpath().getlength(); i++) {     coordstr += polygon.getpath().getat(i).tourlvalue(6) + ";";     console.log(coordstr);     document.getelementbyid('coords').value = coordstr;   } }); 

proof of concept fiddle

code snippet:

function initmap() {    var map = new google.maps.map(document.getelementbyid('map'), {      center: {        lat: 46.435812,        lng: 27.639917      },      zoom: 17,      maptypeid: 'hybrid'    });      var drawingmanager = new google.maps.drawing.drawingmanager({      drawingmode: google.maps.drawing.overlaytype.polygon,      drawingcontrol: true,      drawingcontroloptions: {        position: google.maps.controlposition.top_center,        drawingmodes: ['polygon']      },    });    google.maps.event.addlistener(drawingmanager, 'polygoncomplete', function(polygon) {      var coordstr = "";      (var = 0; < polygon.getpath().getlength(); i++) {        coordstr += polygon.getpath().getat(i).tourlvalue(6) + ";";      }      document.getelementbyid('coords').value = coordstr;    });    drawingmanager.setmap(map);  };  google.maps.event.adddomlistener(window, "load", initmap);
html,  body,  #map {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>  <input id="coords" style="width:600px" />  <div id="map"></div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -