添加标记后添加信息窗口

Question

我想为每个标记添加一个信息窗口。它们是通过 addMarker 函数添加的（所以我可以使用 Mixitup）。 实际上，相同的信息窗口在相同的标记上打开。我应该如何进行，以便每个标记在点击时都有自己的信息窗口。

var gmarkers1 = [];
var markers1 = [];
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();

var markers1 = [
    <?php
    $arraysize = sizeof($locationsbrutes);
    for ($x = 0; $x < $arraysize; $x++) {
        echo '["';
        echo htmlspecialchars_decode($locationsbrutes[$x][2]);
        echo '",';
        echo $locationsbrutes[$x][0];
        echo ',';
        echo $locationsbrutes[$x][1];
        echo ',';
        echo $locationsbrutes[$x][3];
        if($arraysize > $x){
            echo '],';
        }
        else{
            echo ']';
        }
    } 
    ?>
];


function initialize() {
    var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
    var mapOptions = {
        zoom: 12,
        center: center,
        styles:[{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}],
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);

    }
    map.fitBounds(bounds);
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[3];
    var pos = new google.maps.LatLng(marker[1], marker[2]);
    var icon = 'myiconurl';
    var content = marker[0];
    marker1 = new google.maps.Marker({
        position: pos,
        category: category,
        map: map,
        icon:icon,
        content:content
    });

    marker1.addListener('click', function() {
      infowindow.setContent('Test');
      infowindow.open(map, marker1);
    });


    gmarkers1.push(marker1);
    bounds.extend(marker1.position);
}

filterMarkers = function (category) {
    console.log(category);
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();

Answer 1

function addMarker(marker) {
    var category = marker[3];
    var pos = new google.maps.LatLng(marker[1], marker[2]);
    var icon = 'myiconurl';
    var content = marker[0];
    var marker1 = new google.maps.Marker({
        position: pos,
        category: category,
        map: map,
        icon:icon,
        content:content
    });

    marker1.addListener('click', function() {
      if(!marker1.infowindow) {
          marker1.infowindow =  new google.maps.InfoWindow();
          marker1.infowindow.setContent('Test');
      }
      marker1.infowindow.open(map, marker1);
    });


   gmarkers1.push(marker1);
   bounds.extend(marker1.position);
}