<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"  data-require="leaflet@0.7.3" data-semver="0.7.3" />
    <link rel="stylesheet" href="//leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="//leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="//labs.easyblog.it/maps/leaflet-search/src/leaflet-search.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>
    <script type="text/javascript" src="//leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <script type="text/javascript" src="//labs.easyblog.it/maps/leaflet-search/src/leaflet-search.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
var map = L.map('map', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data &copy; OpenStreetMap contributors'
    })
  ]
});

var markers = L.markerClusterGroup({ disableClusteringAtZoom: 16 });

/////////////

var controlSearch = new L.Control.Search({layer: markers, initial: false});

/////////////

var LeafIcon = L.Icon.extend({
        options: {
            iconSize:     [32, 37],
            iconAnchor:   [16, 37],
            popupAnchor:  [1, -30]
        }
});
/////////////

var iconRed = new LeafIcon({iconUrl: './images/marker_icons/red.png'}),
    iconGreen = new LeafIcon({iconUrl: './images/marker_icons/green.png'});

/////////////

var addressPoints = [
    [0,0, "Item 1"],
    [1,1, "Item 2"],
    [2,2, "Item 3"],
    [3,3, "Item 4"]
];

/////////////

for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];   
    var title = a[2];

    marker = new L.Marker(new L.latLng(a[0], a[1]), {
      title: title,
      icon: iconRed
    });

    marker.bindPopup(title);

    markers.addLayer(marker);
}

/////////////

map.addLayer(markers);

/////////////

map.addControl(controlSearch);
body {
  margin: 0;
}
html, body, #map {
  height: 100%;
}