clicking on waypoints shows the cities where we start now...

mcginty · May 9, 2012 · f3536c9 · f3536c9
1 parent befa055
commit f3536c9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/static/js/script.coffee b/static/js/script.coffee
@@ -85,21 +85,27 @@ $(document).ready ->
   current = null
 
   setTimeout (->
-    new google.maps.Marker
+    title = '<div id="content">Urbana, IL</div>'
+    marker = new google.maps.Marker
       map:map
       animation:google.maps.Animation.DROP
       position:home
-      icon:'http://www.google.com/mapfiles/marker_black.png'
-      title:"Urbana, IL"
+      icon:"http://www.google.com/mapfiles/marker_black.png"
+      title:title
+
+    google.maps.event.addListener marker, 'click', -> (new google.maps.InfoWindow content:title).open(map,marker)
     ), 500
 
   setTimeout (->
-    new google.maps.Marker
+    title = '<div id="content">Santa Monica, CA</div>'
+    marker = new google.maps.Marker
       map:map
       animation:google.maps.Animation.DROP
       position:hulu
-      icon:'http://www.google.com/mapfiles/marker_black.png'
-      title:"Santa Monica, CA"
+      icon:"http://www.google.com/mapfiles/marker_black.png"
+      title:title
+
+    google.maps.event.addListener marker, 'click', -> (new google.maps.InfoWindow content:title).open(map,marker)
     ), 1000
   polyOptions =
     strokeColor: "#CC2239"
@@ -113,7 +119,6 @@ $(document).ready ->
     socket.emit "message", "Message Sent on " + new Date()
 
   socket.on "location_backfill", (pts) ->
-    #console.log("Received encoded backfill polyline: #{pts.encodedPoints}")
     path = google.maps.geometry.encoding.decodePath pts.encodedPoints
     poly.setPath path
     current = new google.maps.Marker

diff --git a/static/js/script.js b/static/js/script.js
@@ -116,21 +116,35 @@
     hulu = new google.maps.LatLng(34.031344, -118.456717);
     current = null;
     setTimeout((function() {
-      return new google.maps.Marker({
+      var marker, title;
+      title = '<div id="content">Urbana, IL</div>';
+      marker = new google.maps.Marker({
         map: map,
         animation: google.maps.Animation.DROP,
         position: home,
-        icon: 'http://www.google.com/mapfiles/marker_black.png',
-        title: "Urbana, IL"
+        icon: "http://www.google.com/mapfiles/marker_black.png",
+        title: title
+      });
+      return google.maps.event.addListener(marker, 'click', function() {
+        return (new google.maps.InfoWindow({
+          content: title
+        })).open(map, marker);
       });
     }), 500);
     setTimeout((function() {
-      return new google.maps.Marker({
+      var marker, title;
+      title = '<div id="content">Santa Monica, CA</div>';
+      marker = new google.maps.Marker({
         map: map,
         animation: google.maps.Animation.DROP,
         position: hulu,
-        icon: 'http://www.google.com/mapfiles/marker_black.png',
-        title: "Santa Monica, CA"
+        icon: "http://www.google.com/mapfiles/marker_black.png",
+        title: title
+      });
+      return google.maps.event.addListener(marker, 'click', function() {
+        return (new google.maps.InfoWindow({
+          content: title
+        })).open(map, marker);
       });
     }), 1000);
     polyOptions = {

diff --git a/static/js/script.min.js b/static/js/script.min.js
diff --git a/views/layout.jade b/views/layout.jade
@@ -28,6 +28,10 @@ html
         font: 0.8em Helvetica, sans-serif;
         display: inline-block;
       }
+      #content {
+        margin: 20px;
+        font: 1.2em Helvetica, sans-serif;
+      }
   body
     block content