I'm trying to add custom controls to a Google map using the API. I already have two custom controls added and they work just fine. I tried to copy and paste the code for a third control (changing the relevant variables of course) and I keep getting the above error (in the title).

Chrome console and Firebug don't seem to point to a particular problem (it breaks inside the google maps api code). By progressively commented out lines, I've narrowed it down to this particular line:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);

The full code for adding the control is as follows:

function ChurchControl(churchControlDiv, map) {
churchControlDiv.style.padding = '5px 0px';
var churchControlUI = document.createElement('DIV');
churchControlUI.style.backgroundColor = 'white';
churchControlUI.style.borderStyle = 'solid';
churchControlUI.style.borderWidth = '1px';
churchControlUI.style.borderColor = 'gray';
churchControlUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
churchControlUI.style.cursor = 'pointer';
churchControlUI.style.textAlign = 'center';
churchControlUI.title = 'Click to see Churches';
churchControlDiv.appendChild(churchControlUI);
var churchControlText = document.createElement('DIV');
churchControlText.style.fontFamily = 'Arial,sans-serif';
churchControlText.style.fontSize = '13px';
churchControlText.style.padding = '1px 6px';
churchControlText.style.fontWeight = 'bold';
churchControlText.innerHTML = 'Churches<br>แสดงจำนวนคริสเตียน';
churchControlUI.appendChild(churchControlText);

google.maps.event.addDomListener(churchControlUI, 'click', function() {
    toggle(churches);
    if (churchControlText.style.fontWeight == 'bold') {
        churchControlText.style.fontWeight = 'normal';
    } else {
        churchControlText.style.fontWeight = 'bold';
    }
});

google.maps.event.addDomListener(churchControlUI, 'mouseover', function() {
    churchControlUI.style.backgroundColor = '#e8e8e8';
});

google.maps.event.addDomListener(churchControlUI, 'mouseout', function() {
    churchControlUI.style.backgroundColor = 'white';
});
}

function initialize(){
    map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: centerLatLng,
    zoom: 7,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var churchControlDiv = document.createElement('DIV');
    var churchControlDiv = new ChurchControl(churchControlDiv, map);
    churchControlDiv.index = 3;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);
}

Any ideas? Any reason why having 3 controls would be a problem?

I'm trying to add custom controls to a Google map using the API. I already have two custom controls added and they work just fine. I tried to copy and paste the code for a third control (changing the relevant variables of course) and I keep getting the above error (in the title).

Chrome console and Firebug don't seem to point to a particular problem (it breaks inside the google maps api code). By progressively commented out lines, I've narrowed it down to this particular line:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);

The full code for adding the control is as follows:

function ChurchControl(churchControlDiv, map) {
churchControlDiv.style.padding = '5px 0px';
var churchControlUI = document.createElement('DIV');
churchControlUI.style.backgroundColor = 'white';
churchControlUI.style.borderStyle = 'solid';
churchControlUI.style.borderWidth = '1px';
churchControlUI.style.borderColor = 'gray';
churchControlUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
churchControlUI.style.cursor = 'pointer';
churchControlUI.style.textAlign = 'center';
churchControlUI.title = 'Click to see Churches';
churchControlDiv.appendChild(churchControlUI);
var churchControlText = document.createElement('DIV');
churchControlText.style.fontFamily = 'Arial,sans-serif';
churchControlText.style.fontSize = '13px';
churchControlText.style.padding = '1px 6px';
churchControlText.style.fontWeight = 'bold';
churchControlText.innerHTML = 'Churches<br>แสดงจำนวนคริสเตียน';
churchControlUI.appendChild(churchControlText);

google.maps.event.addDomListener(churchControlUI, 'click', function() {
    toggle(churches);
    if (churchControlText.style.fontWeight == 'bold') {
        churchControlText.style.fontWeight = 'normal';
    } else {
        churchControlText.style.fontWeight = 'bold';
    }
});

google.maps.event.addDomListener(churchControlUI, 'mouseover', function() {
    churchControlUI.style.backgroundColor = '#e8e8e8';
});

google.maps.event.addDomListener(churchControlUI, 'mouseout', function() {
    churchControlUI.style.backgroundColor = 'white';
});
}

function initialize(){
    map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: centerLatLng,
    zoom: 7,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var churchControlDiv = document.createElement('DIV');
    var churchControlDiv = new ChurchControl(churchControlDiv, map);
    churchControlDiv.index = 3;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);
}

Any ideas? Any reason why having 3 controls would be a problem?

• javascript
• google-maps-api-3

3 Answers 3

I had the same error pop up on my console whilst following the tutorial for a different reason.

Rather than using default javascript DOM manipulation, I'd been using jQuery to create my elements, e.g.

    var controlDiv = $('<div></div>');
    var controlUI = $('<div class="alert alert-info"></div>');
    controlDiv.append(controlUI);
    var controlText = $('<div>Control text here</div>');
    controlUI.append(controlText);

Doing this is fine, so long as you give the DOM node to the map (and not the jQuery element!) at the end, using controlUI[0] or controlUI.get(0), like this:

    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);

See also:
How to get the native DOM element from a jQuery object - jQuery FAQ

I followed the tutorial, which is very close to your code.

This line near the end needs to change

var churchControlDiv = new ChurchControl(churchControlDiv, map);

Replace churchControlDiv with churchControl or another name because churchControlDiv should not be overwritten.

See here http://jsfiddle.net/FTjnE/2/

I marked my changes with //CHANGED an alert for the click, and new map center

The general underlying cause of this issue seems to be the element or its properties being removed or otherwise made not present. Maps API is trying to find the zIndex in the style property.

I had this issue in a Vue app custom component that interacted with the Maps API controls. We resolved it by exercising more caution in the teardown of the component.

Basically you need to ensure that you don't add a null element to the control, and don't make the element or its properties null before removing it, by doing something funky with say, v-if.