Leaflet.js bind popup to marker

<a href="http://leafletjs.com/">Leaflet.js</a> is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ This demo shows how to: <ul> <li> use custom icons for markers <li> bind pop-ups to markers <li> customize popups </ul> Here data is provided by OpenStreetMap

by Alex Azuero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">

<div id="map"></div>
<div id="buttons">
<button type="button" id="btn1" class="btn btn-primary">Btn1</button>
<button type="button" id="btn2" class="btn btn-primary">Btn2</button>
<button type="button" id="btn3" class="btn btn-primary">Btn3</button>
<button type="button" id="btn4" class="btn btn-primary">Btn4</button>
<button type="button" id="btn5" class="btn btn-primary">Btn5</button>
<button type="button" id="btn6" class="btn btn-primary">Btn6</button>
</div>

CSS

#map {
  height:300px;
}
#buttons {
  padding: 10px;
  float: left;
}

JavaScript

var location = {
'London':[51.5072, 0.1275],
'Paris':[48.8567, 2.3508],
'Rome':[41.9000, 12.5000],
'Stockholm':[59.3294, 18.0686]
}
// Create the map
var map = L.map('map').setView(location['London'], 4);
    
// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);


var icon1 = L.icon({
    iconUrl: 'https://openclipart.org/download/13098/Anonymous-photo-camera.svg',
    iconSize:     [40,50], // size of the icon
    iconAnchor:   [20,45], // point of the icon which will correspond to marker's location
    popupAnchor:  [0,-10] // point from which the popup should open relative to the iconAnchor
});

var counter = 0;
for (var key in location) {
  if (location.hasOwnProperty(key)) {
   L.marker(location[key], {icon: icon1}).addTo(map).bindPopup("<b>"+key+"</b><img src="+"http://lorempixel.com/90/90/?"+counter+ "/>").openPopup();
  }
  console.log("#btn"+counter);
  $("#btn"+counter).text(key);
  counter+=1;
}