CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3
JHarley1
JHarley1

Reputation: 2112

Nice Easy jQuery

I have a nice easy problem for you here.

This is a nice easy navigation script that uses the jQuery .load().

Problem is one of these pages uses the Google Maps API...

I found some code from a post on this forum that basically allowed you to load a map on demand.

I figure if I trigger loadmap() and loadscript() when a link is clicked this would work.

Problem being I haven't uses jQuery in a while and have completely forgot how to daisy chain functions...

So basically: I want the function to do the .load function but then call both LoadMap() and loadScript().... 

<html>
<head>
    <title>
        Overcomming Crome 
    </title>
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.jNav').click(function(){
            $('#sandbox').load($(this).attr('href'));
            return false;
          });
        });

        function loadMap() {
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(37.4419, -122.1419), 6);
          map.addOverlay(new GMarker(map.getCenter()));
        }

        function loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
          document.body.appendChild(script);
        }
    </script>

</head>
<body>
    <h1>
        Overcomming Crome
    </h1>
    <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
    <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
    <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
    <div id="sandbox"></div>
</body>

Then this is my edited code: 

<html>
    <head>
        <title>
            Overcomming Crome 
        </title>
        <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              $('.jNav').click(function(){
                $('#sandbox').load($(this).attr('href'),function() {
                  loadMap();
                  loadScript();
                });
                return false;
              });
            });

            function loadMap() {
                alert("Function 1 loaded");
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(37.4419, -122.1419), 6);
                map.addOverlay(new GMarker(map.getCenter()));
            }

            function loadScript() {
                alert("Function 2 loaded");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
                document.body.appendChild(script);
            }
        </script>

    </head>
    <body>
        <h1>
            Overcomming Crome
        </h1>
        <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
        <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
        <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
        <div id="sandbox"></div>
    </body>
</html>

Please note: "map" is on page1.html.... Can you see what I am trying to do?

Upvotes: 0

Views: 607

Answers (5)

Sergi Papaseit
Sergi Papaseit

Reputation: 16174

You mean passing a callback function, like:

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

This will call loadMap() and loadScript() when load() is completed.

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272106

Since you pass &async=2 and &callback=loadMap to the Google maps API, it will automatically call the callback function (i.e. loadMap) once loaded.

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});

Upvotes: 3

roryf
roryf

Reputation: 30160

The solution isn't to 'daisy chain' the functions, as that would still execute them in order. You need to wait until the external data is loaded before calling the other methods, by passing in a callback function to load:

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    loadMap();
});

Upvotes: 1

gor
gor

Reputation: 11658

Your call to load function should look like this:

$('#sandbox').load($(this).attr('href') function(){
    loadScript();
    loadMap();
});

Upvotes: 0

corroded
corroded

Reputation: 21564

map = new GMap2(document.getElementById("map"));

you don't have any element by the id map

also the load function has a callback so you can do: 

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

Upvotes: 1

Related Questions