javascript - how to draw polygons one above another polygon -

i'm new google maps api ,i'm trying draw polygons using google maps api , want show project of polygon , project polygon above (inside) allow draw building polygon.

i'm trying clear polygon objects before import new geojson data , create new objects.i can't seem setmap(null) function work correctly. can kindly let me know failing. demo

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <input type="hidden" id="center_point" value="12.939884,77.62540710000007" /> <input type="hidden"  id="projectpolygon" value="" /> <input type="hidden"  id="autocompletelat" value="12.939884" /> <input type="hidden"  id="autocompletelng" value="77.62540710000007" /> <input type="hidden"  id="poly_map_codes" value="" /> <input type="hidden"  id="zoom_level" value="18" /> <textarea id="xml_valuesmain" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea> <textarea id="xml_values" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea> <div id="init_map" style="height: 600px;"></div> <script> $(function(){     initmap(); });  function initmap()  {     var polygons = [];     var coordinates = [];     var markers=[];     var latt=$('#autocompletelat').val();      var lngg=$('#autocompletelng').val();     var amsterdam = new google.maps.latlng(latt,lngg);     var zoom_level=parseint($('#zoom_level').val());     var map = new google.maps.map(document.getelementbyid('init_map'),{ center: amsterdam, zoom: zoom_level, maptypeid:google.maps.maptypeid.satellite });      drawsecondpolygon(); function drawsecondpolygon() {     google.maps.event.trigger(map, 'refresh');     var data =$('#xml_values').val();     var jsondata = json.parse(data);     var polygons = [];     console.log("polygon length="+polygons.length);     for( var = 0; < polygons.length; i++ )     {         polygons[i].setmap(null)     }       polygons.length = 0;      (var = 0; < jsondata.length; i++)      {         var latarr = jsondata[i].latlng;         var source_d = jsondata[i].source;         arr = [];         for(j=0; j<latarr.length;j++)         {             var lat=latarr[j].lat;             var lng=latarr[j].lng;             arr.push(new google.maps.latlng(parsefloat(lat),parsefloat(lng)));         }          if(source_d=="project") { var fillcolor='#da70d6'; var strokecolr='#ba55d3'; var editval=false; }         else if(source_d=="tower") { var fillcolor='#ff8800'; var strokecolr='#ff8800'; var editval=true; }         else if(source_d=="amenity") { var fillcolor='#990000'; var strokecolr='#990000'; var editval=false; }         else { var fillcolor='#66ff00'; var strokecolr='#66ff00'; var editval=false; }     polygons.push(new google.maps.polygon({         paths: arr,         source:source_d,         strokecolor: strokecolr,         strokeopacity: 0.8,         strokeweight: 2,         editable:editval,         clickable:true,         fillcolor: fillcolor,         fillopacity: 0.35     }));     console.log("polygons.length="+polygons.length);     polygons[polygons.length-1].setmap(null);     polygons[polygons.length-1].setmap(map);      if(editval==false)      {           console.log("something working fine");             google.maps.event.addlistener(polygons[polygons.length-1], 'click', function (clickevent)              {                 polygons[polygons.length-1].setmap(null);                 var newlatlng=$('#poly_map_codes').val();                 var clickeventlat=clickevent.latlng.lat();                 var clickeventlng=clickevent.latlng.lng();                 if(newlatlng!='') { newlatlng+=","+clickeventlat+" "+clickeventlng;  }                 else { newlatlng+=clickeventlat+" "+clickeventlng; }                 $('#poly_map_codes').val(newlatlng);                 //console.log(newlatlng);                 //drawsecondpolygon();                 if(newlatlng)                 {                     var getlatlng=newlatlng;                    var getlatlngarr=getlatlng.split(",");                    var main_latlngarr=[];                    for(i=0; i<getlatlngarr.length; i++)                    {                       var my_object={};                       var getlatlngexp=getlatlngarr[i].split(" ");                       my_object.lat=getlatlngexp[0];                       my_object.lng=getlatlngexp[1];                       main_latlngarr.push(my_object);                         }                    var latlngobj={};                    latlngobj.source="tower";                    latlngobj.latlng=main_latlngarr;                      var oldpolyarr=$('#xml_valuesmain').val();                    var oldpolyarr=json.parse(oldpolyarr);                    oldpolyarr.push(latlngobj);                    $('#xml_values').val(json.stringify(oldpolyarr));                    polygons[polygons.length-1].setmap(null);                    drawsecondpolygon();                    console.log("oldpolyarr="+json.stringify(oldpolyarr));                    }             });          }                 }       }           } </script>   

at first redeclare var polygons = []; in drawsecondpolygon function override content of same variable declared in initmap ..

thi comment line .. can use parent polygons array

function drawsecondpolygon() {    google.maps.event.trigger(map, 'refresh');    var data =$('#xml_values').val();    var jsondata = json.parse(data);    //var polygons = [];