Combining to frames

hello again , can anyone of you help me with this.

i made 2 frames and want to make them in one but the issue is whenever i want to do that my button always get lost and not able to see it but when i close/comment map.draw(); function . i can see button but then my map is not loading. here are my 2 codes.

1 code :

    import de.fhpotsdam.unfolding.providers.Microsoft;
    import de.fhpotsdam.unfolding.*;
    import de.fhpotsdam.unfolding.utils.*;
    import de.fhpotsdam.unfolding.marker.*;
    import de.fhpotsdam.unfolding.geo.*;



    UnfoldingMap map ;
    UnfoldingMap currentMap;
    SimpleLinesMarker connectionMarker;


    void settings() {

      // size(400,400);

      size(800,600,P3D);

      map = new UnfoldingMap(this, new Microsoft.AerialProvider());
      MapUtils.createDefaultEventDispatcher(this, map);
      currentMap = map;

      map = new UnfoldingMap(this,0,0,width*0.8,height);
      Location startLocation = new Location(32.2, 76.3);
      Location endLocation = new Location(53.35, -6.26);
      SimpleLinesMarker connectionMarker = new SimpleLinesMarker(startLocation, endLocation);
      MapUtils.createDefaultEventDispatcher(this, map);

    }


    void draw() {
      background(0);
      currentMap.draw();

    }

    void mousePressed() {
      exit();
    }


and My 2nd Code ;

import controlP5.*;

ControlFrame cf;
ControlP5 cp5;



void setup(){
  cf = new ControlFrame(this, 400, 400, "Controls");
  surface.setLocation(430,10);
  noStroke();


}


class ControlFrame extends PApplet {

  int w, h;
  PApplet parent;
  ControlP5 cp5;

  public ControlFrame(PApplet _parent, int _w, int _h, String _name) {
    super();
    parent = _parent;
    w=_w;
    h=_h;
    PApplet.runSketch(new String[]{this.getClass().getName()}, this);
  }

  public void settings() {
    size(w,h);
  }

  public void setup() {
    surface.setLocation(10,10);
    cp5 = new ControlP5(this);

  cp5.addTab("extra")
     .setColorBackground(color(0, 160, 100))
     .setColorLabel(color(255))
     .setColorActive(color(255,128,0))
     ;

  // if you want to receive a controlEvent when
  // a  tab is clicked, use activeEvent(true)

  cp5.getTab("default")
     .activateEvent(true)
     .setLabel("my default tab")
     .setId(1)
     ;

  cp5.getTab("extra")
     .activateEvent(true)
     .setId(2)
     ;


  // create a few controllers

  cp5.addButton("button")
     .setBroadcast(false)
     .setPosition(20,20)
     .setSize(80,40)
     .setValue(1)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
     ;

  cp5.addButton("buttonValue")
     .setBroadcast(false)
     .setPosition(110,20)
     .setSize(80,40)
     .setValue(2)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
     ;
  //  cp5.addNumberbox("seed").plugTo(parent, "seed").setRange(0, 360).setValue(1).setPosition(100, 10).setSize(100,20);

  }

  void draw() {
    background(40);
  }
}