配列内の複数のマーカーに情報ウィンドウを追加

Question

配列に含まれているマーカーにinfoWindowを追加することがわかっている地図があります。地図とマーカーが1つあり、情報を追加できますウィンドウは問題ありません。しかし、私の人生では、私の配列の中でインフォ・ウィンドウを動作させることはできません。もし誰かがこれを働かせる手助けをすることができたら、私は永遠に偉大な人になるでしょう。私の意図は、情報ウィンドウ内でhtmlを引き出せるようにすることです。ここに私が今どこにいるのかとのバイブルがあります。

var map; 
var markers = []; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 14, 
    center: new google.maps.LatLng(-33.91721, 151.22630), 
    mapTypeId: 'roadmap', 
    disableDefaultUI: true 
    }); 

    // var iconBase = <?php echo "'/images/markers/'"; ?>; 
    var icons = { 
    typea: { 
     icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" 
    }, 
    typeb: { 
     icon: "http://maps.google.com/mapfiles/ms/micons/green.png" 
    }, 
    typec: { 
     icon: "http://maps.google.com/mapfiles/ms/micons/orange.png" 
    } 
    }; 

    function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map, 
     type: feature.type 
    }); 
    marker.addListener('click', function() { 
     //set zoom level 
     map.setZoom(20); 
     //center map 
     map.setCenter(marker.getPosition()); 
     alert("Testing"); 
    }); 
    markers.push(marker); 
    } 

    filterMarkers = function(getType) { 
    console.log(getType); 
    for (var i = 0; i < markers.length; i++) { 
     if (markers[i].type == getType || getType == "") { 
     markers[i].setVisible(true); 
     } else { 
     markers[i].setVisible(false); 
     } 
    } 
    } 

    var features = [{ 
    position: new google.maps.LatLng(-33.91721, 151.22630), 
    type: 'typea' 
    }, { 
    position: new google.maps.LatLng(-33.91539, 151.22820), 
    type: 'typeb' 
    }, { 
    position: new google.maps.LatLng(-33.91747, 151.22912), 
    type: 'typec' 
    }]; 

    for (var i = 0, feature; feature = features[i]; i++) { 
    addMarker(feature); 
    } 
} 
google.maps.event.addDomListener(window, "load", initMap); 

完全な作業フィドル：http://jsfiddle.net/h80vtmye/

Answer 1

Googleマップはそのよう情報ウィンドウを使用することはできません。配列を維持する代わりにinfowindowの単一のコピーを作成し、mouseoverイベント中にinfowindow.setContent()の内容を設定します。