Asynchronously loading Google Map in iFrame with onClick using Java.

Hi,

I wish to load and toggle display a google map on my page only when a user clicks a link. That is I do NOT want the maps to load in the background when the page loads, but only load when the user requests by clicking the link – Show/Hide map

The code below works when for simple URLs, but not for the google map example below. It also works when the entire iFrame code as produced by the Google Map embed code generator is dumped in the div. Just not when I pull out the src as shown here….

I have also looked for a plugin to do exactly this…no luck, and also scoured the Google development pages… tried the api… Any suggestions as to why this simple rough script will not work as it is with Google Maps, and how to get what I want? Please help…

<a href="#" onClick="javascript:hideshow(document.getElementById('adiv')); loadmap('mapframe');">Show/hide map</a>

<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
function loadmap(){
document.getElementById("mapframe").src="https://maps.google.com.au/?ie=UTF8&ll=-32.830735,147.451465&spn=8.655905,14.128418&t=h&z=6&output=embed"
}
</script>

<div id="adiv" style="font:24px bold; display: none">
<iframe id="mapframe" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=" "></iframe>
</div>