Как сделать маркер на карте с кнопкой дополнительной информации на карте

Question

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

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

var json = {
  "mapMarker1": {
    "cordX": "50",
    "cordY": "22",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of a standing man",
      "content": "<p>Old Kingdom, <br/>Saqqara.<br />"
    }
  },
  "mapMarker2": {
    "cordX": "52",
    "cordY": "27",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Group of servant statues",
      "content": "<p>painted limestone,<br />Old Kingdom,<br />Saqqara.</p><button>More information</button>",
    }
  },
  "mapMarker3": {
    "cordX": "60",
    "cordY": "39",
    "icon": "map-marker.svg",
    "modal": {
      "title": "King Senusert",
      "content": "<p>Limestone,<br />Middle Kindom.<br /></p>"
    }
  },
  "mapMarker4": {
    "cordX": "55",
    "cordY": "42",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of a seated man",
      "content": "<p>Granite,<br />Middle Kingdom.</p>"
    }
  },
  "mapMarker5": {
    "cordX": "65",
    "cordY": "80",
    "icon": "map-marker.svg",
    "modal": {
      "title": "The tomb",
      "content": "<p>Coffins,<br />Anthropoid Coffin with mummy.<br />"
    }
  },
  "mapMarker6": {
    "cordX": "31",
    "cordY": "49",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Head of Queen Hatshepsut",
      "content": "<p>Painted Limeston, <br />New Kingdom,<br />Luxor.</p>"
    }
  },
  "mapMarker7": {
    "cordX": "62",
    "cordY": "58",
    "icon": "map-marker.svg",
    "modal": {
      "title": "The Goddess Sekhmet",
      "content": "<p>Grantie, <br />New Kingdom,<br />Luxor.</p>"
    }
  },
  "mapMarker8": {
    "cordX": "50",
    "cordY": "57",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Statue of the god Amun",
      "content": "<p>Basalt, <br />New Kingdom.</p>"
    }
  },
  "mapMarker9": {
    "cordX": "62",
    "cordY": "23",
    "icon": "map-marker.svg",
    "modal": {
      "title": "Akhenaten",
      "content": "<p>Limestone , <br />Middle Kingdom.</p>"
    }
  }
};

(function($) {
  $(document).ready(function() {
    createKBmap('KBtestmap', 'mapa.jpg');
    KBtestmap.importJSON(json);
    KBtestmap.showAllMapMarkers();
  });
})(jQuery);

Answer 1

Самый простой способ сделать это - добавить элемент a к модальному контенту, который перенаправляет на целевую страницу при нажатии. При необходимости вы можете стилизовать этот элемент a, чтобы он выглядел как кнопка, используя CSS:

"mapMarker1": {
  "cordX": "50",
  "cordY": "22",
  "icon": "map-marker.svg",
  "modal": {
    "title": 'Statue of a standing man',
    "content": '<p>Old Kingdom, <br/>Saqqara.<br /><a href="/foo.html">More information</a>'
  }
},