WordPress.org

Ready to get started?Download WordPress

Forums

Asynchronously loading Google Map in iFrame with onClick using Java. (2 posts)

  1. kenneth12345
    Member
    Posted 1 year ago #

    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="http://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>
  2. MuViMoTV
    Member
    Posted 7 months ago #

    Did you manage to do that? I have the same issue as you do...

Topic Closed

This topic has been closed to new replies.

About this Topic