Modifica dei dati nella finestra informativa con gli indicatori di Google Maps

Question

Ho seguito this tutorial per creare una mappa Google personalizzata. Ho incluso alcuni altri elementi come collegarlo a Wordpress e raggruppare i marcatori.

Funziona tutto alla grande, a parte le informazioni nelle finestre informative su ciascun marcatore. Non riesco proprio a cambiare le informazioni all'interno di ognuna. Ho pensato che cambiando le seguenti righe sarebbe cambiare, ma nulla lo colpisce:

var html = "<b>" + name + "</b> <br/>" + address; 

This is the working map

Dove posso mettere nei miei dati personalizzati nella finestra? Inoltre, se potessi modellare la finestra, sarebbe ancora meglio.

---

Sembra che la clusterer è il problema, soprattutto questa sezione, come posso prendere il contenuto HTML e posizionarlo nella finestra di informazioni?

function load() { 
    var cluster = []; 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(52.375599, -3.471680), 
    zoom: 8, 
    mapTypeId: 'roadmap' 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var min = .999999; 
    var max = 1.000002; 

    // Change this depending on the name of your PHP file 
    downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) { 
    var xml = data.responseXML; 
    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 type = markers[i].getAttribute("type"); 

     var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min); 
     var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min); 

     var point = new google.maps.LatLng(offsetLat, offsetLng); 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         // infowindow.setContent(markers[i].getAttribute("name")); 
         // infowindow.open(map, marker, html); 
         infowindow.setContent(html); infowindow.open(map, marker); 
        } 
       })(marker, i)); 
     cluster.push(marker); 
    } 
    var mc = new MarkerClusterer(map,cluster); 
    }); 
} 

particolare questo, non è mettere il contenuto html attraverso la clusterer ... almeno questo è effettivamente cambiando i dati nella finestra, basta uscita il contenuto html senza rompere la clusterer:

 google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(markers[i].getAttribute("name")); 
         infowindow.open(map, marker, html); 
        } 
       })(marker, i)); 
     cluster.push(marker); 

---

Il più vicino che ho finora è questo ma mostra le stesse informazioni per ogni marcatore. Sta mostrando il contenuto html:

 google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         // infowindow.setContent(markers[i].getAttribute("name")); 
         // infowindow.open(map, marker, html); 
         infowindow.setContent(html); infowindow.open(map, marker); 
        } 
       })(marker, i)); 
     cluster.push(marker); 

Answer 1

Non posso credere che non ci ho pensato prima !!

Si tratta solo di costruire la stringa nell'ascoltatore.

// Change this depending on the name of your PHP file 
    downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var type = markers[i].getAttribute("type"); 

     var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min); 
     var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min); 

     var point = new google.maps.LatLng(offsetLat, offsetLng); 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         var name = markers[i].getAttribute("name"); 
         var address = markers[i].getAttribute("address"); 
         var html = "<b>" + name + "</b> <br/>" + address; 
         infowindow.setContent(html); 
         infowindow.open(map, marker, html); 
         // infowindow.setContent(html); 
         // infowindow.open(map, marker); 
        } 
       })(marker, i)); 
     cluster.push(marker); 
    } 

Answer 2

Se sto leggendo correttamente. Stai tentando di impostare il contenuto "dopo" l'impostazione del marker.

Questo dovrebbe essere il contrario. Sposta il pezzo in cui imposti l'html prima di inserirlo nel cluster.

---

edit:

for (var i = 0; i < markers.length; i++) { 
    var name = markers[i].getAttribute("name"); 
    var address = markers[i].getAttribute("address"); 
    var type = markers[i].getAttribute("type"); 

    var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min); 
    var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min); 

    var point = new google.maps.LatLng(offsetLat, offsetLng); 
    //var html = "<b>" + name + "</b> <br/>" + address; 
    var infowindow = new google.maps.InfoWindow({content: "<b>" + name + "</b> <br/>" + address}); 

    var icon = customIcons[type] || {}; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    icon: icon.icon, 
    shadow: icon.shadow 
    }); 
    //google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    //    return function() { 
    //     infowindow.setContent(markers[i].getAttribute("name")); 
    //     infowindow.open(map, marker, html); 
    //    } 
    //   })(marker, i)); 
    google.maps.event.addListener(marker, 'click', function(marker, i){infowindow.open(map,marker);})(marker, i); 

    cluster.push(marker); 
} 

Non sono sicuro circa le (marcatori, i) pezzi. Presumo che siano usati dal gestore dei marker per mantenere trakc di cosa sia. Quei due cambiamenti (ho commentato le tue battute e ne ho aggiunto uno sotto) sembrano essere il prossimo passo logico.

Answer 3

Il problema è con la vostra chiusura. Il ciclo for non gestisce correttamente l'ambito. Estrarre tutto il codice dall'interno del ciclo for in una funzione separata e la chiusura dovrebbe funzionare.

Answer 4

Ho avuto un problema simile, ho questo numero, per modificare il contenuto in pennarello infowindow

var marker = new MarkerWithLabel({ 
     id: "costume_ID",/*<---this is the start of the trick*/ 
     position: new google.maps.LatLng(lat,lon), 
     icon: "../images/icon-bla.png", 
     map: map, 
     title: 'bla', 
     labelContent: 'bla,bla, 
     labelClass: "labels", 
     labelStyle: {opacity: 1.0} 
    }) 
    google.maps.event.addListener(marker, 'click', (function() { 
     return function(){ 
     infowindow.setContent(infor(this.id));/*<--- here is the trick*/ 
     infowindow.open(map, this); 
     map.setCenter(this.getPosition()); 
    }}); 

e di impostare la funzione che sarà in uscita qualunque cosa whant, se avete l'informazioni nelle variabili.

function infor(im){ 
     return "<div><b>INFOWINDOW</b><br>Date: "+var[im].date+"<br>Sync: "+var[im].sync+"...bla,bla,bla</div>"; 
    }/*THIS FUNCTION RETURN THE STING TO SHOW ION THE INFOWINDOW*/