Javascript API's

vision · 02-28-2012, 12:39 PM

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>

Philip M · 02-28-2012, 03:47 PM

You must not include any HTML tags <script type = "text/javascript"> </script> in your external Javascript file. Is that the problem?

vision · 02-28-2012, 04:38 PM

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);

rnd me · 02-28-2012, 05:03 PM

is your script tag at the bottom of your <body> tag? (it should be)

vision · 02-28-2012, 06:23 PM

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.

rnd me · 02-28-2012, 08:13 PM

Quote:

Originally Posted by vision

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.

vision · 02-28-2012, 09:16 PM

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>

blaze4218 · 02-29-2012, 02:34 AM

Quote:

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']});

vision · 02-29-2012, 11:22 AM

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.

vision · 03-02-2012, 11:09 AM

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.

devnull69 · 03-02-2012, 11:26 AM

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.

vision · 03-02-2012, 01:32 PM

what do you mean by a test URL?

vision · 03-02-2012, 01:41 PM

I have been trying a million combinations and I have finally got this to work. Thanks for all of the help given.