Добавление ссылок на маркеры Google Maps вне карты с использованием параметров в раскрывающемся списке

Question

У меня есть карта Google с различными местоположениями, и я хочу иметь возможность перейти к ней и открыть информационное окно при нажатии на ссылку вне карты.

Ниже приведены соответствующие биты рабочего кода, но я хочу поместить ссылки в выпадающий список, а не просто текстовые ссылки в div

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

  google.maps.event.addListener(marker, 'click', (function (marker, i) {

  $('.marker-link').on('click', function () {
  google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

Кстати, в HTML есть следующий div

  <div id="markers"></div>

Чтобы попытаться заставить его работать как выпадающий список, я изменил эту строку

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

до

  $('#dropdown').append('<option data-markerid="' + i + '">' + locations[i][1] + '</option>');

, а затем добавил это в HTML

  <select id="dropdown"></select>

Затем я получаю выпадающий список со всеми различными названиями, и каждый параметр имеет

  data-markerid="0"
  data-markerid="1"

и я тоже добавил

  $( "#dropdown" ).change(function() {
    google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

Но когда я выбираю элемент из выпадающего меню, он не отображается и не отображает соответствующее информационное окно

Answer 1

Я фактически закончил делать это по-другому - но он достиг того же результата - карты Google с различными местоположениями и выпадающим меню за пределами карты, которые можно использовать для перехода к каждому местоположению и отображения окна InfoWindow

  var map;
  var info = new google.maps.InfoWindow();
  var gmarkers = [];
  var side_bar_html = "";

  function initialize() {
        var mapOptions = {
        center: {lat: 0, lng: 0},
        ...options...
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var markers = [
        ['Location 1', 0, 0, 'Description 1'],
        ['Location 2', 0, 1, 'Description 2'],
        ['Location 3', 1, 0, 'Description 3'],
        ...etc...
      ];

  for (var i = 0; i < markers.length; i++) {
        marker = addMarker(i);
  }

  // put the assembled side_bar_html contents into the side_bar div

  document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>"+side_bar_html+"</select>";

  function addMarker(i) {
        var draftMarker = markers[i];
        var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: draftMarker[0]
        });

  google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);

  side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
    return marker;
    }
  }

  // This function picks up the click and opens the corresponding info window

  function myclick(i) {

  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");

  }

  google.maps.event.addDomListener(window, 'load', initialize);

А потом это добавляется в HTML

  <div id="side_bar"></div>