Creating an interactive map for your website is a powerful way to engage your audience and provide location-based information. Adding markers and popups to your custom map enhances user experience, making it easy to pinpoint locations and display additional information.

In this tutorial, we’ll show you how to add markers and popups to your custom map using Leaflet.js

Why Add Markers and Popups to Your Custom Map?

Markers and popups are essential for creating a user-friendly map. They allow users to:

• Locate specific points of interest like stores, landmarks, or events.
• Access detailed information about a location when clicking a marker.
• Navigate more effectively by visualizing data on an interactive interface.

Whether you're building a business directory, an event map, or a real estate platform, these features are a must-have.

Step 1: Set Up Your Custom Map

Before adding markers, ensure you have a custom map set up. We recommend using Leaflet.js, a lightweight and open-source JavaScript library.

Add Leaflet.js to Your Project

Option 1: Use a CDN

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

Initialize the Map

<script>
  const map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
</script>

This code initializes a basic map centered at the specified coordinates.

Step 2: Add Markers to Your Map

const marker = L.marker([51.505, -0.09]).addTo(map);

// You can add a custom icon for your marker to match your branding or use case:
const customIcon = L.icon({
  iconUrl: 'path-to-your-icon.svg',
  iconSize: [32, 32], // size of the icon
  iconAnchor: [16, 32] // point of the icon which will correspond to marker's location
});

const customMarker = L.marker([51.505, -0.09], { icon: customIcon }).addTo(map);

Step 3: Add Popups to Markers

Popups display additional information when users click on a marker. Add a popup to your marker with this code:

marker.bindPopup("This is a custom popup.").openPopup();

This is it, you should now have markers and basic popups on your leafletjs map.

Let mamap.io Simplify your life

Linking backend data to your map and styling markers and popups can be time-consuming. With mamap.io, you can easily create custom maps with pre-built markers and popups, and focus on something else rather than developing everything yourself.