JavaScript Store Locator

This week will be mostly example-driven, so the slides are fairly short!

Transcript

1. JavaScript Store Locator IS1103 Lab - Friday 18th January 2013
2. What we’ll cover today Last week, you learned about variables, data types and some of the built-in string and math methods available in JavaScript. This week (and probably next week too), we’ll cover operators, object literals, arrays, functions, if statements and for loops. Rather than go through it using slides and simple examples, we’ll build a starting point for the store locator element of your project. We’ll be working with Google Maps again, this time via the Google Maps JavaScript API though.
3. The end result Map with markers Info Windows Zooming in/out List of stores Map reset 100% layout
4. Demo
5. 6 step development process • First, we’ll download and open an empty starting structure for the application • Next, we’ll get the map displaying • We’ll then add the markers • After the markers, we’ll build the navigation list • Almost there - next comes displaying the info windows • Finally, we’ll implement the Reset Map button
6. Download the basic structure Go to http://www.joelennon.ie/store-locator.zip to download the starting point for the application. Unzip this to your H: drive under your IS1103 folder. The app consists of four files: index.html HTML file (already completed for you) style.css CSS styles (already completed for you) stores.js Data file (already completed for you) app.js App file (started, but incomplete) Let’s talk through the contents of these files now.
7. Next week Next week, we’ll continue on and finish the store locator example. We’ll also talk about some of the core concepts behind it in more detail. We’ll discuss the DOM and event handling, and we’ll learn a little bit about scope and the order of execution in JavaScript applications. If you didn’t get all the code taken down, I’ll post a new starting point online for next week’s lab.