OpenStreetMap with Multiple Markers and Info Windows using JavaScript

OpenStreetMap is a free and open-source platform that is used to embed maps on the website. You can use OpenStreetMap API to embed maps with marker in HTML. Similar to Google Maps, OpenStreetMap is used to display maps with marker and info window. Mostly, the single marker is pointed on the map to display the location with marker and info window popup. We can embed maps with multiple markers and info-windows using OpenStreetMap API.

Map with multiple markers are very useful when you want to show multiple locations on a single map. The user can see multiple locations with markers and open an info-window popup on the map. In this tutorial, we will show you how to embed OpenStreetMap with multiple markers and info windows using JavaScript.

Embed OpenStreetMap with Multiple Markers and Info Windows

We will use the Leaflet JavaScript library to simplify the OpenStreetMap integration process.

• Include the CSS and JS library files of the Leaflet JavaScript plugin.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

Define an HTML element with ID (mapWrap) where the map to be attached.

<div id="mapWrap"></div>

Set a fixed height of the map container and width as per UI using CSS.

<style>
#mapWrap {
    width: 100%;
    height: 400px; 
}    
</style>

Initialize the OpenStreetMap with Leaflet object using JavaScript:

• Define infowindow content, latitude, and longitude of multiple locations in the locations array.
• Initialize L.map() with the selector element (mapWrap) and set the first location as the initial marker position on the map.
• Loop through the locations,
  • Set the marker position with latitude & longitude using the L.marker() method.
  • Set popup content to be displayed in the info window using the bindPopup() method.
  • Set the zoom level on marker click event.

<script>
// Define multiple markers location, latitude, and longitude
const locations = [
    ['<b>Brooklyn Museum</b> <br>200 Eastern Pkwy, Brooklyn, NY 11238', 40.6713495, -73.9637573],
    ['<b>Central Library</b> <br>10 Grand Army Plaza, Brooklyn, NY 11238', 40.6725494, -73.9682162],
    ['<b>Prospect Park Zoo</b> <br>450 Flatbush Ave, Brooklyn, NY 11225', 40.6642751, -73.9651260],
    ['<b>Barclays Center</b> <br>620 Atlantic Ave, Brooklyn, NY 11217', 40.6826826, -73.9754629]
];

// Set container element to embed map
const map = L.map('mapWrap').setView([locations[0][1], locations[0][2]], 13);

// Add copyright attribution
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {
    foo: 'bar',
    attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
).addTo(map);

// Add multiple markers to map
for (var i = 0; i < locations.length; i++) {
    marker = new L.marker(
        [locations[i][1], locations[i][2]]
    )
    .bindPopup(locations[i][0])
    .addTo(map);
    
    // Set zoom level on marker click
    marker.on('click', function(mrk) {
        map.setView(
            [
                mrk.latlng.lat,
                mrk.latlng.lng
            ],
            14
        );
    });
}
</script>

On page load, you will see the map is displayed with multiple markers as per the given latitude & longitude in the locations array. On clicking the marker, the info-window popup will appear over the map with content specified in the locations array.

Google Maps with Multiple Markers and Info Windows using JavaScript