Leaflet.js bind popup to marker

http://leafletjs.com/examples/quick-start.html

by Geo George

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="h1" class="hov">
  hover1
</div>
<div id="h2" class="hov">
  hover2
</div>

CSS

#map {
  height: 300px;
}

JavaScript

var location = {
  'h1': [51.5072, 0.1275],
  'h2': [48.8567, 2.3508],
  'h3': [41.9000, 12.5000],
  'h4': [59.3294, 18.0686]
}

// Create the map
var map = L.map('map').setView(location['h1'], 4);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    maxZoom: 18
  }).addTo(map);

// add a marker
L.marker(location['h1']).addTo(map).bindPopup("<img src=" + "http://lorempixel.com/50/50/?" + "/>");

$('.hov').hover(
  function() {
    $(this).append($("<span> ***</span>"));
    var id = $(this).attr('id');
    console.log(id);
    var popup = L.popup(id)
      .setLatLng(location[id])
      .setContent(id)
      .openOn(map);
  },
  function() {
    $(this).find("span:last").remove();
  }
);