How to display multiple locations on the map and show related information on user hover(like booking.com)

I think the users prefer to view the information of the locations on the map by hovering or clicking.
If you ever have tried to find a property on www.booking.com, you can see all properties on the map and you can find useful information about each property by hovering on a related marker.

https://www.booking.com/

If you, just like me, enjoy this cool feature, keep on reading. I am going to teach you how to implement a map like booking.com in a few simple steps.

If you prefer video tutorials, you can find a video version of this article on YouTube otherwise continue reading :).

The below script deploys a basic map. I used leaflet.js for creating the map. If you need more details you check this article: How to embed Open Street Map in a webpage (like Google Maps)

let mapOptions = {
 center:[48.8702, 2.3368],
 zoom:15
}
let map = new L.map(‘map’ , mapOptions);
let layer = new L.TileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);

Next, I define a variable and assign an array of objects to it. each object contains the information of a single place.

let locations = [
    {
        "id": 1,
        "lat": 48.8702,
        "long": 2.3368,
        "src": 'images/1.jpg',
        "title": "Mizuumi Boutique Hotel",
        "url":"https://www.booking.com/"
    },
    {
        "id": 2,
        "lat": 48.8741,
        "long": 2.3368,
        "src": 'images/2.jpg',
        "title": "Hotel Sulina International",
        "url":"https://www.google.com/"
    },
    {
        "id": 3,
        "lat": 48.8724,
        "long": 2.3428,
        "src": 'images/3.jpg',
        "title": "Iaki Conference & Spa Hotel",
        "url":"https://www.booking.com/"
    },
    {
        "id": 4,
        "lat": 48.87,
        "long": 2.3397,
        "src": 'images/4.jpg',
    }
]

Now for adding markers to each location, I use foreach method.

Foreach method executes a provided function, once, for each array element

for ( let i = 0 ; i< locations.length ; i++){
 new L.Marker([element.lat,element.long]).addTo(map)
}

Up to here, the result would be:

In order to show and hide the information, I use mouseover and mouseout events:

locations.forEach(element => {
    new L.Marker([element.lat,element.long]).addTo(map)
    .on("mouseover",event =>{
        event.target.bindPopup('content').openPopup();
    })
    .on("mouseout", event => {
        event.target.closePopup();
    })
});

In the next step, I replace the “content” text with HTML:

locations.forEach(element => {
 new L.Marker([element.lat,element.long]).addTo(map)
      .on("mouseover",event =>{
      event.target.bindPopup('<div class="card"><img src="'+element.src+'" width="80" height="80" alt="'+element.title+'"> <h3>'+element.title+'</h3></div>').openPopup();
     })
     .on("mouseout", event => {
      event.target.closePopup();
     })
});

And the final step is adding a click event for redirecting the user to the target page:

locations.forEach(element => {
    new L.Marker([element.lat,element.long]).addTo(map)
    .on("mouseover",event =>{
        event.target.bindPopup('<div class="card"><img src="'+element.src+'" width="80" height="80" alt="'+element.title+'">   <h3>'+element.title+'</h3></div>').openPopup();
    })
    .on("mouseout", event => {
        event.target.closePopup();
    })
    .on("click" , () => {
        window.open(element.url);
    })
});

The final result:

Let me know if this article was useful for you :)