user1432290 user1432290 - 2 months ago 31
Javascript Question

I want to load all the images in a folder in a google maps info window

I am loading a bunch of markers into google maps from an xml file. Each marker's name will correspond with a folder of images on the server. When populating the information box I want to display all the images in the corresponding folder.

www.frackwatch.co.za

Everything works except the images do not display. In their place instead is [Object][Object].

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-31.5, 24.0),
zoom: 7,
mapTypeId: 'satellite'
});

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {

var info = markers[i].getAttribute("info");
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var folder = "attachments/" + name +"/";

var html = "<b>" + info + "</b> <br/>" + $.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpeg|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});

var marker = new google.maps.Marker({
map: map,
position: point,
icon: icn
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

<div id="map"></div>




Correct code:

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-29, 25.0),
zoom: 6,
mapTypeId: 'satellite'
});

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {

var info = markers[i].getAttribute("info");
var id = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var folder = "/attachments/" + id +"/";

var marker = new google.maps.Marker({
map: map,
position: point,
icon: icn
});
$.ajax({
url : folder,
success: function (data) {
var html = "<b>" + info + "</b><br/>";
$(data).find("a").each(function () {
$this = $(this)
if($this.attr('href').match(/\.(jpg|png|gif|jpeg)$/)) {
html += "<img src="+ folder + $this.attr('href') + ">";
}
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

Answer
var html = "<b>" + info + "</b> <br/>" + $.ajax({url : folder,success:     function (data) {$(data).find("a").attr("href", function (i, val) {if( val.match(/\.(jpeg|png|gif)$/) ) { $("body").append( "<img src='"+ folder + val   +"'>" );} });}});;

The $.ajax function does not return anything. Check the documentation. So the var html = [...] + $.ajax is broken.

You are trying to display all images in a folder in a InfoWindow ? If so, it should something like :

var folder = "attachments/" + name +"/";
var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icn
});

$.ajax({
  url : folder,
  success: function (data) {
    var html = "<b>" + info + "</b> <br/>";
    $(data).find("a").each(function () {
      $this = $(this)
      if($this.attr('href').match(/\.(jpeg|png|gif)$/)) {
        html +=  "<img src=" +  $this.attr('href') + ">";
      }
    });
    bindInfoWindow(marker, map, infoWindow, html);
   }
 });

bindInfoWindow should be in the ajax callback otherwise the result can be there yet.

A cleaner way would be that genxml.php lists all images so you won't have to request the files in folder afterwards.