title: How to pass DOM val() and html() to polygon options in drawing
body: <p>I an trying to pass some values from DOM <code>.val()</code> and <code>.html()</code> like this:</p>
  <pre><code>$(&quot;#drawPolygon&quot;).on(&quot;click&quot;,function(){
      var polyName = $(&quot;#polyDatasetName&quot;).val();
      var polyColor = $(&quot;#polyFillColor&quot;).val();
      var polyTranc = ($(&quot;#polyTrancparency&quot;).html()).slice(2);
      var polyBorderColor = $(&quot;#polyBorderColor&quot;).val();
      var polyBorderSize = $(&quot;#polyBorderSize&quot;).html();
      var polyBorderTranc = ($(&quot;#polyBorderTransparency&quot;).html()).slice(2);
   });
  </code></pre>
  <p>I tried to alert the result which all where perfectly correct but when I pass them as PolygonOptions options like:</p>
  <pre><code> polygonOptions: {
            fillColor: polyColor,
            fillOpacity: (polyFillColor/100),
            strokeColor: polyBorderColor,
            strokeWeight:polyBorderSize,
            clickable: false,
            editable: true,
            zIndex: 1
     }
  </code></pre>
  <p>I am  getting following error message:</p>
  <p><img src="https://i.stack.imgur.com/dqrpf.png" alt="enter image description here" /></p>
  <p>Why is this happening and how I can solve it? Here is the code which I have for Drawing Manager:</p>
  <pre><code>&lt;script&gt;
  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(&quot;map_canvas&quot;), myOptions);
   
      $(&quot;#drawPolygon&quot;).on(&quot;click&quot;,function(){
          var polyName = $(&quot;#polyDatasetName&quot;).val();
          var polyColor = $(&quot;#polyFillColor&quot;).val();
          var polyTranc = ($(&quot;#polyTrancparency&quot;).html()).slice(2);
          var polyBorderColor = $(&quot;#polyBorderColor&quot;).val();
          var polyBorderSize = $(&quot;#polyBorderSize&quot;).html();
          var polyBorderTranc = ($(&quot;#polyBorderTransparency&quot;).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
      }
   });
   &lt;/script&gt;
  </code></pre>