loading iframe source dynamically

I have a few Google map embeds on my page; these are making my page slow, so I wanted to load them after the loading of the page, so I was trying something like this. Unfortunately the map's iframe source changes, but the map doesn't load inside, its just blank.

e.g. link:

<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Megarugas+Banquet+and+Lawn,+Opp.+Chandivali+studio,&amp;aq=&amp;sll=19.127228,72.865035&amp;sspn=0.013259,0.022724&amp;ie=UTF8&amp;hq=Megarugas+Banquet+and+Lawn,+Opp.+Chandivali+studio,&amp;hnear=&amp;t=m&amp;cid=15174344858031542989&amp;ll=19.115165,72.894802&amp;spn=0.024329,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Megarugas+Banquet+and+Lawn,+Opp.+Chandivali+studio,&amp;aq=&amp;sll=19.127228,72.865035&amp;sspn=0.013259,0.022724&amp;ie=UTF8&amp;hq=Megarugas+Banquet+and+Lawn,+Opp.+Chandivali+studio,&amp;hnear=&amp;t=m&amp;cid=15174344858031542989&amp;ll=19.115165,72.894802&amp;spn=0.024329,0.025663&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> 

HTML:

<iframe id="blabla"></iframe> 

JS:

$(window).load(function() { if ($('#blabla').length <= 0) { return; } // to avoid errors in case the element doesn't exist on the page / removed. $('#blabla').attr('src','//example.com/page'); });