Question

151

Drawing Polygon in google map using javascript

rated 0 times [ 154] [ 3] / answers: 1 / hits: 16405 / 10 Years ago, sun, december 28, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 10 Years ago erinh · Accepted Answer

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>