SPATIALLY ENABLED WEB APPLICATIONS in Font

Draw Data Matrix ECC200 in Font SPATIALLY ENABLED WEB APPLICATIONS

This included file (functions.js) is where all of your JavaScript-based Ajax functionality is located, as well as where the Google map code is contained. We will analyze this file in more detail next:

<script src="functions.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Video Games Jones-ing Helper</title> </head>

Using the onload event, you initialize your application. As you will see later when you look at functions.js, you pass the ID of the div that holds the Google map, and the ID of the div that holds your status message:

Every application that uses Google Maps must have an HTML element (such as a div) in which the map can be loaded. You are free to style it however you want (Google maps will display based on the width and height attributes, which you specify in your style sheet), but this is the element the map will attempt to load into:

Next, you have your div to hold application status messages. You first check whether a message has been set via URL, and display that. If it hasn t been set, you output an empty div, and then hide it via CSS. This will be used later by JavaScript, which will populate the div and then make it visible again:

< php if (strlen($message) > 0) { > <div id="messages"> < php echo htmlentities($message) > </div> < php } else { > <div id="messages" style="display: none"></div> < php } >

Last, you display the form used to add new locations. You use the onsubmit event so that you can use Ajax to process the form, but also allow it to fall back to use the process_form.php script directly if JavaScript isn t enabled:

<h3>Add a New Location:</h3> <form method="post" action="process_form.php" onsubmit="submitForm(this); return false;"> <table> <tr> <td>Name:</td> <td><input type="text" name="locname" maxlength="150" /></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" maxlength="150" /></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" maxlength="150" /></td> </tr> <tr> <td>Province:</td> <td><input type="text" name="province" maxlength="150" /></td> </tr> <tr> <td>Postal:</td> <td><input type="text" name="postal" maxlength="150" /></td> </tr> <tr> <td>Latitude:</td> <td><input type="text" name="latitude" maxlength="150" /></td> </tr> <tr> <td>Longitude:</td> <td><input type="text" name="longitude" maxlength="150" /></td> </tr> </table> <p> <input type="submit" value="Add Location" /> </p> </form> </div> </div> </body> </html>

All right, so here is your functions.js file; this is where all of the Google Maps functionality and Ajax-based concepts are happening. Let s have a closer look. You first define mapContainer and msgContainer, which will hold the divs you created to hold your map and status message, respectively. You set these in the init() method. Next, you set the default values for your map: the default latitude and longitude and the zoom level. In this case, your map will automatically center on Calgary. Next, you set the URL from which you fetch the locations. Although this is a PHP file, it will return XML data, which you can then plot on your map. Finally, you have two small utility functions. The first is used to trim a value, which works the same as PHP s trim function (removing whitespace from the beginning and end of a string). You use this in your basic form validation. The second is used to write a message to your status message div.

//functions.js // div to hold the map var mapContainer = null; // div to hold messages var msgContainer = null; // coords for Calgary var mapLng = -114.06; var mapLat = 51.05; var mapZoom = 7; // locations xml file var locationsXml = 'locations.php'; function trim(str) { return str.replace(/^(\s+) (\S*)(\s+) $/, '$2'); } function showMessage(msg) { if (msg.length == 0) msgContainer.style.display = 'none'; else { msgContainer.innerHTML = msg; msgContainer.style.display = 'block'; } }