Google Map integration

[Nehul Agrawal]

Hello, Thank you for such an amazing library. I used this to show google map on this. But when i embade google map on the same. It seems to have some problem. It splits the whole google map into number of vPanels i define.

Here is my example code i am using:

(function() {
  document.addEventListener('DOMContentLoaded', function() {

    if (!OriDomi.isSupported) {
      document.getElementById('unsupported').style.display = 'block';
      return;
    }
     var folded = new OriDomi('.demo3', {
        maxAngle: 60,
        vPanels: 5,
        // ripple: true
      }).accordion(60, 'left');

      var elemt = document.getElementById("demo3");
      elemt.addEventListener("mouseenter", function(){
          folded.accordion(100, 'left').unfold();
      }, false);
      elemt.addEventListener("mouseleave", function(){
          folded.accordion(60, 'left');
      }, false);
  });
}).call(this);

<li>
        <div class="demo demo3" id="demo3">
         
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30710983.209769644!2d64.45235976587381!3d20.01273993518969!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604060354400!5m2!1sen!2sin" width="100%" height="200"  frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>


        </div>
        <div>
          <div class="label">accordion(-20)</div>
          <div class="button" data-n="2">fold</div>
        </div>
      </li>

Please let me know if i am doing something wrong in here. Or is there any solution so after unfold it will behave as a single google map element.

Looking forward to know this!

Thank you!

[Dan Motzenbecker]

Unfortunately this isn't a great use case for OriDomi since behind the scenes it's cloning the elements according to the number of panels you define. It might work for simple static map embeds but any map interactivity won't work. Sorry for the bad news.