GoogleMaps Markerclusterer InfoWindow同じ場所、クラスタからマーカーからコンテンツを取得

Question

MarkerClusterはMarkerから未定義の問題があります。

Iは、同一アドレス（位置）グリッド寸法でMarkerClusterを使用する：偽、クラスタ必要getMarkersコンテンツ

及びオープン情報ウィンドウ：クラスタzoomOnClickを押した場合は1

。私は定義されていない未定義になる。

私はこの

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
    var markers = cluster.getMarkers(); 

    var content = ''; 
    for (var i = 0; i < markers.length; i++) { 
     var marker = markers[i]; 
     content += marker.name; 
     content += ("<br>"); 
    } 
    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setPosition(cluster.getCenter()); 
    infowindow.close(); 
    infowindow.setContent(content); 
    infowindow.open(map); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     infowindow.close(); 
    }); 
    }); 

完全なコードにこの問題を割れ目：

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(55.7522200, 37.6155600), 
      zoom: 11 
     }); 

     var infoWindow = new google.maps.InfoWindow; 

    var iconPurple = new google.maps.MarkerImage('mapimages/purple.svg', new google.maps.Size(33, 31)); 
    var iconBlue = new google.maps.MarkerImage('mapimages/blue.svg', new google.maps.Size(33, 31)); 
    var iconYellow = new google.maps.MarkerImage('mapimages/yellow.svg', new google.maps.Size(33, 31)); 
    var iconGreen = new google.maps.MarkerImage('mapimages/green.svg', new google.maps.Size(33, 31)); 
    var iconPink = new google.maps.MarkerImage('mapimages/pink.svg', new google.maps.Size(33, 31)); 
    var iconBrown = new google.maps.MarkerImage('mapimages/brown.svg', new google.maps.Size(33, 31)); 

    var customIcons = []; 
    customIcons["room1"] = iconPurple; 
    customIcons["room2"] = iconBlue; 
    customIcons["room3"] = iconYellow; 
    customIcons["room4"] = iconGreen; 
    customIcons["room5"] = iconPink; 
    customIcons["room6"] = iconBrown; 

var options = { 
    gridSize: 1, 
    zoomOnClick:false, 
    imagePath: 'mapimages/m' 
     }; 

      downloadUrl(markers.php', function(data) { 

      var xml = data.responseXML; 

      var markerArray = []; 

      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var name = markerElem.getAttribute("name"); 
       var address = markerElem.getAttribute("address"); 
       var metro = markerElem.getAttribute("metro"); 
       var type = markerElem.getAttribute("type"); 
       var date = markerElem.getAttribute("date"); 
       var status = markerElem.getAttribute("status"); 
       var inrequest = markerElem.getAttribute("inrequest"); 
       var phone = markerElem.getAttribute("phone"); 
       var message = markerElem.getAttribute("message"); 
       var area_room = markerElem.getAttribute("area_room"); 
       var price = markerElem.getAttribute("price"); 
       var floore = markerElem.getAttribute("floore"); 
       var floors = markerElem.getAttribute("floors"); 
       var rooms_furniture = markerElem.getAttribute("rooms_furniture"); 
       var kitchen_furniture = markerElem.getAttribute("kitchen_furniture"); 
       var repaint = markerElem.getAttribute("repaint"); 
       var comment = markerElem.getAttribute("comment"); 
       var distance = markerElem.getAttribute("distance"); 
       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng'))); 

       var html = "<h1>" + "м.&nbsp;" + metro + ",&nbsp;&nbsp;" + address + "</h1>" 
+ "<h2>" + phone + "&nbsp;" + name + "</h2>" 
+ "<h3>" + type + "&nbsp;&nbsp;" + area_room + "&nbspм &nbsp;&nbsp;" + price + "&nbsp;р. &nbsp;&nbsp; этаж&nbsp;" + floore + "/" + floors + "</h3>" 
+ "<p>" + rooms_furniture + "&nbsp;&nbsp;" + kitchen_furniture + "&nbsp;&nbsp;" + repaint + "</p>" 
+ "<h5>" + distance + "&nbsp;&nbsp;" + comment + "&nbsp;" + message + "</h5>" + "<h6>" + date + "&nbsp;&nbsp;" + inrequest + "&nbsp;&nbsp;" + status + "</h6>"; 


       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       icon: customIcons[type], 
        animation: google.maps.Animation.DROP 
       }); 

      markerArray.push(marker); 

       marker.addListener('click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(map, marker); 
       }); 

      }); 

    var markerCluster = new MarkerClusterer(map, markerArray, options); 

    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
    var markers = cluster.getMarkers(); 

    var content = ''; 
    for (var i = 0; i < markers.length; i++) { 
     var marker = markers[i]; 
     content += marker.name; 
     content += ("<br>"); 
    } 
    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setPosition(cluster.getCenter()); 
    infowindow.close(); 
    infowindow.setContent(content); 
    infowindow.open(map); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     infowindow.close(); 
    }); 
    }); 

      }); 

     } 

function downloadUrl(url,callback) { 
var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
    request.onreadystatechange = doNothing; 
    callback(request, request.status);//right here 
    } 
}; 
request.open('GET', url, true); 
request.send(null); 
} 

     function doNothing() {} 

enter image description here

Answer 1

MarkerClustererでgoogle.maps.Markerオブジェクトが同じ "マーカー" XMLではありません0を作成するために解析している要素。あなたが作成しない限り、nameのプロパティはありません。

var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    icon: customIcons[type], 
    animation: google.maps.Animation.DROP, 
    name: name // <-- add this 
}); 

proof of concept fiddle