title: Drawing Polygon in google map using javascript
body: <p>I want to draw polygon in google map and i am using the example code at <a href="http://jsfiddle.net/rvsMH/1/" rel="noreferrer">http://jsfiddle.net/rvsMH/1/</a> but its not working and not getting array or lat long value.I don't know whats the problem. I am new to google maps please help anybody. Thanks in advance.  </p>
  
   
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Drawing tools&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        html, body, #map-canvas {
          height: 70%;
          margin: 0px;
          padding: 0px
        }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing"&gt;&lt;/script&gt;
      &lt;script&gt;
  var map; // Global declaration of the map
              var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
              var lat_longs = new Array();
              var markers = new Array();
              var drawingManager;
              function initialize() {
                   var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
                  var myOptions = {
                      zoom: 13,
                      center: myLatlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP}
                  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                  drawingManager = new google.maps.drawing.DrawingManager({
                  drawingMode: google.maps.drawing.OverlayType.POLYGON,
                  drawingControl: true,
                  drawingControlOptions: {
                      position: google.maps.ControlPosition.TOP_CENTER,
                      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                  },
                          polygonOptions: {
                              editable: true
                          }
              });
              drawingManager.setMap(map);
  
              google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
                  var newShape = event.overlay;
                  newShape.type = event.type;
              });
  
              google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
                  overlayClickListener(event.overlay);
                  $('#vertices').val(event.overlay.getPath().getArray());
              });
          }
  function overlayClickListener(overlay) {
      google.maps.event.addListener(overlay, "mouseup", function(event){
          $('#vertices').val(overlay.getPath().getArray());
      });
  }
   initialize();
  
  $(function(){
      $('#save').click(function(){
          //iterate polygon vertices?
      });
  });
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
      &lt;form method="post" accept-charset="utf-8" id="map_form"&gt;
      &lt;input type="text" name="vertices" value="" id="vertices"  /&gt;
      &lt;input type="button" name="save" value="Save!" id="save"  /&gt;
  &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>