My View has a map with markers that display pop-ups when clicked, which is functioning correctly.
Below is the code for the map functionality:
export function all_hotels_map_results(): void {
Helpers.set_currency_settings();
const json = gon.hotel_info;
const token = "***********";
const centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng, gon.destination_city.lat);
mapboxgl.accessToken = token;
let map = new mapboxgl.Map({
container: "map-canvas",
style: "mapbox://styles/mapbox/streets-v9",
center: centerLatlng,
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function() {
$.each(json, function(i, item) {
let myLatlng = new mapboxgl.LngLat(item.lng, item.lat);
let stars = "";
for(let s = 0; s < item.rating; s++) {
stars += '<img class="star-image" style="height:20px;width:20px;">';
}
const Popup_Content = '<div class="map-card__wrapper">'
+'<div class="map-card__image-container">'
+'<div class="map-card__image" style="background: url('+item.pictures[0].url+');">' +'</div>'
+'</div>'
+'<div class ="map-card__content-container ">'
+ '<div class ="map-card__title">'+item.name +'</div>'
+'<p class="map-card__address">'+item.address1+'</p>'
+ '<div class ="map-card__review">'+stars +'</div>'
+ '<div class ="map-card__price-container">'+__("Flygbolag")+ ": "+ accounting.formatMoney(item.sales_prices[0])
+'</div>'
+ '</div>';
let marker = new mapboxgl.Marker()
.setLngLat(myLatlng)
.setPopup(new mapboxgl.Popup({ offset: 5 })
.setHTML(Popup_Content))
.addTo(map);
});
});
}
However, I am having trouble retrieving the value of
<div class ="map-card__title">
$('.map-card__title').click(function(){
alert();
})
There are no alert messages in the console when this code is executed. What could be the issue?
Any assistance you can provide would be greatly appreciated. Thank you.