Ciao, devo creare una pagina php/javascript che dato una array di indirizzi, crei per ogni indirizzo una mappa Google.
L'array addresses è un array passato da PHP a Javascript tramite la funzione json_encode, questo passaggio è corretto, poichè l'array viene passato effettivamente al file javascript (testato tramite un alert).
L'array descriptions contiene le descrizioni delle varie mappe (nel mio caso, per questione di semplicità, l'ho messo uguale all'array addresses).
Questo che teoricamente vado a fare è salvare in due variabili (address e description) un indirizzo e una descrizione. Queste due variabili le uso per creare una nuova mappa che sarà messa in un div di id map-canvas# dove # è un numero crescente. Questi div nuovi saranno messi all'interno del div padre content_map-canvas.


Questo è quello che c'è nel mio file javascript:

codice:
var geocoder;
var map;
var count = 0;
var descriptions = new Array();


for(var i=0; i<addresses.length; i++) {
   var address = addresses[i];  
   var description = addresses[i];
   alert(address);
   alert(description);


   geocoder = new google.maps.Geocoder();
     var options = {
            zoom: 15, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
         }; 
   count = count + 1;    
   var id = "map-canvas" + count;
   var div = document.createElement("div");
   div.id = id;
   div.style.width= "300px";
   div.style.height= "300px";
   document.getElementById("content_map-canvas").appendChild(div);
   
   map = new google.maps.Map(document.getElementById(id), options);


   geocoding(address, description); 


   geocoder.geocode({'address': address}, function(results, status) {
      if(status === google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker
              ({map: map, 
                position: results[0].geometry.location,
                title: description 
              });
        marker.setAnimation(google.maps.Animation.DROP);




        contentString = description;
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        }); 


        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
        });
      }
      else {
        alert("Geocode failed: " + status + ", " + address);
      }
   });    
}
E questo è il file php che dovrebbe contenere le varie mappe:

codice HTML:
<script type="text/javascript" src="../public/js/maps.js"></script><div id="content_map-canvas"></div>
Quando eseguo i file con Google Chrome, la console di Ispeziona elemento genera questo errore: Uncaught TypeError: Cannot call method 'appendChild' of null.
Ma in realtà il div content_map-canvas esiste.
Come posso risolvere?


Grazie