Add map to event show page

app/assets/javascripts/events.coffee

@@ -1,3 +1,16 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
+ready = ->
+  mapCanvas = document.getElementById('map-canvas')
+  data = mapCanvas.dataset
+  coords = new (google.maps.LatLng)(data.lat, data.long)
+  mapOptions = 
+    center: coords
+    zoom: 16
+    mapTypeId: google.maps.MapTypeId.ROADMAP
+  map = new (google.maps.Map)(mapCanvas, mapOptions)
+  marker = new (google.maps.Marker)(
+    position: coords
+    map: map)
+  return
+
+$(document).ready(ready)
+$(document).on('page:load', ready)

app/assets/stylesheets/events.scss

@@ -1,3 +1,8 @@
 // Place all the styles related to the Events controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+#map-canvas {
+  width: 500px;
+  height: 400px;
+}

app/helpers/application_helper.rb

@@ -1,2 +1,8 @@
 module ApplicationHelper
+  def map_for_coords(coords)
+    tag("div",
+      id: "map-canvas",
+      data: { lat: coords[0], long: coords[1] }
+    )
+  end
 end

app/models/event.rb

@@ -58,7 +58,7 @@ def format_speakers
 
   def format_people
     (self.candidates.map(&:person_name) + self.people.map(&:full_name)).uniq.join(', ')
-  end 
+  end
 
   def format_location
     v = self.venue
@@ -69,6 +69,14 @@ def format_location
     end
   end
 
+  def coords
+    if venue
+      [venue.latitude, venue.longitude]
+    else
+      []
+    end
+  end
+
   def add_candidate(candidate_id)
     candidate = Candidate.includes(:person).find(candidate_id)
     self.candidates << candidate if candidate

app/views/events/show.html.erb

@@ -4,11 +4,11 @@
 		<%= notice %>
 	</div>
 <% end %>
-
 <div class="row well bs-component col-lg-12">
   <div class="col-lg-8">
     <h1><%= @event.title %></h1>
     <h3><%= @event.format_location %></h3>
+    <%= map_for_coords(@event.coords) %>
     <ul class="col-lg-8 list-group">
     <% @event.event_days.each do |event_day| %>  
       <li class="list-group-item">

app/views/layouts/application.html.erb

@@ -13,6 +13,7 @@
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js"></script>
 	  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css"/>		
 	  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"/>
 	  <%= csrf_meta_tags %>