Embed OpenStreetMap with Marker in HTML using JavaScript

If you are looking for an alternative to Google Maps, OpenStreetMap is the best option to embed maps on the website. OpenStreetMap is a free and open-source platform that provides geographic data service without any cost. You can use OpenStreetMap API to embed maps in webpage without any restriction of the auth key. Similar to Google Maps, OpenStreetMap is allowed to add map in HTML with a marker and popup window. The marker helps to point the exact location on Map and the popup window displays the info over the marker.

To simplify the OpenStreetMap integration process, the Leaflet JavaScript library can be used. Leaflet is the leading open-source JavaScript library that makes the OpenStreetMap API and map integration simple. In this tutorial, we will show you how to embed map in the HTML web page and add marker with specific latitude & longitude using OpenStreetMap API.

Latitude & Longitude from Address

Before getting started, you need to collect the latitude and longitude of the location that will be marked on the map.

• You can use this free online tool to get latitude and longitude from address – Latitude and Longitude Finder

Once you get the latitude & longitude of the desired location, note them to use later in the script.

In this example, we will mark the “1600 Pennsylvania Avenue NW, Washington, DC 20500, USA” location on the Map.

• The latitude and longitude of this address are 38.8976763 and -77.0365298.
• So, we will use this latitude & longitude to set the position of the marker on the Map.

Embed Open Street Map in HTML Webpage

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 where you want the map to be added.

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

Set a fixed height of the map container and width of your choice using CSS.

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

Initialize the OpenStreetMap with the Leaflet plugin using JavaScript.

• Define the latitude, longitude, and zoom level of the map.
• Attach the map to the HTML container by specified element ID (mapWrap).
• Add marker with initial position and bind popup window.
• Set marker position based on the given latitude & longitude.
• Set popup content to be displayed in the info window over the map.
• Set callback function to handle marker click event (openPopupWindow).
• Open the popup window on marker clicks.

<script>
// Define latitude, longitude and zoom level
const latitude = 38.8976763;
const longitude = -77.0365298;
const zoom = 14;

// Set DIV element to embed map
var mymap = L.map('mapWrap');

// Add initial marker & popup window
var mmr = L.marker([0,0]);
mmr.bindPopup('0,0');
mmr.addTo(mymap);

// 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(mymap);

// Set lat lng position and zoom level of map 
mmr.setLatLng(L.latLng(latitude, longitude));
mymap.setView([latitude, longitude], zoom);

// Set popup window content
mmr.setPopupContent('Latitude: '+latitude+' <br /> Longitude: '+longitude).openPopup();

// Set marker onclick event
mmr.on('click', openPopupWindow);

// Marker click event handler
function openPopupWindow(e) {
    mmr.setPopupContent('Latitude: '+e.latlng.lat+' <br /> Longitude: '+e.latlng.lng).openPopup();
}
</script>

On page load, you will see the map is displayed on the web page and the marker is pointed on the map as per the given latitude & longitude. The popup window will display over the map with info window content. Also, this popup window will appear on clicking the marker.

OpenStreetMap with Multiple Markers and Info Windows using JavaScript