javascript google-maps google-maps-api-3

Drawing Polygon in google map using javascript

I want to draw polygon in google map and I am using the example code at http://jsfiddle.net/rvsMH/1/ but it's not working and not getting array or lat/long value. I don't know what's the problem.

<%-- Document : newjsp Created on : Dec 28, 2014, 9:13:28 AM Author : Mona --%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 70%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>
    <script>
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?
    });
});

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <form method="post" accept-charset="utf-8" id="map_form">
    <input type="text" name="vertices" value="" id="vertices"  />
    <input type="button" name="save" value="Save!" id="save"  />
</form>
  </body>
</html>

Solution

You need to run the initialize function after the page's DOM is loaded. Currently initialize is run inline before the DOM is rendered. Use either the <body> onload event or the Google Maps Javascript API v3 addDomListener on window to run that function:

google.maps.event.addDomListener(window, 'load', initialize);

working code snippet:

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());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

$(function() {
  $('#save').click(function() {
    //iterate polygon vertices?
  });
});

html,
body,
#map-canvas {
  height: 90%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/* mask error:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
*/
function dummy() {};
window.dummy = dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=dummy"></script>
<div id="map-canvas"></div>
<form method="post" accept-charset="utf-8" id="map_form">
  <input type="text" name="vertices" value="" id="vertices" />
  <input type="button" name="save" value="Save!" id="save" />
</form>