Mostrare una mappa Google per ogni indirizzo contenuto in un array

**stefano86** · 17-01-2014, 23:13

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

**stefano86** · 19-01-2014, 12:54

Nessuno?

**cavicchiandrea** · 19-01-2014, 13:18

Potrebbe essere perché richiami content_map-canvas prima che il documento sia caricato documentati su window.onload

**stefano86** · 19-01-2014, 21:46

Grazie per la risposta, ho modificato i file in questo modo.. Ma ancora non funziona..

File html:

codice HTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="../public/css/style.css"/>
        <script type="text/javascript" src="../public/js/javascript.js"></script>   
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

        <script type='text/javascript'>
           var addresses = <?php echo json_encode($addresses); ?>;
        </script>     
        <script type="text/javascript" src="../public/js/maps.js"></script>

    </head>
    <body>
        <div id="container">        
            <h1>Maps</h1>   

              <form method="post" action="../public/maps.php">
                 <input type="text" name="city" id="ci"/>
                 <input type="text" name="address" id="in"/>                           
                 <input type="hidden" name="action" value="upload"/>
                 <input type="file" name="path"/>
                 <input type="submit" id="button-invia" name="submit-maps" value="Post" onClick="createMap(); return false;"/>
              </form>

           <div id="content_map-canvas"></div>                  

        </div>
    </body>
  </html>

File Javascript:

codice:

function initialize() {
  var geocoder;
  var map;
  var count = 0; //is used to number the div (one per address)
  var descriptions = new Array(); //array of descriptions

  //I copy the contents of the addresses array in the descriptions array 
  for(var i=0; i<addresses.length; i++) {
     var address = addresses[i];  
     var description = addresses[i];

     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);
        }
     });    
  }

}

google.maps.event.addDomListener(window, 'load', initialize);

File CSS:

codice:

    #content_map-canvas div { 
       height: 180px; 
       width: 270px; 
    }

**cavicchiandrea** · 19-01-2014, 22:33

ho qualche dubbio var addresses =<?php echo json_encode($addresses);?>; metti il link alla pagina online

**stefano86** · 20-01-2014, 13:06

addresses è un array di php che devo passare a javascript, quindi uso la funzione json_encode per farlo..

http://phpfiddle.org/main/code/ern-45r

**cavicchiandrea** · 20-01-2014, 14:39

Originariamente inviata da stefano86

addresses è un array di php

Ma inserito cosi in js non è detto che sia corretto

che devo passare a javascript, quindi uso la funzione json_encode per farlo..

http://phpfiddle.org/main/code/ern-45r

metti un link "tadizionale" alla pagna pubblica cosi non riesco a simularlo

**stefano86** · 20-01-2014, 16:16

Originariamente inviata da cavicchiandrea

Ma inserito cosi in js non è detto che sia corretto

PEnso sia corretto, perchè se si stampa l'array tramite alert, il contenuto viene visualizzato giusto.

Originariamente inviata da cavicchiandrea

metti un link "tadizionale" alla pagna pubblica cosi non riesco a simularlo

Scusa ma non ho capito cosa intendi...

**cavicchiandrea** · 20-01-2014, 18:13

Originariamente inviata da stefano86

PEnso sia corretto, perchè se si stampa l'array tramite alert, il contenuto viene visualizzato giusto.

Io penso di no vedendo il sorgente pagina html vedo questo (che quello che vede js)

codice:

var addresses = <b>E_NOTICE : </b> type 8 -- Undefined variable: addresses -- at line 12<br />null;

Scusa ma non ho capito cosa intendi...

Intendo non usare siti "simulatori" (phpfiddle.org) ma usa domini free come (altervista.org)

Discussione: Mostrare una mappa Google per ogni indirizzo contenuto in un array

Strumenti discussione

Ricerca discussione

Visualizza

Mostrare una mappa Google per ogni indirizzo contenuto in un array

Permessi di invio