JSFiddle - React, Tailwind, and code Playground

HTML

<div class="iframe-wrap hidden"></div>
<iframe width="425" scrolling="no" height="350" frameborder="0"  marginwidth="0" marginheight="0" src="http://maps.google.com/maps?q=19.4762219+72.8303432&amp;ie=UTF8&amp;t=m&amp;z=14&amp;ll=19.476222,72.830343&amp;output=embed"></iframe>

CSS

.hidden{
    display:none;
}

iframe{
background:ivory;
}

JavaScript

var src1="http://www.raweng.com",
    src2="http://maps.google.com/maps?q=19.4762219+72.8303432&amp;ie=UTF8&amp;t=m&amp;z=14&amp;ll=19.476222,72.830343&amp;output=embed",
    src3 = "http://maps.google.com";
$('<iframe width="425" scrolling="no" height="350" frameborder="0"  marginwidth="0" marginheight="0"/>')
    .load(function(){
               
       $('.iframe-wrap').addClass("loaded").removeClass('hidden');
    })
    .prependTo($('.iframe-wrap'))
    .attr('src',src2);