OpenStreetMap dan Leaflet.js

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

 <div id="map"></div>

<style>
  #map { height: 260px; }
  .leaflet-popup-content {
    font-size:2em;
  }

  /*greyscale
  .leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}*/

</style>

<script>
  var map = L.map('map', {
    //deactivate zoom control & function
  doubleClickZoom: false, 
  closePopupOnClick: false, 
  dragging: false, 
  zoomSnap: false, 
  zoomDelta: false, 
  trackResize: false,
  touchZoom: false,
  scrollWheelZoom: false,
    zoomControl:false,
});
  map.setView([48.17959297289091, 11.6342699968432788], 15);

  

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

  const redIcon = new L.Icon({
      iconUrl:
        "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
      shadowUrl:
        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    });

L.marker([48.17959297289091, 11.634269996843278],{
  icon: redIcon,
  tileSize: 512,
  
}).addTo(map)
    .bindPopup('IWSB Innovative Wirtschafts- und Steuerberatung GmbH')
    .openPopup();

  /** https://codepen.io/mnunes/pen/RXQqXz **/

</script>