HELLO

1) Please download Class 18 Starter Code

2) Move the following into your class-work directory:

light-box-example

raindrops-example

google-maps-example

3) Solutions to cash-register and citi-pix included

Class #18

11/19/2018

jQuery Plugins + Google Maps

Announcements

• Final Projects:

⇒ Due in 9 days!

• No Class:

⇒ Wednesday, 11/21

Agenda

jQuery Plugins

Google Maps API

Arrays

Array Iteration

• Final Project Work

Warm Up

Warm Up

1) Find a partner

2) Ask your partner what their final project is

3) Inquire if your partner has encountered challenges

4) Commiserate

Cash Register Review

jQuery Plugins

jQuery Plugins

• Plugins are pre-written pieces of JavaScript

• Built to solve a particular issue:

⇒ Fullscreen video player

⇒ Image carousel

• Easy to install - add plugin's script tag below jQuery*:


  <script src="jquery.js"></script>
  <script src="my-super-plugin.js"></script>

jQuery Plugins: What to look for?

• There are 1000's of plugins; be judicious:

⇒ Recently updated

⇒ Well-documented

⇒ The more contributors the better

⇒ Open source

⇒ Hosted on GitHub

jQuery Plugins: Tips for using

1) Read the documentation

2) Seriously, read the documentation

3) Look for, and copy, examples

4) Start simple, then add complexity

5) Search for tutorials/examples if you get stuck

6) Open a GitHub issue if you think you found a bug

Lightbox Plugin

1) Open light-box-example in Sublime Text

2) Your goal: get Lightbox working!

3) Read the Lightbox Documentation

4) Note that all the required assets are downloaded

Raindrops.js

1) Open raindrops-example

2) Visit http://daniellaharel.com/raindrops/

3) Find a partner

4) Successfully implement raindrops.js

5) Note: you will have to download the script

5 minute break

Google Maps API

What is an API?

• API ⇒ Application Programming Interface

• Instructions for interacting with a piece of software

• Middleman: allows different pieces of software to talk

Let's Build a Map

Google Maps JavaScript API V3 Documentation

• Open google-maps-example in Sublime Text

Let's Build a Map

1) Obtain API Key

1.5) As of July 2018: Store a credit card...

2) Add starter HTML and CSS

3) Enable map using JS

4) ???

5) Profit

Google Maps: Changing the center

• Google Maps require:

center

zoom

• Challenge: change the center to NYC

⇒ Hint: look up NYC's coordinates!

⇒ 40.7127 N, 74.0059 W

Google Maps: Adding Markers

• Markers require:

position: {lat: y, lng: x}

map

• Challenge: use the following to add a marker at NYC


  var marker = new google.maps.Marker({
    position: {lat: y, lng: x},
    map: map,
    title: 'New York, NY'
  });

Google Maps: Multiple Markers

• Easiest way to add multiple markers:


  var marker1 = new google.maps.Marker({
    position: {lat: 40, lng: 50},
    map: map,
  });

  var marker2 = new google.maps.Marker({
    position: {lat: 45, lng: 45},
    map: map,
  });

  var marker3 = new google.maps.Marker({
    position: {lat: 25, lng: 75},
    map: map,
  });

  ...

• Is this efficient? Say I want to add 100 markers? 1,000?

Arrays

Arrays

• Arrays are a list-like data structure of comma-separated values

• Useful for storing a sequence of related data

• Declare arrays using square brackets: [ ]


  var friends = ['Moe', 'Larry', 'Curly']

Element - an item inside the array

Index - numerical location of each element in the array

⇒ Starts at position 0 - aka "0-indexed"

Arrays

• JS provides multiple methods for array creation:

⇒ The new keyword


  var drinks = new Array('beer', 'coffee', 'water');

⇒ Using the array literal


  var drinks = ['beer', 'coffee', 'water'];

• While similar, there are crucial differences

• Use the array literal for now

Arrays

• Use [index] to retrieve values from an array

• Remember that arrays are 0-indexed


  var drinks = ['beer', 'coffee', 'water'];

  drinks[0]
  // 'beer'

  drinks [0+1]
  // 'coffee'

  var x = drinks.length - 1
  drinks[x]
  // 'water'

  drinks[4]
  // undefined

Array Iteration

• Consider an array of names:


  var boroughs = ['manhattan', 'the bronx', 'queens', 'brooklyn', 'staten island']

• How would we console.log all the names in this array?


  console.log(boroughs[0])
  console.log(boroughs[1])
  console.log(boroughs[2])
  console.log(boroughs[3])
  console.log(boroughs[4])

• Is this efficient/scalable?

Array Iteration

Array Iteration

• Iteration: process of running the same function for every element in an array


  var boroughs = ['manhattan', 'the bronx', 'queens', 'brooklyn', 'staten island']

  boroughs.forEach(logBorough)

  function logBorough(borough) {
    console.log(borough)
  }

  // 'manhattan'
  // 'the bronx'
  // 'queens'
  // 'brooklyn'
  // 'staten island'

Array Iteration

• Apply array iteration with Google Maps Markers:

1) Create an array of location objects

⇒ Each should contain lat, lng, and title

2) Apply the forEach method to the array

3) Write a function that applies the marker to the map

Array Iteration

• Create an array of location objects containing lat, lng, and title:


  var locations = [
    {
      lat: 40.7484444,
      lng: -73.9878441,
      title: 'Empire State Building',
    },
    {
      lat: 40.7516248,
      lng: -73.9776907,
      title: 'Chrysler Building',
    },
    {
      lat: 40.7339877,
      lng: -73.980817,
      title: 'Flatiron Building',
    },
  ]

Array Iteration

• Apply the forEach method to the array


  locations.forEach(processLocation)

  function processLocation(location) {
    console.log(location)
  }

• Use console.log to test that code is working

Array Iteration

• Update processLocation to render the markers


  function processLocation(location) {
    var marker = new google.maps.Marker({
      position: {
        lat: location.lat,
        lng: location.lng,
      },
      title: location.title,
      map: map,
    })
  }

On Deck: #19 - Final Project Lab

• In-Class Final Project Work

Exit Tickets!