I want to implement marker click event so when user click on marker it goes to url. Url is written inside an array (a[3]). However, this is my code which doesn't work, it always goes to the link of the last marker only. Can you help me? I need a function which will open a new window with url in an array of that specific marker.

 for (var i = 0; i < markers.length; i++) {
            var a = markers[i];
            var title = a[2];
            var link = a[3];
            var image = a[4];

         var list = 
                + "<dt>" + title + "</dt>"
                + image


            var marker = new L.Marker(new L.LatLng(a[0], a[1]), { riseOnHover: true }).bindLabel(list).addTo(map);

            marker.on("click", function() {

                window.open(link, "_blank");


  • Sorry to invade your thread... but how exactly do you add a custom marker icon to this code?
    – user50625
    Apr 16, 2015 at 20:46

2 Answers 2


I have written down a small piece of code might be helpful for you.

You can try working example on jsFiddle

<!DOCTYPE html>
<title>Leaflet - Marker Click Event</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
#map {
    width: 800px;
    height: 500px;
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
    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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'

    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].on('click', onClick);

    function onClick(e) {

L.marker use a strict syntax, beware to enclose all options by { and separating comma.

new L.marker([1.25,42.3],{win_url: "", icon: iconPanne});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.