"Cannot read property 'zindex' of undefined" Google maps

Question

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?

Answer 1

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

Answer 2

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