How to make a map marker with a more information button on a map

Question

On my website I have a page that has a map which I add map markers to. I want to add a 'more information' button to each map marker that redirects to another page.

I put on mapMarker2 one but I don't know how to put a link to redirect to the other page when I click it

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

The simplest way to do this would be to add an a element to the modal content which redirects to the target page when clicked. If necessary you can style this a element to look like a button using 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>'
  }
},