JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>
<a href="#" id="redirectToMarker">Redirect to marker</a>
CSS
#map {
width: 800px;
height: 500px;
}
JavaScript
$(document).ready(function () {
init_map();
add_marker();
});
var map;
function init_map() {
map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
}
function add_marker() {
var points = [
["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"],
["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"],
["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"]
];
var marker = [];
var i;
for (i = 0; i < points.length; i++) {
marker[i] = new L.Marker([points[i][1], points[i][2]], {
win_url: points[i][3]
});
marker[i].addTo(map);
marker[i].on('click', onClick);
};
}
function onClick(e) {
console.log(this.options.win_url);
window.open(this.options.win_url);
}
function redirectToMarker() {
let xx = document.getElementById("redirectToMarker");
alert(xx);
}