zeus.ugent.be/layouts/partials/_map.erb

<!-- MAPS -->
      <div class="map-wrapper box">
          <div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
              Could not find location. Please create an issue on github.
          </div>
          <div id="map" style="height:100%;"></div>
      </div>

<script>
var map = L.map('map');

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

function performRequest(url, success_callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = function() {
      if (this.status >= 200 && this.status < 400) {
        // Success!
        var data = JSON.parse(this.response);
        success_callback(data);
      } else {
        // We reached our target server, but it returned an error

      }
    };

    request.onerror = function() {
      // There was a connection error of some sort
    };

    request.send();
}

performRequest("https://photon.komoot.io/api/?limit=1&q=<%= URI::encode_www_form_component(@location) %>", function(data) {
    var lat, lon;
	if(data.features.length < 1) {
		        lat = 51.0538286;
		        lon = 3.7250121;

		        var className = 'is-invisible';
		        var el = document.getElementById('map-error');

		        if (el.classList)
			          el.classList.remove(className);
		        else
			          el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
		    } else {
			            var place = data.features[0].properties;
			            lat = data.features[0].geometry.coordinates[1];
			            lon = data.features[0].geometry.coordinates[0];

			            L.marker([lat, lon]).addTo(map)
			                .bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
			                .openPopup();
			        }
	    map.setView([lat, lon], 18);
});
</script>