Cannot draw polygon in Google Maps

I have the following code when drawing a Polygon using Google Maps V3 API:

   var configurePolygonOptions = function configurePolygonOptions(strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity) {
this.strokeColor = strokeColor;
this.strokeWeight = strokeWeight;
this.strokeOpacity = strokeOpacity;
this.fillColor = fillColor;
this.fillOpacity = fillOpacity;

configurePolygonOptions.prototype.setPaths = function setPathsForPolygon(paths) {
this.paths = paths;
console.log('The points have been added to polygon options');

configurePolygonOptions.prototype.setMap = function (map) { = map;

//Use in initialize:
  var polyPoints = [];
polyPoints.splice(0, 0, new google.maps.LatLng(-34.9290, 138.6010), new google.maps.LatLng(-37.8136, 144.9631), new google.maps.LatLng(-27.4679, 153.0278));
var polygonOptions = new configurePolygonOptions('#FF0000', 2, 0.8, '#FF0000', 0.35);
var pgon = createPolygon(polygonOptions);
console.log('polygon has been added');

I find that the code does not draw a polygon on the map as I would expect it to.

This is a fiddle regarding the problem:


You will see the reason when you add this to configurePolygonOptions.prototype.setMap :

alert('call of configurePolygonOptions.setMap');

Although polygonOptions.setMap will not be called somewhere, the alert will appear.

The reason: when you supply polygonOptions as argument to google.maps.Polygon, all methods of polygonOptions will overwrite the built-in methods of the google.maps.Polygon.

Your custom setMap-function simply changes the property, what will have no effect after the Polygon-instance has been created, you must invoke the setter-method MVCObject instead:


But the best solution would be to use method-names that don't compete with the built-in methods(when you must use your attempt at all, currently I don't see there any benefit).

You can try this

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Map V3 Polygon Creator</title>
    <meta name="keywords" content="polygon,creator,google map,v3,draw,paint">
    <meta name="description" content="Google Map V3 Polygon Creator">

    <link rel="stylesheet" type="text/css" href="">

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <script type="text/javascript">

          //create map
          var boundaryPolygon;
            var singapoerCenter=new google.maps.LatLng(1.37584, 103.829);
            var myOptions = {
            zoom: 10,
            center: singapoerCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         map = new google.maps.Map(document.getElementById('main-map'), myOptions);

         var creator = new PolygonCreator(map);

                creator=new PolygonCreator(map);

         //show paths
                    $('#dataPanel').append('Please first create a polygon');




    <div>Click and select the point to create polygon  </div>
    <div> please check below screenshot and follow the step on map given in the below
    <img src="gmap_capture.png">
    <h1>    ---------------------- Polygon Demo ---------------------------------</h1>
    <div id="header">

    <div id="main-map">
    <div id="side">
        <input id="reset" value="Reset" type="button" class="navi"/>
        <input id="showData"  value="Show Paths (class function) " type="button" class="navi"/>
        <div   id="dataPanel">

Need Your Help

A test run must be created with at least one test case

visual-studio-2010 tfs microsoft-test-manager tcm

Attempting to automate a test run via the command-line Microsoft Test Manager utility, tcm.exe.