I have a google map and I´m using a hacky solution for infowindows not to show up under a div that overlays the google map if a special user-interaction is done.

i execute this code after user-interaction :

var controlDiv = document.createElement('div');
controlDiv.style.width = '220px';
controlDiv.style.height = '500px';
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv);

that works wonderfully, but if the user closes the overlay i want to remove the element i pushed into the array.

i tryed to splice it out, but i have no idea how to select it, or what it´s index is.

map.controls[google.maps.ControlPosition.RIGHT_TOP].splice("?", 1);

other possibility may be

delete map.controls[google.maps.ControlPosition.RIGHT_TOP]

but i just dont get the element removed plesea help thanks in advance

I have a google map and I´m using a hacky solution for infowindows not to show up under a div that overlays the google map if a special user-interaction is done.

i execute this code after user-interaction :

var controlDiv = document.createElement('div');
controlDiv.style.width = '220px';
controlDiv.style.height = '500px';
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv);

that works wonderfully, but if the user closes the overlay i want to remove the element i pushed into the array.

i tryed to splice it out, but i have no idea how to select it, or what it´s index is.

map.controls[google.maps.ControlPosition.RIGHT_TOP].splice("?", 1);

other possibility may be

delete map.controls[google.maps.ControlPosition.RIGHT_TOP]

but i just dont get the element removed plesea help thanks in advance

• javascript
• arrays
• google-maps
• google-maps-api-3
• push

2 Answers 2

map.controls[google.maps.ControlPosition.RIGHT_TOP] isn't a native array, it's a google.maps.MVCArray

When you add only this single custom control to the array you may simply call:

map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

When there are more custom controls iterate over the controls to find the index of controlDiv and call

map.controls[google.maps.ControlPosition.RIGHT_TOP].removeAt(index);

Another approach: instead of adding/removing the control add the control once and toggle the display of controlDiv.

I found that the setAt() and removeAt() methods do not work well for map controls. Google only uses push() and clear() methods in their code samples.

Also, the display property may result in controls on top of each other after hiding and re-showing them. I found that the visibility property works best. Below a custom control constructor with google map style and a method to show/hide the control.

function CustomControl(options) { // constructor
    "use strict";
    this.div = document.createElement('div');
    this.div.style.visibility = "visible";
    var controlUI = document.createElement('div'); // Set CSS for the control border
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.backgroundClip = 'padding-box';
    controlUI.style.border = '1px solid rgba(0, 0, 0, 0.15)';
    controlUI.style.borderRadius = '2px';
    controlUI.style.boxShadow = 'rgba(0,0,0,.3) 0px 1px 4px -1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.margin = '5px 5px 15px';
    controlUI.style.minWidth = '120px';
    controlUI.style.textAlign = 'left';
    controlUI.style.position = 'relative';
    if (options.title) {
        controlUI.title = options.title;
    }
    if (options.visibility) { // "visible" or "hidden"
        controlUI.style.visibility = options.visibility;
    }
    this.div.appendChild(controlUI);
    var controlText = document.createElement('div'); //Set CSS for the control interior
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '11px';
    controlText.style.fontWeight = '500';
    controlText.style.padding = '1px 6px';
    if (options.text) {
        controlText.innerHTML = options.text;
    }
    controlUI.appendChild(controlText);
    if (options.index) {
        this.div.index = options.index;
    }
    if (options.handler) {
        google.maps.event.addDomListener(controlUI, 'click', options.handler);
    }
    if (options.position) {
        this.position = options.position;
    }
    if (options.sequence) {
        this.sequence = options.sequence;
    }
    this.setVisible = function(bolean) { // method
        var visibility;
        if (bolean) { //true
            visibility = "visible";
        } else {
            visibility = "hidden";
        }
        controlUI.style.visibility = visibility;
    }
}