Estoy usando google maps y tengo un mapa donde tomo los markers de una base de datos y los muestro en el mapa, le agrego un infoWindow
que se muestra cuando pulsan click sobre el marker, todo funciona bien, excepto que el infowindow
aparece en blanco, sin texto.
He realizado pruebas con alert, me muestra el contenido correcto, e incluso lo coloco un texto fijo al contenido y sigue mostrando el infoWindow en blanco.
var map1;
var markers = [];
var locationSelect;
var coords = {}; //coordenadas obtenidas con la geolocalización
function initMap() {
if (navigator.geolocation) {
//usamos la API para geolocalizar el ususario
navigator.geolocation.getCurrentPosition(function (position){
coords ={
lat : position.coords.latitude,
lng : position.coords.longitude
}
carga(coords);
}, mostrarErrores);
}
else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis! ;(');
}
}
function mostrarErrores(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert('Permiso denegado por el usuario');
break;
case error.POSITION_UNAVAILABLE:
alert('Posición no disponible');
break;
case error.TIMEOUT:
alert('Tiempo de espera agotado');
break;
default:
alert('Error de Geolocalización desconocido :' + error.code);
}
}
function carga(coords){
map1 = new google.maps.Map(document.getElementById('map1'),
{
zoom: 12,
center: new google.maps.LatLng(coords.lat,coords.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var radius = 25;
var searchUrl = 'php/escenarios-cerca.php?lat=' + coords.lat + '&lng=' + coords.lng + '&radius=' + radius;
// carga markers
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var n = markerNodes.length;
for (var i = 0; i < n; i++) {
var name = markerNodes[i].getAttribute("nombre");
var address = markerNodes[i].getAttribute("direccion");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createMarker(latlng, name, address);
}
});
}
function createMarker(latlng, name, address) {
var marker = new google.maps.Marker({
position: latlng,
map: map1,
title: "Escenario "+name
});
google.maps.event.addListener(marker, 'click', function() {
var html = "<b>" + name + "</b><br>" + address;
var infoWindow = new google.maps.InfoWindow({content: html});
infoWindow.open(map1, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
else
if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
var html = "<b>" + name + "</b><br>" + address;
pone:var html = "<span style="color: black !important;"><b>" + name + "</b><br>" + address + "</span>;"