5 Replies - 986 Views - Last Post: 11 April 2013 - 09:47 AM

#1 bigallyo88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-April 13

Google Map .load problem

Posted 10 April 2013 - 05:26 AM

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...


$('#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;
                        });
            });
  });



Is This A Good Question/Topic? 0
  • +

Replies To: Google Map .load problem

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 405
  • View blog
  • Posts: 1,722
  • Joined: 30-April 10

Re: Google Map .load problem

Posted 10 April 2013 - 05:22 PM

View Postbigallyo88, on 10 April 2013 - 12:26 PM, said:

script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";



This gave me this error:
alert("The Google Maps API server rejected your request. The \x22sensor\x22 parameter specified in the request must be set to either \x22true\x22 or \x22false\x22.")


Yours is not set yet, I have read that it is best to set to true.

Does that help any?

This post has been edited by laytonsdad: 10 April 2013 - 05:31 PM

Was This Post Helpful? 0
  • +
  • -

#3 bigallyo88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-April 13

Re: Google Map .load problem

Posted 11 April 2013 - 03:08 AM

Hello..

thanks for the reply ive put the api key and i have set it to true still no luck... im i sending the javascript right through the jquery load function.. been reading loads of stuff on the web and still cant get a soultion..

wanna send the map through the js file and input into a external page which loads into a div on the main index page..

Hello..

thanks for the reply ive put the api key and i have set it to true still no luck... im i sending the javascript right through the jquery load function.. been reading loads of stuff on the web and still cant get a soultion..

wanna send the map through the js file and input into a external page which loads into a div on the main index page..
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,587
  • Joined: 12-December 12

Re: Google Map .load problem

Posted 11 April 2013 - 04:04 AM

Do you have errors in your browser's console? If you don't know what this is, refer to the links in my signature.

In particular, your call:

window.onload = loadScript;

is nested within a click event and other functions. Take it completely out of these. But as you are using jQuery, why are you then using the (vanilla JS) onload event?

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

Is 'nav' a tag-name? Or is it an id (#nav)? Put an alert in this click event to test if it runs at all. [I know nav is an HTML5 tag, but just checking for possible issues.]

This post has been edited by andrewsw: 11 April 2013 - 04:06 AM

Was This Post Helpful? 0
  • +
  • -

#5 bigallyo88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 10-April 13

Re: Google Map .load problem

Posted 11 April 2013 - 04:43 AM

View Postandrewsw, on 11 April 2013 - 04:04 AM, said:

Do you have errors in your browser's console? If you don't know what this is, refer to the links in my signature.

In particular, your call:

window.onload = loadScript;

is nested within a click event and other functions. Take it completely out of these. But as you are using jQuery, why are you then using the (vanilla JS) onload event?

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

Is 'nav' a tag-name? Or is it an id (#nav)? Put an alert in this click event to test if it runs at all. [I know nav is an HTML5 tag, but just checking for possible issues.]


thanks for the reply.. i nest it with in the click event beacuse it get injected with the external pages into a div on the main index page.. really struggling..

not sure what vanillia js is.. used the .on function as this seem to work when clicking on the navigation links and inject the correct page into the main index div..
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 405
  • View blog
  • Posts: 1,722
  • Joined: 30-April 10

Re: Google Map .load problem

Posted 11 April 2013 - 09:47 AM

Also, you have an extra curly brace and parenthesis at the end of your code, and your var map options is missing a semicolon.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1