www.webdeveloper.com
Results 1 to 8 of 8

Thread: Google Map Jquery.load Problem

  1. #1
    Join Date
    Apr 2013
    Posts
    8

    Google Map Jquery.load Problem

    Hey trying to load my google map through a jquery load call... doesn't seem to be loading on to my div on my index page through an external page.. had the code from the google developers page.. but cant seem to get it to work.. any help or pointers
    that would be great...

    Code:
    $('#content').on('click', 'nav ul li a', function() {
    
        var page = $(this).attr('href');
        // Script to fade and show pages
                $('#content').hide().load('page/' + page + '.php').fadeIn('normal', function() {
    
                      function initialize() {
                              var mapOptions = {
                                zoom: 8,
                                center: new google.maps.LatLng(-34.397, 150.644),
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                              }
                              var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                            }
    
                            function loadScript() {
                              var script = document.createElement("script");
                              script.type = "text/javascript";
                              script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
                              document.body.appendChild(script);
                            }
    
                            window.onload = loadScript;
                            });
                });
      });

  2. #2
    Join Date
    Nov 2010
    Posts
    1,082
    in this line:
    Code:
    script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
    YOUR_API_KEY needs to be your API key

    and

    TRUE_OR_FALSE needs to be true or false

  3. #3
    Join Date
    Apr 2013
    Posts
    8
    Sorry i should put that in.. I input the api and set it to false still doesnt work.. think its the code im using..

  4. #4
    Join Date
    Nov 2010
    Posts
    1,082
    do you get errors in the error console? It's hard to say what's going on without the full context... maybe a link to a live page?

  5. #5
    Join Date
    Apr 2013
    Posts
    8
    www.alexcallow.com thats my page if you click the work button and then go back the slider at the top messes up...

  6. #6
    Join Date
    Apr 2013
    Posts
    8
    i put work into some pastie files.. really am struggling with this.. really cant to grips with the whole ajax loading and inject elements, external js files, scripts... been out it for days now..

    main index page - http://pastie.org/private/nymfbdsuau9amxjtcmxu1g
    external index page - http://pastie.org/private/f9zxpvv2wvm1skz2mmybsq
    external work page - http://pastie.org/private/zwvcnb4i9cjs8vfpnttq
    nav.js - http://pastie.org/private/bxrxutgz4wm8mh1e4gb3q

  7. #7
    Join Date
    Nov 2010
    Posts
    1,082
    Quote Originally Posted by Bigallyo88 View Post
    www.alexcallow.com thats my page if you click the work button and then go back the slider at the top messes up...
    I click "work" but there is no "back" button, because the page hasn't changed. It does result in an error if I click "home":
    Uncaught TypeError: Cannot set property 'innerHTML' of null blogger.js:12

    don't know what the slider is or where the map is supposed to go... can't find the code you posted in the source for that page...

  8. #8
    Join Date
    Apr 2013
    Posts
    8
    if you click work and then home it should work.. ill explain what i mean..

    1. Home page shows with slider at the top
    2. click on work, work page loads fine
    3. click back on to home
    4. home page loads back up but slider stay for a couple of seconds or click the arrow buttons and it disappears..

    my slider.js file is in my main index page with the div i want to inject the external pages to.

    This is my general.js where i load the statements.

    $(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;

    $('#content').load('page/index.php', function() {

    // Jquery Gets called after the page has loaded....

    $('#slider-id').liquidSlider({
    autoSlide:true,
    autoSlideInterval: 7000,
    autoHeight:false,
    dynamicTabs: false,

    });

    $.ajax({
    type: "GET",
    url: "https://api.twitter.com/1/statuses/user_timeline/AllyCallow.json?callback=twitterCallback2&count=1",
    dataType: "script"
    });



    // Click Links

    $('#content').on('click', 'nav ul li a', function() {

    var page = $(this).attr('href');
    // Script to fade and show pages

    $('#content').hide().load('page/' + page + '.php').fadeIn('normal', function() {

    // execute callbacks
    $.ajax({
    type: "GET",
    url: "https://api.twitter.com/1/statuses/user_timeline/AllyCallow.json?callback=twitterCallback2&count=1",
    dataType: "script"
    });

    $.ajax({
    url: "page/index.php",

    success: function( data ) {

    // Execute slide here after content has loaded;
    $('#slider-id').liquidSlider({
    autoSlide:true,
    autoSlideInterval: 7000,
    autoHeight:false,
    dynamicTabs: false,

    });
    }
    });




    });



    return false;
    });
    });
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles