Zmiana danych w oknie informacyjnym przy użyciu znaczników Google Map

Question

Podążam za this tutorial, aby utworzyć niestandardową Mapę Google. Dodałem kilka innych elementów, takich jak połączenie go z Wordpress i grupowanie znaczników.

Wszystko działa świetnie, oprócz informacji w oknach informacyjnych na każdym znaczniku. Po prostu nie mogę zmienić informacji w każdym z nich. Myślałem, zmieniając poniższe linie byłoby go zmienić, ale nie wpływa to:

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

This is the working map

Gdzie mogę umieścić w moich własnych danych niestandardowych w oknie? Ponadto, gdybym mógł styl okna na to byłoby jeszcze lepsze.

---

Wygląda na to, że problemem jest klastrowiec, głównie w tej sekcji, w jaki sposób mogę pobrać zawartość html i umieścić ją w oknie informacyjnym?

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

Konkretnie to, to nie jest umieszczenie zawartości HTML poprzez clusterer ... przynajmniej to rzeczywiście się zmienia dane w oknie, wystarczy wyjście zawartość HTML bez rozbijania 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); 

Najbliższy jak dotąd to mam, ale pokazuje te same informacje dla każdego markera. Pokazuje zawartość 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

Nie mogę uwierzyć, że nie pomyślałem o tym wcześniej!

To tylko przypadek budowania napisu w słuchaczu.

// 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

Jeśli czytam poprawnie. Próbujesz ustawić zawartość "po" ustawiając znacznik.

To powinno być odwrotnie. Przenieś kawałek, w którym ustawiłeś kod HTML, zanim wepchniesz go do klastra.

---

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

Nie wiem o (markera, I) sztuk. Zakładam, że są używane przez menedżera znaczników, aby zachować trakc tego, co jest. Te dwie zmiany (skomentowałem twoje linie i dodałem je poniżej) wydają się być następnym logicznym krokiem.

Answer 3

Problem jest związany z zamknięciem. Pętla for nie obsługuje poprawnie twojego teleskopu. Wyodrębnij cały kod z pętli for do osobnej funkcji, a zamknięcie powinno działać.

Answer 4

miałem podobny problem, i dowiedzieć się tego, aby zmienić zawartość w znacznik 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()); 
    }}); 

i niż ustawić funkcję, która wyświetli cokolwiek whant, jeśli masz info w zmiennych.

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*/