In this article I will explain with an example, how to bind Leaflets maps in HTML.
Implementing Leaflet Plugin
Inside the HTML, the following Leaflet CSS files is inherited.
1. leaflet.css
And then, the following Leaflet JS files are inherited.
1. jquery.min.js
2. leaflet.js
Adding multiple markers with InfoWindow to Leaflets Map
Inside the
jQuery document ready event handler, an array of markers of different geographic address locations is created.
Each marker in the array contains title, latitude, longitude and description of the location.
Now, the Leaflet map is initialized and default view is set using setView function.
Next, attribution is set to the map using titleLayer function then it is added to map.
Then, a
jQuery loop is executed over the JSON data set in an array of markers.
Finally, one by one each marker is added to the Leaflet map.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script type="text/javascript">
$(function () {
var markers = [
{
"title": 'Alibaug',
"lat": '18.641400',
"lng": '72.872200',
"description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'
},
{
"title": 'Mumbai',
"lat": '18.964700',
"lng": '72.825800',
"description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
},
{
"title": 'Pune',
"lat": '18.523600',
"lng": '73.847800',
"description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
}
];
// Initializing the Map.
var map = L.map('dvmap').setView([markers[0].lat, markers[0].lng], 8);
// Setting the Attribution.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Adding Marker to map.
$(markers).each(function (index, item) {
L.marker([item.lat, item.lng])
.bindPopup("<b>" + item.title + "</b><br />" + item.description).addTo(map);
});
});
</script>
HTML Markup
The following HTML Markup consists:
DIV – For populating map.
<div id="dvmap" style="width: 400px; height: 400px;"></div>
Screenshot
![Bind Leaflets Maps in HTML]()
Demo
Downloads
