Updated GoogleMap to v3

coursesMashUp.js entirely rewritten to work with v3 (might not be optimal but it works for now), static page 11.phtml now has a helper to send the media_base_url to the .js, setup.phtml was changed to use the new google api keys (which may not be necessary). Added old .pngs.

diff --git a/assets/blacklake.png b/assets/blacklake.png
new file mode 100644 (file)
index 0000000..0cfe38b
Binary files /dev/null and b/assets/blacklake.png differ

diff --git a/assets/dunmaglas.png b/assets/dunmaglas.png
new file mode 100644 (file)
index 0000000..745af03
Binary files /dev/null and b/assets/dunmaglas.png differ

diff --git a/assets/hamletvillage.png b/assets/hamletvillage.png
new file mode 100644 (file)
index 0000000..bf316ab
Binary files /dev/null and b/assets/hamletvillage.png differ

diff --git a/assets/hiddenriver.png b/assets/hiddenriver.png
new file mode 100644 (file)
index 0000000..45e8431
Binary files /dev/null and b/assets/hiddenriver.png differ

diff --git a/assets/littletraverse.png b/assets/littletraverse.png
new file mode 100644 (file)
index 0000000..6c27542
Binary files /dev/null and b/assets/littletraverse.png differ

diff --git a/assets/troutcreek.png b/assets/troutcreek.png
new file mode 100644 (file)
index 0000000..6e4179c
Binary files /dev/null and b/assets/troutcreek.png differ

diff --git a/libjs/coursesMashUp.js b/libjs/coursesMashUp.js
index c22519f..d93f835 100644 (file)
--- a/libjs/coursesMashUp.js
+++ b/libjs/coursesMashUp.js
@@ -1,163 +1,136 @@
 /*     ==============================  */
 //     Google Maps mashup for bigfore golf courses
 //
-//     Gaslight Media (c) 2008
-//     Author: Jamie Kahgee <jamie.kahgee@gmail.com>
+//     Gaslight Media (c) 2014
+//     Author: Laury Garcia van Rooijen <laury@gaslightmedia.com>
 /*     ==============================  */
-var GMaps =
-{
-       centerLat: 45.356005,
-       centerLong: -84.690857,
-       startZoom: 9,
 
-       init: function()
-       {
-               if (GBrowserIsCompatible())
-               {
-                       var map = new GMap2($('map'));
-                       var loc = new GLatLng(GMaps.centerLat, GMaps.centerLong);
-                       var marker;
-                       var base_url = $('mapsURL').value + 'assets/';
-                       map.addControl(new GSmallMapControl());
-                       map.addControl(new GMapTypeControl());
-                       map.setCenter(loc, GMaps.startZoom);
 
-                       var markers = [
-                               {
-                                       'lat' : 45.292304,
-                                       'long' : -85.160198,
-                                       'name' : 'Dunmaglas',
-                                       'func' : GMaps.dunmaglas,
-                                       'icon' : base_url + 'dunmaglas.png'
-                               },
-                               {
-                                       'lat' : 45.295177,
-                                       'long' : -85.26412,
-                                       'name' : 'Hidden River',
-                                       'func' : GMaps.hiddenRiver,
-                                       'icon' : base_url + 'hiddenriver.png'
-                               },
-                               {
-                                       'lat' : 45.32504,
-                                       'long' : -84.218519,
-                                       'name' : 'Black Lake Golf Club',
-                                       'func' : GMaps.blackLake,
-                                       'icon' : base_url + 'blacklake.png'
-                               },
-                               {
-                                       'lat' : 45.442706,
-                                       'long' : -84.896482,
-                                       'name' : 'Little Traverse Bay Golf Club',
-                                       'func' : GMaps.littleTraverse,
-                                       'icon' : base_url + 'littletraverse.png'
-                               },
-                               {
-                                       'lat' : 45.471746,
-                                       'long' : -84.914849,
-                                       'name' : 'Hamlet Village',
-                                       'func' : GMaps.hamletVillage,
-                                       'icon' : base_url + 'hamletvillage.png'
-                               },
-                               {
-                                       'lat' : 45.482054,
-                                       'long' : -84.914336,
-                                       'name' : 'Trout Creek',
-                                       'func' : GMaps.troutCreek,
-                                       'icon' : base_url + 'troutcreek.png'
-                               }
-                       ];
 
-                       markers.each(function(n) {
-                               loc = new GLatLng(n.lat, n.long);
-                               if (n.icon != '')
-                               {
-                                       var icon = new GIcon();
-                                       icon.image = n.icon;
-                                       icon.shadow = base_url + 'shadow-old.png';
-                                       icon.iconSize = new GSize(20, 34);
-                                       icon.iconAnchor = new GPoint(14, 25);
-                                       icon.infoWindowAnchor = new GPoint(14, 14);
-                                       marker = new GMarker(loc, icon);
-                               }
-                               else
-                               {
-                                       marker = new GMarker(loc);
-                               }
-                               map.addOverlay(marker);
-                               GEvent.addListener(marker, 'click', n['func']);
-                       });
-               }
-       },
-
-       denit: function()
-       {
-               GUnload();
-       },
-
-       dunmaglas: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Dunmaglas Golf Course');
-               var address = new Element('div', {'class': 'address'}).update('9031 Boyne City Rd<br>Charlevoix, MI 49720<br>(231) 547-4653');
-               var link = new Element('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'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       },
-
-       hiddenRiver: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Belvedere Golf Club');
-               var address = new Element('div', {'class': 'address'}).update('5731 Marion Center Rd<br>Charlevoix, MI 49720<br>(866) 547-2611');
-               var link = new Element('a', {target: '_blank', href: 'http://g.co/maps/qyp99'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       },
-
-       blackLake: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Black Lake Golf Club');
-               var address = new Element('div', {'class': 'address'}).update('2800 Maxon Rd<br>Onaway, MI 49765<br>(989) 733-4653');
-               var link = new Element('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'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       },
-
-       littleTraverse: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Little Traverse Bay Golf Club');
-               var address = new Element('div', {'class': 'address'}).update('995 Hideaway Valley Dr<br>Harbor Springs, MI 49740<br>(231) 526-6200');
-               var link = new Element('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'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       },
-
-       hamletVillage: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Hamlet Village');
-               var address = new Element('div', {'class': 'address'}).update('5484 Pleasantview Rd<br>Harbor Springs, MI 49740<br>(231) 526-2641');
-               var link = new Element('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'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       },
-
-       troutCreek: function(event)
-       {
-               var title = new Element('h2', {'class': 'title'}).update('Trout Creek');
-               var address = new Element('div', {'class': 'address'}).update('4749 S Pleasantview Rd<br>Harbor Springs, MI 49740<br>(231) 526-2148');
-               var link = new Element('a', {target: '_blank', href: 'http://maps.google.com/maps?f=q&hl=en&geocode=&q=4749+S+Pleasantview+Rd,+Harbor+Springs,+MI+49740&sll=45.472471,-84.914682&sspn=0.007433,0.014119&ie=UTF8&ll=45.483018,-84.91451&spn=0.007432,0.014119&z=16&iwloc=addr'}).update('Get Directions');
-
-               var wrapper = new Element('div').insert({bottom: title}).insert({bottom: address}).insert({bottom: link});
-               this.openInfoWindowHtml(wrapper);
-       }
+var Map = {
+    
+    initialize: function() {
+        var centerLat = 45.356005;
+        var centerLong = -84.690857;
+        var startZoom = 9;
+                
+        var myOptions = {
+            zoom: startZoom,
+            center: new google.maps.LatLng(centerLat, centerLong),
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        var map = new google.maps.Map(document.getElementById("map"),
+                                        myOptions);
+        
+            
+        var base_url = document.getElementById("helper").getAttribute("data-name") + 'assets/';
+        
+        // For future additions, a template for info
+        /*'<div style="height:120px; width:200px">'
+        /                        + '<h2 class="title"></h2>' + '<div class="address"></div>'
+        /                        + '<a target="_blank" href="">Get Directions</a>'
+        /                        + '</div>'
+        */
+        var markers = [
+        {
+                'title' : 'Dunmaglas',
+                'lat' : 45.292304,
+                'long' : -85.160198,
+                'func' : this.dunmaglas,
+                'icon' : base_url + 'dunmaglas.png',
+                'info' : '<div style="height:120px">' +
+                        '<h2 class="title">Dunmaglas Golf Course </h2>' + '<div class="address">9031 Boyne City Rd<br>Charlevoix,MI <br>(231) 548-4653 </div>'  +
+                        '<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 Golf Club == Hidden River
+                'title' : 'Belvedere Golf',
+                'lat' : 45.295177,
+                'long' : -85.26412,
+                'func' : google.maps.Map.hiddenRiver,
+                'icon' : base_url + 'hiddenriver.png',
+                'info' : '<div style="height:120px; width:180px">'
+                        + '<h2 class="title">Belvedere Golf Club</h2>' + '<div class="address">5731 Marion Center Rd<br>Charlevoix, MI 49720<br>(866) 547-2611</div>'
+                        + '<a target="_blank" href="http://g.co/maps/qyp99">Get Directions</a>'
+                        + '</div>'
+        },
+        {
+                'title' : 'Black Lake Golf Club',
+                'lat' : 45.32504,
+                'long' : -84.218519,
+                'func' : google.maps.Map.blackLake,
+                'icon' : base_url + 'blacklake.png',
+                'info' : '<div style="height:120px; width:190px">'
+                        + '<h2 class="title">Black Lake Golf Club</h2>' + '<div class="address">2800 Maxon Rd<br>Onaway, MI 49765<br>(989) 733-4653</div>'
+                        + '<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>'
+        },
+        {
+                'title' : 'Little Traverse Bay Golf Club',
+                'lat' : 45.442706,
+                'long' : -84.896482,
+                'func' : google.maps.Map.littleTraverse,
+                'icon' : base_url + 'littletraverse.png',
+                'info' : '<div style="height:150px; width:180px">'
+                        + '<h2 class="title">Little Traverse Bay Golf Club</h2>' + '<div class="address">995 Hideaway Valley Dr<br>Harbor Springs, MI 49740<br>(231) 526-6200</div>'
+                        + '<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>'
+        },
+        {
+                'title' : 'Hamlet Village',
+                'lat' : 45.471746,
+                'long' : -84.914849,
+                'func' : google.maps.Map.hamletVillage,
+                'icon' : base_url + 'hamletvillage.png',
+                'info' : '<div style="height:120px; width:160px">'
+                        + '<h2 class="title">Hamlet Village</h2>' + '<div class="address">5484 Pleasantview Rd<br>Harbor Springs, MI 49740<br>(231) 526-2641</div>'
+                        + '<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>'
+        },
+        {
+                'title' : 'Trout Creek',
+                'lat' : 45.482054,
+                'long' : -84.914336,
+                'func' : google.maps.Map.troutCreek,
+                'icon' : base_url + 'troutcreek.png',
+                'info' : '<div style="height:120px; width:160px">'
+                        + '<h2 class="title">Trout Creek</h2>' + '<div class="address">4749 S Pleasantview Rd<br>Harbor Springs, MI 49740<br>(231) 526-2148</div>'
+                        + '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=4749+S+Pleasantview+Rd,+Harbor+Springs,+MI+49740&sll=45.472471,-84.914682&sspn=0.007433,0.014119&ie=UTF8&ll=45.483018,-84.91451&spn=0.007432,0.014119&z=16&iwloc=addr">Get Directions</a>'
+                        + '</div>'
+        }
+        ];
+        infoWindows = [];
+        var prev_infowindow = false;
+        for (var i =0; i < markers.length; i++) {
+            var course = markers[i];
+            var marker = new google.maps.Marker({
+                position: new google.maps.LatLng(course.lat, course.long),
+                map: map,
+                title: course.title,
+                icon: course.icon,
+                infoWindowIndex: i
+            });
+            var infoWindow = new google.maps.InfoWindow({
+                content: course.info
+            });
+            google.maps.event.addListener(marker, 'click', function(event) {
+                if (prev_infowindow) { prev_infowindow.close(); }
+                prev_infowindow = infoWindows[this.infoWindowIndex];
+                map.panTo(event.latLng);
+                infoWindows[this.infoWindowIndex].open(map, this);
+            });
+            infoWindows.push(infoWindow);
+        }
+        
+    },
+    
+    denit: function()
+    {
+            GUnload();
+    }
 };
 
-//Event.observe(window, 'load', GMaps.init);
-//Event.observe(window, 'unload', GMaps.denit);
-
 $(function(){
-   GMaps.init;
+   Map.initialize();
 });
\ No newline at end of file

diff --git a/setup.phtml b/setup.phtml
index 7d80027..3f2f42b 100644 (file)
--- a/setup.phtml
+++ b/setup.phtml
@@ -76,9 +76,11 @@ define('BASE', "$BASE_PATH/");
 //  GLM App repository config {{{
 switch ($_ENV['GLM_HOST_ID']) {
 case 'PRODUCTION' : // {{{
+    define("GMAP_KEY","ABQIAAAAFEik3hTZkksVQYtPm0OFmRTGJV_A7Xp3Z5OC80hvlIkpEKM4hhRT6iRTx6_IDFHr_rVZnSj9xsp1wA");
     $glmAppBase = '/var/www/server/app.gaslightmedia.com/';
     break; //  }}}
 case 'DEVELOPMENT' : //    {{{
+    define("GMAP_KEY","ABQIAAAAWqyv9sBAgUBdsdOdgo7LsRTeX7yNUukyMrmY8FsCXcCA9axlYBRmLDu7pJM7HIzM1e6MYO-pqjjp5w");
     $glmAppBase = '/var/www/server/app.gaslightmedia.com/';
     break; //  }}}
 case 'STEVE' : // {{{

diff --git a/static/11.phtml b/static/11.phtml
index 29954a0..d1f524c 100644 (file)
--- a/static/11.phtml
+++ b/static/11.phtml
@@ -1,6 +1,7 @@
-<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo GMAPS_API; ?>"></script>
+<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>
-<input type="hidden" id="mapsURL" value="<?php echo MEDIA_BASE_URL; ?>" />
+
 <?php
 $courses = array(
     'Dunmaglas Golf Course'        => 'dunmaglas.gif',
@@ -15,8 +16,9 @@ foreach ($courses as $k => $v) {
     $url       = BASE_URL;
     $markers[] = <<<_OUT
 <td>\n
-       <img src="{$url}assets/{$v}" alt="{$k}" />\n
+       <img src="{$url}assets/{$v}" alt="{$k}"/>\n
        <span class="courseName">{$k}</span>\n
+        
 </td>
 _OUT;
 }
@@ -25,4 +27,6 @@ for ($i = 0; $i < count($markers); ++$i) {
 }
 echo '<table class="coursePins">' . implode("\n", $rows) . "</table>";
 ?>
+
 <div id="map" name="coursesMap" style="width: 520px; height: 300px;"></div>
+