Выберите параметр на карте Google маркер не работает

Question

Я хочу сделать опцию выбора для маркера группы на карте Google, но опция выбора не может работать.

Это мой JavaScript, который также доступен на CodePen с методом выбора опции для выбора набора маркеров группировки:

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// init map
function initialize() {
  var center = new google.maps.LatLng(-6.121435, 106.774124);
  var styles = [{
    "stylers": [{
      "saturation": -80
    }, {
      "gamma": 2
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "lightness": -15
    }]
  }];
  var styledMap = new google.maps.StyledMapType(styles, {
    name: "EDC"
  });
  var mapOptions = {
    scrollwheel: false,
    zoom: 4,
    center: center,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

  var url = "https://api.myjson.com/bins/u0aos";

  $.getJSON(url, function(markers1) {
    $.each(markers1, function(key, marker) {
      addMarker(marker)
    });
  });
}

/*   markers1 = "/edclistapps/map_list";
  $.getJSON(markers1, function (markers1) {
      for (i = 0; i < markers1.length; i++) {
          addMarker(markers1[i]);
      }
  });

} */

// add markers to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[3];
  var pos = new google.maps.LatLng(marker[8], marker[9]);
  var content = marker[3];
  var city = marker[6];
  var myIcon = 'http://ruralshores.com/assets/marker-icon.png';

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map,
    icon: myIcon
  });
  gmarkers1.push(marker1);

  // marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      //  infowindow.setContent(city);
      infowindow.open(map, marker1);
      // map.panTo(this.getPosition()); // pan to lat/long of map marker
      map.setZoom(12);
    }
  })(marker1, content));
}

// filter markers by category
filterMarkers = function(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

В вашем коде есть опечатка:

for (i = 0; i < markers1.length; i++) {

должно быть (массив markers1 не используется, он пуст; в массиве gmarkers1 есть ваши маркеры):

for (i = 0; i < gmarkers1.length; i++) {

подтверждение концепции скрипки

фрагмент кода:

// filter markers by category
filterMarkers = function(category) {
  for (i = 0; i < gmarkers1.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);
    }
  }
}
var gmarkers1 = [];
var map;
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// init map
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

  var url = "https://api.myjson.com/bins/u0aos";

  $.getJSON(url, function(markers1) {
    $.each(markers1, function(key, marker) {
      addMarker(marker)
    });
  });
}

// add markers to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[3];
  var pos = new google.maps.LatLng(marker[8], marker[9]);
  var content = marker[3];
  var city = marker[6];
  // must be on https to display on stackoverflow code snippet
  var myIcon = 'https://maps.google.com/mapfiles/ms/icons/blue.png';

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map,
    icon: myIcon
  });
  gmarkers1.push(marker1);

  // marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.setZoom(12);
    }
  })(marker1, content));
}

var styles = [{
  "stylers": [{
    "saturation": -80
  }, {
    "gamma": 2
  }]
}, {
  "featureType": "water",
  "stylers": [{
    "lightness": -15
  }]
}];
var center = new google.maps.LatLng(-6.121435, 106.774124);
var styledMap = new google.maps.StyledMapType(styles, {
  name: "EDC"
});
var mapOptions = {
  scrollwheel: false,
  zoom: 4,
  center: center,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};

// Init map
initialize();

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  height: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select onchange="filterMarkers(this.value);">
  <option value="">select</option>
  <option value="BAKMI GM">BAKMI GM</option>
  <option value="CHATIME">CHATIME</option>
  <option value="PUYO">PUYO</option>
  <option value="GANCIT EVENT">GANCIT EVENT</option>
</select>
<div id="map-canvas"></div>