Geek asks and answers

Unable to remove user controls from Google maps

In my HTML5 mobile application, I use some jquery to hide or show some user controls depending on whether the user is logged in or not:

Basically, the code looks like this:
-> one function 'createCustomControls' is responsible for calling several times the other function createCustomControl (without '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' are configured controls.

, createCustomControls. (, , ) "login" "about".

, TOP_RIGHT, "login" "about", "", "" "", .

?

+3
2

map.controls [position] - MVCArray. removeAt() clear() .

http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCArray

+2

( 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 );
}
+3

More articles:


All Articles