Cacher is the code snippet organizer for pro developers

.footer__map.map
    .map__container
        div(id="js-map")
        noscript
            img.map__noscript-map(src="./images/map.jpg" alt="Карта")
    .map__wrapper

@color-img-alt: grey;
@layout-size: 880px;

.wrapper() {
  width: @layout-size;
  margin: 0 auto;
}

.map {
  &__container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  &__noscript-map {
    display: block;
    margin: auto;
    width: 1200px;
    height: 100%;
    color: @color-img-alt;
  }

  &__wrapper {
    position: relative;
    z-index: 2;

    .wrapper();
  }
}

script.
    div = document.getElementById("js-map");

    // This is for avoid the bug in Safari
    div.setAttribute("style", "height: 26rem; width: 100%;");

    function initMap() {
        var coordinates = { lat: 45.043675, lng: 38.941264 },   
        markerCoordinates = { lat: 45.043391, lng: 38.944560 }, 
        markerImage = "images/map-marker.png",
        zoom = 18,
        map = new google.maps.Map(document.getElementById("js-map"), {
            center: coordinates,
            zoom: zoom,
            scrollwheel: false,
            disableDefaultUI: true
        }),
        marker = new google.maps.Marker({
            position: markerCoordinates,
            map: map,
            icon: markerImage
        });
    }

script(async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap")