So I've got some scripts I've written which set up a Google map on my page. These scripts are in included in the <head> of my page, and use jQuery to build the map with markers generated from a list of addresses on the page.
However, I have some exact co-ordinate data for each address which the javascript requires to place the markers correctly. This isn't information I want to be visible on the screen to the user, so what's the "best practice" way to put that data into my document?
If the information should not be visible to the user, it should not stay in the document. The data can stay in a script region for example. However if for various reasons this is not possible, you could use a div with style="display:none" that will hide the information.
My first thought was a hidden input with a CSV or similar of the data. Since the data is not really secret, just not for display.
<input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />
Then access it with jquery
var myCoordsCSV = $("#coordinates").val();
Edit: A below answer mentions JSON which would be a better solution combined with using multiple hidden inputs as pointed out in another answer.
I would not reccomend using style to hide something, it will show up in browsers without (or with disabled) css suppor and look strange.
You could store it in a javascript variable or add a form with hidden values like this (inside an unused form to be sure it validates):
<form action="#" method="get" id="myHiddenValues">
<input type="text" name="hiddenval1" id="hiddenval1" value="1234"/>
<input type="text" name="hiddenval2" id="hiddenval2" value="5678"/>
</form>
wich you can read and update from javascript.
Gareth, you may want to take a look at JSON on http://www.json.org/
Apart from the benefit of compactness it has got strong server side support and should you decide in the future to load the co-ordinates dynamically using HTTPRequest it would be very easy to do so without having to amend the existing script much.
JSON — JavaScript Object Notation is effectively a native way of serializing JavaScript objects.
Some examples here: http://www.json.org/example.html
You can even store all of the address infromation in a JavaScript array of objects recorded in JSON and build the list on the screen dynamically. This will give you the ability to sort, filter and manipulate the addresses easilly in any way you need at "run time".
The alternative way would be to embrace each address with a tag (a simple div will do) and introduce a new attribute for the tag containing the coordinates:
<div id="addr1" coordinates="...">
17 Coldwell Drive<br />
Blue Mountain<br />
BA93 1PF<br />
United Kindom
</div>
then
var myCoordsCSV = $("addr1").coordinates;
You can combine the second approach with JSON (store coordinates object) if you wish or add two attributes for each coordinate or keep a comma delimited list etc.
The second approach also degrades nicely and is search bot friendly.
Since you already have Jquery why not just make an AJAX call to another page/script to get the coordinate data?
The data is always going to be visible to someone who wants to get to it. Trying to hide it will just slow down those who arn't adept at it. My suggestion is don't use XHR as that is slow for a lot of people and always adds time to the page load, something you should try to minimize. use an array.
var myArray = new Array();
myArray.push([1.000,1.000,"test1"]);
myArray.push([2.000,2.000,"test2"]);
myArray.push([3.000,3.000,"test3"]);
for(i=0;i<myArray.length;i++){
yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]);
}
sort of thing ya?
Keeping the data in Javascript or JSON is missing the point about unobtrusive Javascript. One of the key things about "unobtrusive" is degrading gracefully when Javascript isn't present - and ideally when CSS isn't present either. For this reason, you should put the data in the document, not in Javascript, so users can see it.
Furthermore, you should present it in a table or div structure that looks clean without any CSS. In this case, a table is probably the correct semantic structure to represent this kind of data. You might further style the table for those who have CSS but not Javascript. The Javascript can then easily parse the data and put it into the map, but if Javascript isn't supported, the data will still be shown.
A further benefit is that it will be easily scrapable by robots such as search engines and anyone who wants to write a third-party mashup. (You could see that's a downside if you don't want to share it, but if someone wants the data enough, they'll get it from the page anyway.) It will also be there in neat form for visually impaired users using screenreaders.
Now you don't want to make the table visible by default, so you'll have to hide it using CSS. But what if a user has CSS but not Javascript? Then you probably want to show the table...that's what degrading gracefully is about. So what you do is make the table visible in the CSS (ie don't explicitly hide it), and then run some Javascript to hide it on initialisation:
document.getElementById("geodata").style.display = "none";
or some library-specific equivalent, e.g.
$("geodata").hide()
The only problem is that if you run this in document.onload(), the table will be visible for a few seconds. So include it in a script tag just after you output the table. This is one situation where it's okay to include a script tag in the HTML. If you do that, then avoid using library-specific code as the library may not yet have loaded by the time your inline script is evaluated.
Now you have all cases covered: - JS and CSS - data presented nicely in the map - no JS, but CSS - data presented nicely the table - no JS and no CSS - data presented in a raw HTML table (the other case, JS and no CSS rarely arises, you could deal with it if you like but kind of pointless)
You Javascript code will also be clean because it's parsing a neatly constructed data structure. You can easily inspect the table during development to see if it has the right data and if the map reflects that data correctly.