Как в маркер добавить попап окно? Yandex Карты

Question

не могу добавить попап окно(с div тегом внутри) на маркер в Ymaps, читал документацию, но ничего не понял.

const balloonContent = `
        <div class="balloon">
          <div class="balloon__address">Наб. реки Фонтанки 10-15</div>
          <div class="balloon__contacts">
            <a href="tel:+78121234567">+8 (812) 123-45-67</a>
          </div>
        </div>
      `;
    

  const markerElement = document.createElement('img');
  markerElement.className = 'icon-marker';
  markerElement.src = './img/map/location-pin.svg';

  const marker = new YMapMarker(
    {
      coordinates: [30.338928, 59.943543],
      draggable: true,
      mapFollowsOnDrag: true,
    },
    markerElement
  );
  
  
  map.addChild(marker);

Answer 1

В документации сказано: "В API v3 нет встроенного всплывающего окна. Вместо этого вы можете самостоятельно управлять содержимым HTML-элемента маркера."

Например, можно повесить на markerElement отслеживание клика мышкой, и по клику - показывать нужный контент.

Answer 2

Короче вот решение:

/* Yandex Map */
initMap();

async function initMap() {
  await ymaps3.ready;

  const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker} = ymaps3;

  const map = new YMap(
    document.getElementById('map'),
    {
      location: {
        center: [30.338928, 59.943543],
        zoom: 17
      }
    }
  );

  


  map.addChild(new YMapDefaultSchemeLayer());
  map.addChild(new YMapDefaultFeaturesLayer());

  var popup = null;

  const markerElement = document.createElement('img');
  markerElement.className = 'icon-marker';
  markerElement.src = './img/map/location-pin.svg';

  const marker = new YMapMarker(
    {
      coordinates: [30.338928, 59.943543],
    },
    markerElement
  );
  
  
  map.addChild(marker);

  markerElement.onclick = () => {
    showPopup(map, getMarkerPopupContent(), [30.338928, 59.943543]);
  };

  function getMarkerPopupContent() {
      const node = document.createElement("div");
      node.classList.add("popup");
      
      node.innerHTML = `
      <div class="balloon">
          <div class="balloon__address">Наб. реки Фонтанки 10-15</div>
          <div class="balloon__contacts">
            <a href="tel:+78121234567">+8 (812) 123-45-67</a>
          </div>
        </div>
      `;

      const closeBtn = document.createElement('button');
      closeBtn.className = 'popup__close';
      // closeBtn.innerHTML =
      
      closeBtn.onclick = () => map.removeChild(popup);

      node.append(closeBtn);
    return  node
  }
  
  
  function showPopup(map, content, coords) {
    const {YMapMarker} = ymaps3;
    popup = new YMapMarker({coordinates: coords}, content);
    map.addChild(popup);
  }
    
}

БЛОГ НА HUSL

Как в маркер добавить попап окно? Yandex Карты

Ответы (2 шт):