Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24978

    When embedding a google map iframe, the code is getting inline height and width styles dynamically added to them. I believe this has to do with the slideshow video javascript that makes sure that video slides get resized. The problem is that it is making our maps look really short. If you look in the generated code below you can see that javascript is adding an inline style height and width which is not in the actual source code.

    Why is this and how can we just embed a normal google map on a page without the script trying to resize it?

    ‘<iframe src=”https://www.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Gladstone+Hotel,+1214+Queen+Street+West,+Toronto,+Ontario,+Canada&aq=0&oq=Gladstone&sll=43.656877,-79.32085&sspn=0.662697,1.448822&ie=UTF8&hq=Gladstone+Hotel,+1214+Queen+Street+West,+Toronto,+Ontario,+Canada&t=m&ll=43.64279,-79.426829&spn=0.006295,0.006295&output=embed” height=”350″ width=”425″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” style=”width: 1249px; height: 54.123152922823586px;”></iframe>’

    #125368

    Hi,

    Give it a unique css selector like “iframeee”

    <iframe class="iframeee" src="https://www.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Gladstone+Hotel,+1214+Queen+Street+West,+Toronto,+Ontario,+Canada&aq=0&oq=Gladstone&sll=43.656877,-79.32085&sspn=0.662697,1.448822&ie=UTF8&hq=Gladstone+Hotel,+1214+Queen+Street+West,+Toronto,+Ontario,+Canada&t=m&ll=43.64279,-79.426829&spn=0.006295,0.006295&output=embed" height="350" width="425" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

    Then add this on your custom.css

    .iframeee {
    width: 425px !important;
    height: 350px !important;
    }

    Regards,

    Ismael

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

The topic ‘Google maps iframe has height and width overwritten with inline styles’ is closed to new replies.