Cannot remove custom control from google maps

Question

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:

Basically the code is the following one:
-> one function 'createCustomControls' in charge of calling several time another function 'createCustomControl' (without the 's').

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);
}

This works correctly the first time I call 'createCustomControls':
-> 'login' and 'about' custom controls are created.

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.

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....

Any ideas ?

Answer 1

I'm using this code to look for a specific control (with element id 'mapHintDiv'):

var indexOfControl = null,
    bottomCenterControls = map.controls[google.maps.ControlPosition.BOTTOM_CENTER];
bottomCenterControls.forEach( function ( element,
                                         index ) {
   if( element.id === 'mapHintDiv' ) {
      indexOfControl = index;
   }
} );
if( indexOfControl ) {
   bottomCenterControls.removeAt( indexOfControl );
}