I have a button on my site, on clicking it will show/hide a google map div (embedded using iframe). It is working fine except the border-radius is working only during jquery animate. Once the animation is done, the iframe becomes square.

I have setup a jsFiddle demo

HTML

<div id=layer-2>

    <span id=moreInfo>

        <iframe src=https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12242.306455925878!2d-75.12138282383809!3d39.90611059880662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e48fdca1ebac4d0!2sWalt+Whitman+Bridge!5e0!3m2!1sen!2sin!4v1395728987250 width=300 height=200 frameborder=0 style=border:0></iframe>

    </span>

</div>

<button>Show</button>

Javascript

$(function () {

    $(button).on(click, function () {

        if(parseInt($(#moreInfo).css(opacity))) {

            $(button).text(Show);

            $(#moreInfo).css({opacity:1,top:0,height:200,display:'inline'});

            $(#moreInfo).animate({opacity: 0,top: 100,height: 100}, 100, function () {$(#moreInfo).hide();});

        } else {

            $(button).text(Hide);

            $(#moreInfo).css({opacity:0,top:100,height:100,display:'inline'});

            $(#moreInfo).show();

            $(#moreInfo).animate({opacity: 1,top: 0,height: 200}, 100);

        }

    });

});

CSS

#moreInfo {

    position: absolute;

    opacity: 0;

    top: 0px;

    left: 10px;

    width: 300px;

    height: 200px;

    background-color: blue;

    border-radius: 50%;

}

#layer-2 {

    height: 200px;

}

body {

    background-color: #aaa;

}

Note: Please don't mark this duplicate, I have gone through a number of stack overflow answers, but none of them helped. Also please don't suggest for any other google maps api integration, I need to use the iFrame implementation.