How to install a map Yandex or google on the website?

Hello!
Friends, can you tell me how to install the map on the website, so that it would become active only on click?
I want to install two cards, in the contacts section, but want to install the full width of the page. If you just copy code, which offers Yandex, when the scrolling when I get to the card, becomes active only in the block map (zoom is activated this card) and it is inconvenient to browse further.
Thank you.
July 4th 19 at 23:23
3 answers
July 4th 19 at 23:25
Solution
Here is a working version https://jsfiddle.net/skodnik/vs4vg74z/ explanation example
Neither of which I can not understand... In the example that you showed, everything works as I need! And I have, or does not want to work. - darrel_Kohl commented on July 4th 19 at 23:28
Give a link, say what it is. - nona commented on July 4th 19 at 23:31
boulinaw.bget.ru/kontakty Here is the link - darrel_Kohl commented on July 4th 19 at 23:34
: All true, except that you have not defined styles .front-map-overlay. More precisely they are defined, but are ignored by browsers, since they are preceded by an error in the style.css at line 1543 extra "}". Well, it makes no sense to specify them twice. - nona commented on July 4th 19 at 23:37
: With media queries, you need to understand. The brackets are not right, there is no closing. - nona commented on July 4th 19 at 23:40
July 4th 19 at 23:27
Solution
Hi.

To place before the map container div
<div class="front-map-overlay" onclick="style.pointerEvents='none'" style="pointer-events: none;"></div>

and add css code
.front-map-overlay {
 position: relative;
 height: 400px;
 top: 400px;
 margin-top: -400px;
 z-index: 2;
}

400 is the height of the block to the card.
Maybe I something doing wrong, but the problem is that the card becomes inactive... :(
<div class="front-map-overlay" onclick="style.pointerEvents='none'" style="pointer-events: none;">
<div class="maps"> Office "

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=uglTJfFO_MOc1lwvdSTy1WXPXEK67lis&width=100%&height=432&lang=ru_RU&sourceType=constructor&scroll=true"></script>
</div>
</div>

So I did... - darrel_Kohl commented on July 4th 19 at 23:30
: remove the first div - it overlaps the map. Without it everything works. - nona commented on July 4th 19 at 23:33
: Map should become active after you click on it. - darrel_Kohl commented on July 4th 19 at 23:36
: here you can see a sample implementation demo.themeisle.com/zerif-pro . At the bottom of the page there is a map that work the same way. - nona commented on July 4th 19 at 23:39
or anything not working... :( Edit the theme Zerif Lite is not yet out... - nona commented on July 4th 19 at 23:42
The map is called by the script
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=uglTJfFO_MOc1lwvdSTy1WXPXEK67lis&width=100%&height=328&lang=ru_RU&sourceType=constructor&scroll=true"></script>
- darrel_Kohl commented on July 4th 19 at 23:45
July 4th 19 at 23:29
<!-- Map -->
<div id="map"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
the <script>
ymaps.ready(function () {

 var myMap = new ymaps.Map('map', {...});

 myMap.behaviors.disable('scrollZoom'); // disable scrolling

});
</script>

Find more questions by tags CSSPHPWordPress