7.6 Example: Geonotes 199

To be able to test the application right away, you can use the demo data. These
entries are partly made up and partly actual entries recorded by the author while
developing the application.

7.6.2 Important Code Fragments

The HTML code for the application offers several div container elements, which
will later house the messages (id='items') and the map (id='map'). As mentioned
previously, the textarea element contains the new placeholder attribute, which
can make applications much more user friendly. The relevant onclick event lis-
tener is directly assigned to the three button elements:

Geonotes

The JavaScript code is much more interesting than the few lines of HTML code.
It defines an auxiliary function and three global variants:

function $(id) { return document.getElementById(id); }
var map;
var my_pos;
var diaryItem = { id: 0, pos: 0, ts: 0, msg: ‘’ }

You have already encountered the function $ in section 7.2, A First Experiment:
Geolocation in the Browser. It saves you a lot of typing effort here, too, and makes
the code easier to read. The variable map serves as a reference to the HTML area,
which will accommodate the Google Maps representation. my_pos is required for
calculating the distance and contains the current location from which the script
is called. diaryItem represents the structure of the individual entries. Each diary
entry is assigned an ID (id), information on the current position (pos), a time-
stamp (ts) , and the message entered into the text field (msg).