I am using google maps and I have a map where I take the markers from a database and I show them on the map, I add a infoWindow that is shown when they click on the marker, everything works fine, except that the infowindow appears blank, no text.
I have done tests with alert, it shows me the correct content, and I even put a fixed text to the content and it keeps showing the blank infoWindow.
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() {}