Clicking marker img pans to course map marker

Clicking on a marker image above the map now pans the map to the appropriate
course's marker. Image markup has the courseMarkerImage class.
coursesMashUp listens for hover and click.

diff --git a/libjs/coursesMashUp.js b/libjs/coursesMashUp.js
index d93f835..de7517b 100644 (file)
--- a/libjs/coursesMashUp.js
+++ b/libjs/coursesMashUp.js
@@ -32,8 +32,9 @@ var Map = {
         /                        + '</div>'
         */
         var markers = [
+        //Dunmaglas
         {
-                'title' : 'Dunmaglas',
+                'title' : 'Dunmaglas Golf Course',
                 'lat' : 45.292304,
                 'long' : -85.160198,
                 'func' : this.dunmaglas,
@@ -43,9 +44,9 @@ var Map = {
                         '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=9031+Boyne+City+Rd,+Charlevoix,+MI+49720&sll=45.417025,-84.267797&sspn=0.007441,0.014119&ie=UTF8&ll=45.292928,-85.160265&spn=0.007457,0.014119&z=16&iwloc=addr">Get Directions</a>' +
                         '</div>'
         },
+        //Belvedere (Hidden River)
         {
-            // Belvedere Golf Club == Hidden River
-                'title' : 'Belvedere Golf',
+                'title' : 'Belvedere Golf Club',
                 'lat' : 45.295177,
                 'long' : -85.26412,
                 'func' : google.maps.Map.hiddenRiver,
@@ -55,6 +56,7 @@ var Map = {
                         + '<a target="_blank" href="http://g.co/maps/qyp99">Get Directions</a>'
                         + '</div>'
         },
+        //Black Lake
         {
                 'title' : 'Black Lake Golf Club',
                 'lat' : 45.32504,
@@ -66,6 +68,7 @@ var Map = {
                         + '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=2800+Maxon+Road,+Onaway,+MI+49765&sll=45.508332,-84.758642&sspn=0.007429,0.014119&ie=UTF8&ll=45.417025,-84.267797&spn=0.007441,0.014119&z=16&iwloc=addr">Get Directions</a>'
                         + '</div>'
         },
+        //Little Traverse
         {
                 'title' : 'Little Traverse Bay Golf Club',
                 'lat' : 45.442706,
@@ -77,6 +80,7 @@ var Map = {
                         + '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=995+Hideaway+Valley+Dr,+Harbor+Springs,+MI+49740&sll=45.292928,-85.160265&sspn=0.007457,0.014119&ie=UTF8&ll=45.443256,-84.895585&spn=0.007437,0.014119&z=16&iwloc=addr">Get Directions</a>'
                         + '</div>'
         },
+        //Hamlet Village
         {
                 'title' : 'Hamlet Village',
                 'lat' : 45.471746,
@@ -88,6 +92,7 @@ var Map = {
                         + '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=5484+Pleasantview+Rd,+Harbor+Springs,+MI+49740&sll=45.443256,-84.895585&sspn=0.007437,0.014119&ie=UTF8&ll=45.472471,-84.914682&spn=0.007433,0.014119&z=16&iwloc=addr">Get Directions</a>'
                         + '</div>'
         },
+        //Trout Creek
         {
                 'title' : 'Trout Creek',
                 'lat' : 45.482054,
@@ -122,6 +127,19 @@ var Map = {
             });
             infoWindows.push(infoWindow);
         }
+        $(".courseMarkerImage").hover(function() {
+            $(this).css('cursor','pointer');
+        }, function() {
+            $(this).css('cursor','auto');
+        });
+        $(".courseMarkerImage").click(function(){
+            for (var i=0; i < markers.length; i++) {
+                if ($(this).attr("alt") === markers[i].title) {
+                    var courseLocation = new google.maps.LatLng(markers[i].lat, markers[i].long);
+                    map.panTo(courseLocation);
+                } 
+            }
+        });
         
     },
     

diff --git a/static/11.phtml b/static/11.phtml
index d1f524c..d1cc60d 100644 (file)
--- a/static/11.phtml
+++ b/static/11.phtml
@@ -1,22 +1,25 @@
 <script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>
 <script id="helper" data-name="<?php echo MEDIA_BASE_URL; ?>" src="<?php echo MEDIA_BASE_URL; ?>libjs/coursesMashUp.js"></script>
-<script type="text/javascript" src="<?php echo MEDIA_BASE_URL; ?>libjs/coursesMashUp.js"></script>
+
+
 
 <?php
 $courses = array(
     'Dunmaglas Golf Course'        => 'dunmaglas.gif',
     'Belvedere Golf Club'          => 'hiddenriver.gif',
     'Trout Creek'                  => 'troutcreek.gif',
-    'Little Travese Bay Golf Club' => 'littletraverse.gif',
+    'Little Traverse Bay Golf Club' => 'littletraverse.gif',
     'Hamlet Village'               => 'hamletvillage.gif',
     'Black Lake Golf Club'         => 'blacklake.gif',
 );
 
+
+
 foreach ($courses as $k => $v) {
     $url       = BASE_URL;
     $markers[] = <<<_OUT
 <td>\n
-       <img src="{$url}assets/{$v}" alt="{$k}"/>\n
+       <img class="courseMarkerImage" src="{$url}assets/{$v}" alt="{$k}"/>\n
        <span class="courseName">{$k}</span>\n
         
 </td>