5

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 = 
            "<dl>"
                + "<dt>" + title + "</dt>"
                + image

                +
           "</dl>";


            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 '15 at 20:46
15

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

You can try working example on jsFiddle

<!DOCTYPE html>
<html>
<head>
<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]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
</style>
</head>
<body>
<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 () {
        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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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);
    }
</script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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