drawing manager polygen update value doesnt get the latest value always

340
May 07, 2017, at 01:37 AM

dears i have this code where i am using a map to draw a polygen and update its values when i change the drawing manager points i get the latest lat long values but its not always correct sometime nothing changes am i triggering a worng event or something please check the code.

  var drawingManager;
  var selectedShape;
  var map;
  var wkt = new Wkt.Wkt();
  var wkt2 = new Wkt.Wkt();
  function clearSelection() {
    if (selectedShape) {
    selectedShape.setEditable(true);
    selectedShape = null;
    }
  }
  function setSelection(shape) {
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
  }
  function deleteSelectedShape(e) {
  if (selectedShape && e.keyCode==46) {
    selectedShape.setMap(null);
    }
    // To show:
    drawingManager.setOptions({
    drawingControl: true
    });
          drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  }
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 21.2854, lng: 39.2376},
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true
    });
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
    });
    drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  console.log('drawing completed');
  if (e.type != google.maps.drawing.OverlayType.MARKER) {
    // Switch back to non-drawing mode after drawing a shape.
    drawingManager.setDrawingMode(null);
    // To hide:
    drawingManager.setOptions({
      drawingControl: true
    });
    // Add an event listener that selects the newly-drawn shape when the user
    // mouses down on it.
    var newShape = e.overlay;
    newShape.type = e.type;
    google.maps.event.addListener(newShape, 'click', function() {
      setSelection(newShape);
    });
    setSelection(newShape);
    wkt.fromObject(e.overlay);
    console.log(wkt.write());
    $('#Form-field-Zone-area').val(wkt.write());
       // wkt2.fromObject(event.overlay); 
       // overlayClickListener(event.overlay);
       // console.log(event.overlay.getPath().getArray());
  }
});
function overlayClickListener(overlay) {
    google.maps.event.addListener(overlay, "mouseup", function(event){
        wkt2.fromObject(overlay);
        $('#Form-field-Zone-area').val(wkt2.write());
        console.log(wkt2.write());
           $('#vertices').val(wkt2.write());
        });
    }
google.maps.event.addDomListener(document, 'keyup', deleteSelectedShape);
if($('#Form-field-Zone-area').val()){
      console.log($('#Form-field-Zone-area').val());
      wkt.read($('#Form-field-Zone-area').val());
      var obj = wkt.toObject(map.defaults);
      obj.setMap(map); // Add it to the map
              //map.features.push(obj);
      drawingManager.setDrawingMode(null);
      // To hide:
      drawingManager.setOptions({
      drawingControl: false
      });

    // Add an event listener that selects the newly-drawn shape when the user
    // mouses down on it.
    var newShape = obj;
    google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
          });
          setSelection(newShape);
       wkt2.fromObject(newShape); 
       overlayClickListener(newShape);

    }
  }

the html code:

       <div  class="col-xs-12" class="form-group">
         <div id="map" class="polygon-map" style=""></div>
    <input value ="{{$location->polygen}}" type="hidden" id="Form-field-Zone-area" name="polygen">

        </div>
Rent Charter Buses Company
READ ALSO
Dynamically add table rows with dynamic data

Dynamically add table rows with dynamic data

How can I dynamically populate select_tag with data based on another select_tag in rails?

338
Replicate textarea animation functionality

Replicate textarea animation functionality

My JS is limited, and I am having trouble replicating <textarea> functionality I have seen in the Materialize framework (scroll to the <textarea> section)

334
set select value with jquery

set select value with jquery

Christ is Risen,

449
ASPX Codebehind call Page Client script from WebMethod

ASPX Codebehind call Page Client script from WebMethod

I have an ASPX page that calls the server with an AJAX call that is inside a javascript functionI need to process the (json) data that is sent to the server via and then return data from the server back to the client and call a function with parameters

408