Google Map

                      <div class="card-body p-5 h-100">
                        <div id="map" style="height: 400px;"></div>
                        <div class="marker-content py-3">
                          <h5>Statue of Liberty</h5>
                          <p class="mb-0">An iconic symbol of freedom, located on Liberty Island in New York Harbor.</p>
                        </div>
                      </div>
                        

                            <script>
                            var map = L.map('map').setView([40.689247, -74.044502], 17);
                            
                            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                attribution: '© OpenStreetMap contributors'
                            }).addTo(map);
                            
                            var marker = L.marker([40.689247, -74.044502], {
                                icon: L.icon({
                                iconUrl: '"assets/img/map-marker.png"', // Your custom marker image
                                iconSize: [30, 30], // Adjust size as needed
                                })
                            }).addTo(map);
                            </script>