google maps - Toggle overlay in a Primefaces GoogleMap -

i using primefaces gmap show markers , circle overlays on markers. want toggle circle overlay on button click. idea how can that? using jsf 2.2 , primefaces 3.4.2.

this how load map in jsf page.

<p:gmap center="21, 78" id="map"  zoom="2"  type="roadmap" style="width:99%;height:90%;position:absolute" model="#{scnbean.supplychainmapmodel}" widgetvar="mapvar"> 

this how load markers , circle overlays in backing bean.

@postconstruct public void viewsupplychainnetwork(){     (node node : supplychainnodes) {         latlng coord = new latlng(node.getlatitude(), node.getlongitude());         marker = new marker(coord, node.getaddress(), node, getmarkericon(node.getnodetype()));         supplychainmapmodel.addoverlay(marker);         //adding circle overlay         circle circle1 = new circle(coord, riskval*10000);           circle1.setstrokecolor("#d93c3c");           circle1.setfillcolor("#d93c3c");           circle1.setfillopacity(0.7);         supplychainmapmodel.addoverlay(circle1);     } 

here how button on map created using javascript

function heatmapcontrol(heatmapcontroldiv, gmap) {     heatmapcontroldiv.style.padding = '5px';                                             var controlui = document.createelement('div');     controlui.title = 'heat map';     heatmapcontroldiv.appendchild(controlui);     var controltext = document.createelement('div');     controltext.innerhtml = '<strong>heat map</strong>';     controlui.appendchild(controltext);     google.maps.event.adddomlistener(controlui, 'click', function() {                                         heatmap.setmap(heatmap.getmap() ? null : gmap);                                     }); 

i want make circle overlay toggle on click of button on map. how can achieve this?

i move mapmodel requestscoped bean, let's call somerequestscopedmapbean

it should have reference current bean managedproperty

your xhtml work this: (i don't think there need create javascript, dit commandbutton)

    <p:gmap     model="#{somerequestscopedmapbean.supplychainmapmodel}"     widgetvar="mapvar"     id="pgmapid">  <p:commandbutton value="toggle circles"     actionlistener="#{scnbean.toggleshowcircles}"     ajax="true"     update="pgmapid"     /> 

here's callback action, in viewscoped backing bean

    public void toggleshowcircles(){     if(showcircles)         showcircles = false;     else          showcircles = true; } 

the mapmodel construction moved somerequestscopedmapbean

@postconstruct public void drawmapmodel(){ (node node : scnbean.supplychainnodes) {     latlng coord = new latlng(node.getlatitude(), node.getlongitude());     marker = new marker(coord, node.getaddress(), node, getmarkericon(node.getnodetype()));     supplychainmapmodel.addoverlay(marker);      if(scnbean.showcircles){         //adding circle overlay         circle circle1 = new circle(coord, riskval*10000);           circle1.setstrokecolor("#d93c3c");           circle1.setfillcolor("#d93c3c");           circle1.setfillopacity(0.7);         supplychainmapmodel.addoverlay(circle1);     } }