Google Maps Bug

  • brookek14

    (@brookek14)


    11 years, 5 months ago

    **I have read the Getting Started Guide**

    http://new.debtwave.com/contact/#

    I am trying to embed Google Maps within a Modal box on the contact page, but it looks like there is an issue with the jQuery and the map is loading funky. Instead of having a map that fills up the whole available space at the correct zoom level, it is zoomed out so far that there is just a narrow strip of the map going across the top of the modal box.

    You click on the orange “Get directions” button to open the modal window.

    https://ww.wp.xz.cn/plugins/easy-modal/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Daniel Iser

    (@danieliser)

    11 years, 4 months ago

    @brookek14 – Sorry for the delays, been a busy few weeks around here.

    Can you tell me how you are adding the map to your modal? Is it a shortcode from another plugin, an iframe or a custom implementation using the standard Google Map APIs?

    PS. I’m not sure if you have seen the notice. Easy Modal has moved. Popup Maker( or Easy Modal v3 renamed ), has too many new features to describe. There is a simple migration tool included with Popup Maker to import from Easy Modal.

    I will be glad to assist in any way I can if you still need it. Thanks

    Thread Starter brookek14

    (@brookek14)

    11 years, 4 months ago

    No I did not see that, but I have now transferred all Easy Modals to Popup Maker plugin, and this problem still persists. I have tried both regular iFrame embed and custom responsive code and both show a zoomed out map.

    I am also using a plugin called WP FullPage and am wondering if maybe there is some conflicts with the jquery.

    Here is the current code I am using:
    css:
    .responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .responsive-iframe-container iframe,
    .vresponsive-iframe-container object,
    .vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    html:
<div class="responsive-iframe-container"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3353.1000852271995!2d-117.12510200000001!3d32.816113!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dbffda5395922f%3A0x1ebcd31d54514e1a!2sDebtWave+Credit+Counseling%2C+Inc.!5e0!3m2!1sen!2sus!4v1418879170726" width="600" height="450" frameborder="0"></iframe></div>

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Google Maps Bug’ is closed to new replies.