[PHP] Creare una mappa Google per ogni indirizzo

[stefano861]

Ciao, devo creare una pagina php che mostra, per ogni indirizzo contenuto in un array, una mappa Google. Il codice scritto da me non va, quello che vedo è questo
cioè una colonna di mappe grige, a parte l'ultima che però non è il massimo come si può notare dall'immagine.

Questo è il 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>    
          
          //$addresses è un array PHP che contiene gli indirizzi, con la funzione json_encode trasformo l'array php in un array javascript
          <script type='text/javascript'>
             var addresses = <?php echo json_encode($addresses); ?>;
          </script>     
          <script type="text/javascript" src="../public/js/maps.js"></script>

        </head>
        <body>

            <!-- Google maps --> 
            <div id="content_map-canvas"></div>                 

        </body>

    </html>

E il codice javascript:

    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";

          var br = document.createElement("br");   

          var content_map_canvas = document.getElementById("content_map-canvas");
          content_map_canvas.appendChild(div);
          content_map_canvas.appendChild(br);

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

La console di Chrome mi da i seguenti errori:

• Uncaught TypeError: Cannot call method 'lat' of null at maps.php:12

• E...
  Uncaught TypeError: Cannot call method 'lat' of null VM51:12
  (anonymous function) VM51:12
  T.trigger main.js:17
  H.lc VM48:132
  (anonymous function) main.js:11
  T.trigger main.js:17
  H.yk VM48:117
  (anonymous function) main.js:18

Dove sbaglio? Non capisco..
Grazie a tutti

[OoZic]

  <div id="map-canvas1" style="display:block;width:600px;height:400px; margin-bottom:20px;"></div>

  <div id="map-canvas2" style="display:block;width:600px;height:400px;"></div>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

  <script>
  function initialize() {

    var myIcon = new google.maps.MarkerImage("http://www2.psd100.com/ppp/2013/11/2701/Map-location-marker-1127205319.png", null, null, null, new google.maps.Size(55, 29));

    var locations = [
            ['Berlin', 52.5167, 13.3833, 2],
            ['Test', 40, 17, 1],
        ];

    var mapOptions1 = {
      zoom: 3,
      center: new google.maps.LatLng(40, 35),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      position: marker1
    }

    var mapOptions2 = {
      zoom: 4,
      center: new google.maps.LatLng(40, 35),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      position: marker2
    }

    var map1 = new google.maps.Map(document.getElementById('map-canvas1'),
      mapOptions1);

    var map2 = new google.maps.Map(document.getElementById('map-canvas2'),
      mapOptions2);

    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(locations[0][1], locations[0][2]),
      map: map1,
      icon: myIcon
    });

    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(locations[1][1], locations[1][2]),
      map: map2,
      icon: myIcon
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

Non so quante mappe devi visualizzare ma se sono 2-3 può andare bene quel codice altrimenti sarebbe meglio usare dei cicli per non ripetere di scrivere lo stesso codice mille volte.

Puoi personalizzare quel codice inserendo nell'array delle location latitudine e longitudine di tutti gli indirizzi che vuoi rappresentare.

Puoi personalizzare il marker, specificando url e dimensione (gli ultimi due valori in quella funzione).

Puoi personalizzare la visualizzazione della mappa specificando il centro (in genere è lo stesso della location se è una sola) e lo zoom.

Sarebbe meglio non generare quell'array di location in php ma piuttosto fare una chiamata ajax al server per avere un json contenente l'array.

Sarebbe meglio non utilizzare il css inline; nell'esempio l'ho messo per farti capire che è necessario specificare una dimensione altrimenti non visualizzi nulla.

[stefano861]

Grazie OoZic per la risposta. Ci saranno numerose mappe quindi forse mi conviene un ciclo. Infatti uso un for nel mio codice sopra, eppure non va...

[OoZic]

Comincia "copiando" e facendo funzionare il mio codice, poi pensi ad un ciclo direi

[stefano861]

Originariamente inviato da OoZic

Comincia "copiando" e facendo funzionare il mio codice, poi pensi ad un ciclo direi

Ok il tuo codice funziona, ora però devo usare un array di indirizzi...

[OoZic]

modo poco corretto: scrivere direttamente quell'array usando php

modo corretto: chiamata ajax che richiede quell'array e disegna la mappa una volta che ha ricevuto i dati.

[stefano861]

Originariamente inviato da OoZic

modo poco corretto: scrivere direttamente quell'array usando php

modo corretto: chiamata ajax che richiede quell'array e disegna la mappa una volta che ha ricevuto i dati.

Mmm Ajax sinceramente non so usarlo..