Hello. Need help, advice. In the map designer from Google created a map, opened access, defined the scope, received a code for the site. And then the most interesting. If you simply insert the card on the page - all the rules. Plow as it should. But if you insert into the emerging div, the card moves out. The scope is not shown in the center of the frame. It just leaves for maximum removal and that's it. Here is an example simple.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <a id="link1" href="#">Click me</a> <br> <iframe id="content1" style="display: none;" src="http://www.google.com/maps/d/embed?mid=1XCQgM2Ze65XdUGyu4uzcE-NlAKI" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> <script> $(document).ready(function () {$('a#link1').click(function (e) { $(this).toggleClass('active'); $('#content1').toggle(); e.stopPropagation();}); $('body').click(function () { var link = $('a#link1'); if (link.hasClass('active')) { link.click();}});}); </script> </body> </html>

Who has the knowledge how to overcome this kakahu - please share.

  • all the hindrance display: none - Jean-Claude
  • Let's say. And how do you think I make it drop down? Though hint that, for example, Yandex hacks away normally. There are no problems with it at all. - user210322

1 answer 1

Many ways, the first thing that came to mind, absolute positioning off-screen, I think you can easily think of another five ways.

Alternatively: first load the map, and then hide it. Probably flashes on the screen.

Or, in general, do not load anything before pressing the button (do not connect the iframe), but dynamically load it by pressing the button.

 $(function() { $('a#link1').click(function(e) { $(this).toggleClass('active'); $('#content1').toggleClass('noview'); }); }); 
 .noview { position: absolute; top: -99999px; width: 600px; height: 450px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p><a id="link1" href="#">Click me</a></p> <iframe id="content1" class="noview" src="http://www.google.com/maps/d/embed?mid=1XCQgM2Ze65XdUGyu4uzcE-NlAKI" width="600" height="450" frameborder="0" allowfullscreen></iframe> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim non rerum voluptates voluptatem aspernatur cumque quaerat sed impedit dolore natus quis officia harum, eum repellendus neque fuga reprehenderit magni, id.</p>

  • thank you! If you throw more ideas for the future - in general bow to the ground. - user210322