Feedback Form

Give feedback on:

11A, 11B (ideation day)
12A, 12B (uploading files, useful gems, GitHub workflow)

Embedding Google Maps

In order to embed a Google Map onto your site, you have to use some Javascript. The Javascript code will work alongside your Rails code to display data from your Rails app.

So, before we jump into Google Maps, let's review some Javascript.

What is Javascript?

Javascript is a client-side (vs server-side), scripted programming language
Javascript is generally used to write code for web browsers to perform animations, interactions, and so on
Javascript is powerful, but relatively simple to use

Client-Server-Javascript

Use the Developer Console

to test out javascript

DevConsole

Declaring variables

> var x = "Hello";
  undefined
> x
  "Hello"

Declaring functions

> function shout(msg) { alert(msg); }
  undefined
> shout('Hey');
// a browser popup alert is shown

Printing to console

> console.log('hey');
  hey
  undefined

Passing functions as arguments

> function get(url, data, onSuccess) { onSuccess(); }
  undefined
> get('www.place.com', {"q": "test"}, function() { alert('hey'); });
  // popup alert with 'hey' is shown

Javascript Resources

Javascript & The Web

Since Javascript is primarily used in browsers, most of the usage is geared toward modifying content in web pages. This usually means hiding/showing elements on the page, animating elements, or loading new content into the page via a Javascript request.

The DOM

The Document Object Model is a tree of all of your HTML elements. Think of it as a tree mapping of your entire HTML document.

HTML

<html>
<head>
  <title></title>
</head>
<body>
  <div class="parent">
    <p class="children">
      <a href="/" class="grandchild"></a>
    </p>
    <p class="children"></p>
  </div>
</body>

The Dom tree

The DOM Tree

Another way to visualize the dom

html
  |-head
    |- title
  |-body
    |-div.parent
      |-p.children
        |- a.grandchild
      |-p.children

jQuery

jQuery is a set of javascript helper tools and functions, designed to help you work with the DOM
jQuery makes doing things like finding elements on the page, modifying them and animating them very simple

Playing with jQuery

$('#projects'); // selects all elements with id='projects'
$('.item'); // selects all elements with class='item'
$('#projects').html('No projects found.'); // replaces the inner HTML
$('#message').show('fast'); // animates showing element
$('#menu').slideDown(); // animates down the element

jQuery Resources

Instructor Demo

Let's integrate a Google Maps view into our Twitter app to show a world view of all the locations of tweets.

We can try this gem: https://github.com/apneadiving/Google-Maps-for-Rails

Ramadan Mubarak!

Exercises

iexperience.github.io/year02/sA/exercises/13B.html

Displaying Google Maps

With Javascript