Leaflet Map open Popup

https://stackoverflow.com/questions/59840735/open-leaflet-marker-popups-from-a-link-outside-the-map

by erick

HTML

<!DOCTYPE html>
<html>
<head>
	
	<title>Quick Start - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/leaflet.geometryutil.min.js"></script>

	
</head>
<body>



<div id="mapid" style="width: 600px; height: 400px;"></div>

<a class="openpopuplink" data-id="1" href="#">Marker 1</a>
<a class="openpopuplink" data-id="2" href="#">Marker 2</a>

</body>
</html>

JavaScript

//External Link - URL: www.xyz.com?markerid=3
//But not working on jsfiddle.

function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  const regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var POPUP_MARKER_ID = getParameterByName('markerid');




var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

  var fg = L.featureGroup().addTo(mymap);

var markers = [{
    "id": 1,
    "name_point": "Name point",
    "type_point": "Type point",
    "location_latitude": 51.509,
    "location_longitude": -0.08
  },
  {
    "id": 2,
    "name_point": "Name point",
    "type_point": "Type point",
    "location_latitude": 51.503,
    "location_longitude": -0.06
  },
  {
    "id": 3,
    "name_point": "Name point",
    "type_point": "Type point",
    "location_latitude": 51.51,
    "location_longitude": -0.047
  }
];

for (var i = 0; i < markers.length; ++i) {
  var popup =
    '<span>' +
    '<em>' + markers[i].type_point + '</em>' +
    '<h3>' + markers[i].name_point + '</h3>' +
    '<form action="http://maps.google.com/maps" method="get" target="_blank"><input name="saddr" value="' + markers[i].get_directions_start_address + '" type="hidden"><input type="hidden" name="daddr" value="' + markers[i].location_latitude + ',' + markers[i].location_longitude + '"><button type="submit" value="Get directions"...