title: Cannot remove custom control from google maps
body: <p>In my HTML5 mobile app I use some jquery to hide or show some custom controls depending if the user is logged on or not:</p>
  
  <p>Basically the code is the following one:<br>
  -> one function 'createCustomControls' in charge of calling several time another function 'createCustomControl' (without the 's').</p>
  
  <pre><code>function createCustomControls(map){
    createCustomControl("about", map);
    if(!authenticated()){createCustomControl("login", map);}
    if(authenticated()){ createCustomControl("menu", map);}
    if(authenticated()) {createCustomControl("list", map);}
  }
  
  function createCustomControl(type, map){
    // Create a div to hold the controls
    var controlDiv = document.createElement('DIV');
    controlDiv.style.padding = '2px';
    controlDiv.index = 1;
  
  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = '#FFF';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = type.capitalize();
  controlDiv.appendChild(controlUI);
  
  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '18px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = type.capitalize();
  controlUI.appendChild(controlText);
  
  // Add event listener on click
  if(type == "list"){
    google.maps.event.addDomListener(controlUI, 'click', function() {
      ....some stuff
    });
  }
  if((type == "menu") || (type == "login") || (type == "about")){
    google.maps.event.addDomListener(controlUI, 'click', function() {
      $.mobile.changePage("#" + type, "slideup");
    });
  }
  
  // Add control to map
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
  }
  </code></pre>
  
  <p>This works correctly the first time I call 'createCustomControls':<br>
  -> 'login' and 'about' custom controls are created.  </p>
  
  <p>When the user is logged in, I call another time the 'createCustomControls' function. It pushes the custom controls (menu, list, about) next to the 'login' and 'about' ones.</p>
  
  <p>I tried several things to clear the TOP_RIGHT position to get rid of the 'login' and 'about' controls before inserting the 'menu', 'list' and 'about' ones but none worked....</p>
  
  <p>Any ideas ?</p>