Tabs info bubble di GoogleMaps

[BullFrog]

Salve a tutti.
Sono alle prese con le API di GoogleMaps.
Dopo aver risolto con il recupero coordinate da DB, mi scontro ora con un problemino con le info bubble di Google Maps.

In pratica, usando il normale script per il recupero dlele informazioni per un marker, tutto fila:

 GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var comune = markers[i].getAttribute("comune");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, comune, type);
            map.addOverlay(marker);
          

    function createMarker(point, name, address, comune, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "[b]" + name + "[/b] 
" + address + "
" + comune + "
";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker; 

Girando per il web ho visto che è possibile avere due o più tabs per questa info bubble.

Ho usato questo:

GDownloadUrl("xml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var comune = markers[i].getAttribute("comune");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createTabbedMarker(point, name, address, comune, type, "Prodotti", "Aziende");
      map.addOverlay(marker);

function createTabbedMarker(point,html1,html2,label1,label2) {
        var marker = new GMarker(point, , customIcons[type]);
        var html1 = "[b]" + name + "[/b] 
" + address + "
" + comune + "
";
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html2), new GInfoWindowTab(label2,html2)]);
        });
        return marker; 

ma non carica nulla: pagina bianca.

Perdonate l'ignoranza.
Grazie a tutti

[whisher]

Posta un esempio dell'output
delle pagine php.

[BullFrog]

Spero sia questo quello che chiedi

<markers>
<marker name="NOME COGNOME" address="VIA, 221" comune="ROMA" lat="xx" lng="yy" type=""/>
<marker name="NOME2 COGNOME2" address="VIA, 221" comune="NAPOLI" lat="xx" lng="yy" type=""/>
</markers> 

E così via....

[whisher]

Ma lo usi Firebug il codice è zeppo di errori !

[BullFrog]

Non avevo dubbi che ci fossero errori, per questo ho chiesto aiuto ad occhi più esperti.

[whisher]

Tanto per iniziare anche il primo
esempio da errori.
Una versione funzionante

var customIcons= [];
function loadMap() {
  map = new GMap2(document.getElementById("map-dove-siamo"));
  map.setCenter(new GLatLng(37, -122));
  map.setCenter(new GLatLng(37.43, -122.14), 13);
  GDownloadUrl("data.xml", function(data, status) {
    var markers = GXml.parse(data).documentElement.getElementsByTagName("marker");
    for(var i=0, len= markers.length;i< len;i++){ 
          var m = markers[i];
          var point = new GLatLng(
        parseFloat(m.getAttribute("lat")),
        parseFloat(m.getAttribute("lng")));
        var name = markers[i].getAttribute("name"); 
        var address = markers[i].getAttribute("address"); 
        var comune = markers[i].getAttribute("comune"); 
        var type = markers[i].getAttribute("type");
        var marker = createMarker(point, name, address, comune, type); 
        map.addOverlay(marker);
    }
  });
}//loadMap
function createMarker(point, name, address, comune, type) { 
      var marker = new GMarker(point, customIcons[type]); 
      var html = "[b]" + name + "[/b] 
" + address + "
" + comune + "
"; 
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowHtml(html); 
      }); 
      return marker;
} 

Devo scappare appena posso ci ridò un occhio.
Assicurati che il file php abbia il giusto header.

[whisher]

La ciste

Un esempio da cui partire

function initialize() {
      var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    // Our info window content
    var infoTabs = [
          new GInfoWindowTab("Tab #1", "This is tab #1 content"),
          new GInfoWindowTab("Tab #2", "This is tab #2 content")
    ];
    // Place a marker in the center of the map and open the info window
    // automatically
    var marker = new GMarker(map.getCenter());
    GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowTabsHtml(infoTabs);
    });
    map.addOverlay(marker);
    marker.openInfoWindowTabsHtml(infoTabs);
}//loadMap 

segue ................

Non avevo dubbi che ci fossero errori, per questo ho chiesto aiuto ad occhi più esperti.

si ma mancava una parentesi e altra robuccia
insomma l'a,b,c



Va bè a dopo .........






PS

Puoi postare un esempio reale cioè
mi servono minimo le coordinate.

[BullFrog]

Originariamente inviato da whisher
Puoi postare un esempio reale cioè
mi servono minimo le coordinate.

Grazie whisher.
Nella mia più completa ignoranza, ho seguito un esempio/tutorial delle Google Map API Reference. Per cui le coordinate, le prende da un file XML che pesca a sua volta le informazioni dal DB.

Nel primo esempio, tutto fila abbastanza bene. I vari marker vengono posizionati nel punti giusti e nelle "info bubble" compaiono le informazioni corrette.

Lo scoglio, se così vogliamo chiamarlo, nasce quando voglio utilizzare i "tabs bubble". Nel caso specifico due tabs per nuvola, all'interno dei quali dovrebbero andare delle informazioni prese sempre dal DB.

Con la striga

var html = "[b]" + name + "[/b] 
" + address + "
" + comune + "
"; 

compaiono correttamente nome, indirizzo e comune.

Ma usando:

var infoTabs = [ 
          new GInfoWindowTab("Tab #1", "This is tab #1 content"), 
          new GInfoWindowTab("Tab #2", "This is tab #2 content") 

sono io che "manualmente" vado a definire l'etichetta ed il relativo contenuto.
Bene. La questione è che non conosco/capisco il modo per far pescare e quindi posizionare nel tabs i dati direttamete dal DB o dal file XML.

P.s.- Le parentesi le avevo omesse volontariamente

[whisher]

var map= null;
var customIcons= []; 
function loadMap() { 
  map = new GMap2(document.getElementById("map")); 
  map.setCenter(new GLatLng(37, -122)); 
  map.setCenter(new GLatLng(37.43, -122.14), 13); 
  GDownloadUrl("data.xml", function(data, status) { 
    var markers = GXml.parse(data).documentElement.getElementsByTagName("marker"); 
    for(var i=0, len= markers.length;i< len;i++){ 
          var m = markers[i]; 
          var point = new GLatLng( 
        parseFloat(m.getAttribute("lat")), 
        parseFloat(m.getAttribute("lng"))); 
        var name = markers[i].getAttribute("name"); 
        var address = markers[i].getAttribute("address"); 
        var comune = markers[i].getAttribute("comune"); 
        var type = markers[i].getAttribute("type"); 
        createMarker(point, name, address, comune, type); 
    } 
  }); 
}//loadMap 
function createMarker(point, name, address, comune, type) { 
      var marker = new GMarker(point, customIcons[type]); 
      map.addOverlay(marker);
      var content =   address +  comune ; 
      var infoTabs = [ 
          new GInfoWindowTab(name, content), 
          new GInfoWindowTab(name, content) 
    ];
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowTabsHtml(infoTabs);
      }); 
      marker.openInfoWindowTabsHtml(infoTabs);
} 

Una possibile implementazione.
Non si capisce cosa ci vuoi mettere nei tab.
Da una prova mi sa che l'html non se po mette