#map { height: 650px; width: 100%; } // Initialize the map var map = L.map('map').setView([51.505, -0.09], 13); // Set default center and zoom level // Add a custom tile layer L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© CARTO' }).addTo(map); // Custom icon var customIcon = L.icon({ iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png', iconAnchor: [16, 32], popupAnchor: [0, -32] }); // Coordinates for the markers var lat1 = 25.260546268295464; var lng1 = 55.33609173715994; var lat2 = 25.317432414492405; var lng2 = 55.37479123934618; // Create and add the first marker with a custom icon var marker1 = L.marker([lat1, lng1], { icon: customIcon }).addTo(map) .bindPopup('Marker 1') .on('click', function () { var googleMapsUrl = 'https://www.google.com/maps?q=' + lat1 + ',' + lng1; window.open(googleMapsUrl, '_blank'); }); // Create and add the second marker with a custom icon var marker2 = L.marker([lat2, lng2], { icon: customIcon }).addTo(map) .bindPopup('Marker 2') .on('click', function () { var googleMapsUrl = 'https://www.google.com/maps?q=' + lat2 + ',' + lng2; window.open(googleMapsUrl, '_blank'); }); // Optionally, add a map zoom level to fit the markers var bounds = L.latLngBounds([lat1, lng1], [lat2, lng2]); map.fitBounds(bounds);