javascript - página - "No se puede leer la propiedad ''zindex'' de los mapas de Google no definidos"
google maps api (2)
Seguí el tutorial , que está muy cerca de tu código.
Esta línea cerca del final necesita cambiar
var churchControlDiv = new ChurchControl(churchControlDiv, map);
Reemplace churchControlDiv con churchControl u otro nombre porque churchControlDiv no debe sobrescribirse.
Mira aquí http://jsfiddle.net/FTjnE/2/
Marqué mis cambios con //CHANGED una alerta para el clic y un nuevo centro de mapa
Estoy tratando de agregar controles personalizados a un mapa de Google usando la API. Ya tengo dos controles personalizados agregados y funcionan muy bien. Intenté copiar y pegar el código para un tercer control (cambiando las variables relevantes, por supuesto) y sigo obteniendo el error anterior (en el título).
La consola de Chrome y Firebug no parecen apuntar a un problema en particular (se rompe dentro del código api de google maps). Por líneas progresivamente comentadas, lo he reducido a esta línea en particular:
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);
El código completo para agregar el control es el siguiente:
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);
}
¿Algunas ideas? ¿Alguna razón por la cual tener 3 controles sería un problema?
Tuve el mismo error emergente en mi consola mientras seguí el tutorial por un motivo diferente.
En lugar de utilizar la manipulación DOM predeterminada de JavaScript, he estado usando jQuery para crear mis elementos, por ejemplo
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);
Hacer esto está bien, siempre y cuando le dé el nodo DOM al mapa (¡y no el elemento jQuery!) Al final, usando controlUI[0] o controlUI.get(0) , como este:
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);
Ver también:
Cómo obtener el elemento DOM nativo de un objeto jQuery - Preguntas frecuentes sobre jQuery