1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map {
width: 480px;
height: 250px;
}
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([35.33046758831031, 25.367593327417012], 1);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>' }).addTo(map);
var myItems = [
["c'est ici", 35.33046758831031, 25.367593327417012]
//["Musée d'Orsay", 48.86, 2.327],
//["Museum National d'Histoire Naturelle", 48.8422, 2.3564],
//["Notre Dame", 48.803056, 2.349722]
];
var markers = new L.featureGroup();
for (var i = 0; i < myItems.length; i++) {
var item = myItems[i];
marker = new L.marker([item[1],item[2],item[3]]).bindPopup(item[0]);
markers.addLayer(marker);
}
markers.on('mouseover', function(e){ e.layer.openPopup(); })
.on('mouseout', function(e){ e.layer.closePopup(); });
map.addLayer(markers);
map.fitBounds(markers.getBounds());
</script> |
Partager