Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript API's

    Hi,

    I am trying to add a google api onto my site. The problem I am having is that google provide the code to add the api inline, however, being the organised man I am I want to run all scripts like css from an external .js file. I have tried to do this with a number of scripts and failed each time. Could anyone suggest how I break this down?

    Thanks so much.


    <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geomap']});

    function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addRows(6);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    data.setValue(0, 0, 'Germany');
    data.setValue(0, 1, 200);
    data.setValue(1, 0, 'United States');
    data.setValue(1, 1, 300);
    data.setValue(2, 0, 'Brazil');
    data.setValue(2, 1, 400);
    data.setValue(3, 0, 'Canada');
    data.setValue(3, 1, 500);
    data.setValue(4, 0, 'France');
    data.setValue(4, 1, 600);
    data.setValue(5, 0, 'RU');
    data.setValue(5, 1, 700);

    var geomap = new google.visualization.GeoMap(
    document.getElementById('visualization'));
    geomap.draw(data, null);
    }


    google.setOnLoadCallback(drawVisualization);
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    You must not include any HTML tags <script type = "text/javascript"> </script> in your external Javascript file. Is that the problem?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The code above is the exact inline code from google but when I add just the javascript code below into a .js file nothing happens? I have added a basic html code below to show how I am using everything. I have tried with lots of different API's but I am breaking the page every time I add it into an external page.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Google Visualization</title>
    <script src="_js/script.js"></script>
    </head>
    <body >
    <div id="visualization" style="width: 800px; height: 400px;"></div>
    </body>
    </html>

    Javascript Code added exactly as below.

    google.load('visualization', '1', {packages: ['geomap']});

    function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addRows(6);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    data.setValue(0, 0, 'Germany');
    data.setValue(0, 1, 200);
    data.setValue(1, 0, 'United States');
    data.setValue(1, 1, 300);
    data.setValue(2, 0, 'Brazil');
    data.setValue(2, 1, 400);
    data.setValue(3, 0, 'Canada');
    data.setValue(3, 1, 500);
    data.setValue(4, 0, 'France');
    data.setValue(4, 1, 600);
    data.setValue(5, 0, 'RU');
    data.setValue(5, 1, 700);

    var geomap = new google.visualization.GeoMap(
    document.getElementById('visualization'));
    geomap.draw(data, null);
    }


    google.setOnLoadCallback(drawVisualization);

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,275
    Thanks
    10
    Thanked 581 Times in 562 Posts
    is your script tag at the bottom of your <body> tag? (it should be)
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thought all tags needed to be in the header even when linking to external sheets?

    The code in my last post shows my HTML page and my Script page.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,275
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by vision View Post
    I thought all tags needed to be in the header even when linking to external sheets?

    The code in my last post shows my HTML page and my Script page.
    no, <script> tags can go anywhere, and it's better UX to have external scripts at the bottom so that they don't prevent page rendering while the script is fetched.

    there's not enough code shown to make this work. it seems you are missing some code, probably a single file to be included on every page that uses the google map stuff.

    google.load() is not a standard JavaScript command, so you need to define it using the aforementioned script.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I see, that makes sense.

    Okay, got that bit but I am still have no idea how I take this script and put it externally? If someone could explain then I can see what has to be in place and then apply it to any inline code.

    I understand that API's work using external websites for their data and libraries but I can't see how you link to an external script webpage and then to an external site for the data?

    Here is the whole code from google:

    <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geomap']});

    function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addRows(6);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    data.setValue(0, 0, 'Germany');
    data.setValue(0, 1, 200);
    data.setValue(1, 0, 'United States');
    data.setValue(1, 1, 300);
    data.setValue(2, 0, 'Brazil');
    data.setValue(2, 1, 400);
    data.setValue(3, 0, 'Canada');
    data.setValue(3, 1, 500);
    data.setValue(4, 0, 'France');
    data.setValue(4, 1, 600);
    data.setValue(5, 0, 'RU');
    data.setValue(5, 1, 700);

    var geomap = new google.visualization.GeoMap(
    document.getElementById('visualization'));
    geomap.draw(data, null);
    }


    google.setOnLoadCallback(drawVisualization);
    </script>

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Okay, got that bit but I am still have no idea how I take this script and put it externally? If someone could explain then I can see what has to be in place and then apply it to any inline code.

    I understand that API's work using external websites for their data and libraries but I can't see how you link to an external script webpage and then to an external site for the data?
    I think that was what rnd me was telling you just that. You must include additional javascript that enables the google.load() method. I found <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    at https://developers.google.com/loader/
    along with detailed documentation on how to use it. I would assume you have the following in your HTML document
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Google Visualization</title>
    </head>
    <body >
    <div id="visualization" style="width: 800px; height: 400px;"></div>
    </body>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script src="_js/script.js"></script> 
    </html>
    and then you would create the file "script.js" in the "_js" directory. Open the file "script.js" and past the code
    Code:
     google.load('visualization', '1', {packages: ['geomap']});
    
    function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addRows(6);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    data.setValue(0, 0, 'Germany');
    data.setValue(0, 1, 200);
    data.setValue(1, 0, 'United States');
    data.setValue(1, 1, 300);
    data.setValue(2, 0, 'Brazil');
    data.setValue(2, 1, 400);
    data.setValue(3, 0, 'Canada');
    data.setValue(3, 1, 500);
    data.setValue(4, 0, 'France');
    data.setValue(4, 1, 600);
    data.setValue(5, 0, 'RU');
    data.setValue(5, 1, 700);
    
    var geomap = new google.visualization.GeoMap(
    document.getElementById('visualization'));
    geomap.draw(data, null);
    }
    
    
    google.setOnLoadCallback(drawVisualization);
    Save everything and load your HTML page...

    when you paste <script type="text/javascript" src="https://www.google.com/jsapi"></script> in your page you are loading all the extra javascript that makes the api work into your page. now the api is on your website, so all you have to do is call the available methods like so google.load('visualization', '1', {packages: ['geomap']});
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • Users who have thanked blaze4218 for this post:

    vision (03-02-2012)

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have tried that but nothing happens. I assume that the functions aren't being called using that HTML above? I have tried adding onload="visualisation()" in the body tag to call the function at the top of the script but again nothing is happening.

  • #10
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for all of the suggestions so far but I am yet to resolve this and it would be a great help if we could. thanks.

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    As soon as you don't give us a test URL ... you should start debugging. There are some neat tools out there (including some built-in developer tools for IE, Opera or Chrome) that will certainly help you in detecting issues with your page.

  • #12
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    what do you mean by a test URL?

  • #13
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have been trying a million combinations and I have finally got this to work. Thanks for all of the help given.


  •  

    Posting Permissions

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