javascript - Issue on Passing Dom val() and html() to Polygon Options in Drawing -
i trying pass values dom .val()
, .html()
this:
$("#drawpolygon").on("click",function(){ var polyname = $("#polydatasetname").val(); var polycolor = $("#polyfillcolor").val(); var polytranc = ($("#polytrancparency").html()).slice(2); var polybordercolor = $("#polybordercolor").val(); var polybordersize = $("#polybordersize").html(); var polybordertranc = ($("#polybordertransparency").html()).slice(2); });
i tried alert result correct when pass them polygonoptions options like:
polygonoptions: { fillcolor: polycolor, fillopacity: (polyfillcolor/100), strokecolor: polybordercolor, strokeweight:polybordersize, clickable: false, editable: true, zindex: 1 }
i getting following error message
can please let me know why happening , how can solve it? here code have drawing manager:
<script> var map; var drawingmanager $(document).ready(function () { var latlng = new google.maps.latlng(49.241943, -122.889318); var myoptions = { zoom: 12, center: latlng, disabledefaultui: true, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); $("#drawpolygon").on("click",function(){ var polyname = $("#polydatasetname").val(); var polycolor = $("#polyfillcolor").val(); var polytranc = ($("#polytrancparency").html()).slice(2); var polybordercolor = $("#polybordercolor").val(); var polybordersize = $("#polybordersize").html(); var polybordertranc = ($("#polybordertransparency").html()).slice(2); }); drawingmanager = new google.maps.drawing.drawingmanager({ drawingmode: google.maps.drawing.overlaytype.marker, drawingcontrol: true, drawingcontroloptions: { position: google.maps.controlposition.top_center, drawingmodes: [ google.maps.drawing.overlaytype.marker, google.maps.drawing.overlaytype.circle, google.maps.drawing.overlaytype.polygon, google.maps.drawing.overlaytype.polyline, google.maps.drawing.overlaytype.rectangle] }, polygonoptions: { fillcolor: polycolor, fillopacity: (polyfillcolor/100), strokecolor: polybordercolor, strokeweight:polybordersize, clickable: false, editable: true, zindex: 1 } }); </script>
the problem define polycolor(and other variables) locally inside of anonymous function executed when click on specified div , function executed, variables dicarded.
meaning when creating object polygonoptions, variables not defined(they not exist anymore).
to solve this, define variables inside of document.ready function:
$(document).ready(function() { var polyname; var polycolor; var polytranc; var polybordercolor; var polybordersize; var polybordertranc; ... });
then on click event assign values these variables:
$("#drawpolygon").on("click",function() { polyname = $("#polydatasetname").val(); polycolor = $("#polyfillcolor").val(); polytranc = ($("#polytrancparency").html()).slice(2); polybordercolor = $("#polybordercolor").val(); polybordersize = $("#polybordersize").html(); polybordertranc = ($("#polybordertransparency").html()).slice(2); }
and should work expected now.
Comments
Post a Comment