Module ‘map-google’. Серая embed карта со спрятанной навигацией.

Демо:

https://codepen.io/ildar-meyker/pen/JjzLQWd

Плагины:

Подключение:

//

Разметка:

//

<div style="width: 500px; height: 500px">
    <div class="map-google">
        <iframe
            class="map-google__iframe"
            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3023.6752502007657!2d-73.992009!3d40.725165!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259851c1e9037%3A0x74407071825a96a4!2sCBGB!5e0!3m2!1sen!2sus!4v1395419817211"
        ></iframe>
    </div>
</div>

Стили:

// blocks/maps/map-google.scss

.map-google {
    position: relative;
    width: 100%;
    height: 100%;
    filter: #{"grayscale()"};
    overflow: hidden;

    &__iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 20px);
        height: calc(100% + 300px);
        transform: translate(-10px, -150px);
    }
}

Инициализация:

//