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

google-maps-api-3, javascript

Solution

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

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?

Original source