Google Maps API Tutorial

Data in JSON files

The Javascript to process JSON data is simpler and more efficient than that required to process XML or plain text files. On the downside: the JSON data format has a more complicated structure, so it's more difficult to create and maintain the data file or to write server-side code that will generate JSON files.

If your JSON file comes from a trusted source, then you can simply perform an eval command on the JSON data to convert the JSON text into a Javascript object. Treat JSON files obtained from a third party source with as much care as you would with third-part Javascript files. A JSON file can include calls to any accessible Javascript function.

Although JSON files parse very efficiently, their file size tends to be larger than XML, so they end up only being slightly faster than XML. Plain text files take longer to parse, but their file size can be much smaller so they take less time to fetch.

In my tests, with Firefox, JSON was 7% faster than XML overall, and plain text files were 2% faster than XML. The timings of my test with IE were so wildly variable that the results were meaningless.

Here's an example

You can see the JSON file that I used here

The code defines a function "process_it()" which processes the retrieved data.

The entire data file is passed to process_it() as a single string, which we can then parse with the eval command. This creates a Javascript Object that has the properties specified in the JSON file.

Unlike XML, JSON files can contain < and >.

There's no problem with MIME types either. The code should work whatever MIME type is served.

If your JSON file contains numeric data (e.g. {"lat":43.65654} rather than {"lat":"43.65654"}) then you won't need to use parseFloat() and parseInt() to convert the data.

Constructors

This example uses a JSON file that includes calls to new GLatLng()

You can see the JSON file that I used here

This might give you a clue about possible security issues with using eval to parse JSON data from an untrusted source.

Potential Pitfalls

1. Be aware that Javascript i/o is asynchronous, so that the browser can get on with doing other things like fetching images if the i/o request takes a while to complete.
   If you're used to programming languages that wait for i/o to complete, you might tend to put code that uses the data read from the file after the "GDownloadUrl()" statement. That would be wrong because code placed there would get executed immediately rather than waiting for the data to arrive. Any code that acts on the retrieved data should be placed inside the process_it() function.
    
   
2. If you're using an application or script to create your JSON file, watch out for the data types. If the numeric data is being served as strings, then you will need to use parseInt() and parseFloat() in your Javascript, just like you would do when using XML.

Back to Mike's Homepage
Up to the start of this tutorial