Использование кнопок для отображения соответствующих маркеров карты местоположения на карте

Question

Я только начинаю с javascript и работаю с API Google Maps. Я хочу использовать кнопки, чтобы показать местоположения на карте. У меня есть разные замки, и когда каждый нажимается, я хочу, чтобы на карте появился маркер, связанный с замком. Я не уверен, что лучший способ сделать это с помощью JavaScript. Любая помощь приветствуется! У меня есть все местоположения замков в массиве на данный момент, и у меня есть некоторый JavaScript, хотя он ничего не показывает.

for (i = 0; i < castles.length; i++ ) {
  var addMarker = ("The lat is " + castles[i][1]+" and the long is "+ castles[i][2]);
  var marker = new google.maps.Marker({
    position: {lat: castles[1], lng: castles[2]},
    map: map
  });
}

Answer 1

ОК, похоже, у вас есть массив объектов замка, но нет массива маркеров, поэтому давайте сначала исправим это. (Обратите внимание, что в вашем примере вы не обращались к нужному элементу в массиве [i] для lat / lng.)

const markers = [];

for (let i = 0; i < castles.length; i++ ) {
  var marker = new google.maps.Marker({
    position: { lat: castles[i][1], lng: castles[i][2] },
    map: map
  });
  markers.push(marker);
}

Я объявил новый массив, чтобы сохранить все маркеры и нажатькаждый созданный маркер в нем на каждой итерации.

Чтобы добавить их на карту, просто переберите массив маркеров и используйте setMap:

markers.forEach((marker) => marker.setMap(map));

Но вы также хотите, чтобы появилось информационное окнокогда вы нажимаете на любой из маркеров, давайте вернемся и исправим этот цикл:

const markers = [];

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

  // Cache the lat and lng coords
  const lat = castles[i][1];
  const lng = castles[i][2];

  // Create a new infowindow
  const infowindow = new google.maps.InfoWindow({

    // Using your content we can create a template literal string
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    content: `The lat is ${lat} and the long is ${lng}`
  });

  const marker = new google.maps.Marker({
    position: { lat, lng },
    map: map
  });

  // And we add a listener to the marker so that
  // it opens the infowindow when it is clicked
  marker.addListener('click', () => {
    infowindow.open(map, marker);
  });

  markers.push(marker);
}

Answer 2

Попробуйте это:

position: {lat: castles[i][1], lng: castles[i][2]}