Adding shortcodes for two google maps

Setting up the interactive maps for troutcreek theme.

diff --git a/functions.php b/functions.php
index f4282c4..8c8c073 100644 (file)
--- a/functions.php
+++ b/functions.php
@@ -1,6 +1,8 @@
 <?php
 require_once 'lib/menu-walker.php';
 require_once 'lib/navigation.php';
+require_once 'lib/courseMap.php';
+require_once 'lib/interactiveMap.php';
 
 $ancestorId   = null;
 $includePages = array();

diff --git a/js/courseMap.js b/js/courseMap.js
new file mode 100644 (file)
index 0000000..738972c
--- /dev/null
+++ b/js/courseMap.js
@@ -0,0 +1,97 @@
+var Map = {
+    _map: null,
+    _latLngBounds: null,
+    _infoWindow: null,
+
+    init: function()
+    {
+        var canvas = document.getElementById('map-canvas');
+        var myOptions = {
+            scrollwheel: false,
+            zoom: 9,
+            mapTypeControl: true,
+            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
+            navigationControl: true,
+            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        }
+
+        Map._map = new google.maps.Map(canvas, myOptions);
+        Map._latLngBounds = new google.maps.LatLngBounds();
+        Map._infoWindow = new google.maps.InfoWindow;
+
+        jQuery.get( mapBaseUrl + "/xml/courseMap.xml", Map._loadData, 'xml');
+    },
+
+    _loadData: function(data)
+    {
+        var markers = data.documentElement.getElementsByTagName("marker");
+        for (i = 0; i < markers.length; i++) {
+            var name = markers[i].getAttribute('name');
+            var street = markers[i].getAttribute('street');
+            var city = markers[i].getAttribute('city');
+            var state = markers[i].getAttribute('state');
+            var zip = markers[i].getAttribute('zip');
+            var lat = markers[i].getAttribute('lat');
+            var lng = markers[i].getAttribute('lng');
+            var distTo = markers[i].getAttribute('distTo');
+            var zIndex = markers[i].getAttribute('zIndex');
+
+            var point = new google.maps.LatLng(
+                parseFloat(lat),
+                parseFloat(lng)
+            );
+            Map._latLngBounds.extend(point);
+
+            var html = '<table><tbody><tr>';
+            html += '<td><b>' + name + '</b><br>' +
+                        street + '<br>' + city + ', ' + state + ' ' + zip;
+            if (distTo) {
+                html += '<br>' + distTo + ' Miles from Trout Creek';
+            }
+            html += '</td>';
+            html += '</tr></tbody></table>';
+
+            if (distTo) {
+                var pinColor = "FE7569";
+            } else {
+                var pinColor = "6ABD45";
+            }
+            var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
+                new google.maps.Size(21, 34),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(10, 34)
+            );
+            var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
+                new google.maps.Size(40, 37),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(12, 35)
+            );
+            var marker = new google.maps.Marker({
+                title: name,
+                position: point,
+                map: Map._map,
+                icon: pinImage,
+                shadow: pinShadow
+            });
+
+
+            Map._bindInfoWindow(marker, Map._map, Map._infoWindow, html);
+        }
+
+        Map._map.setCenter(
+            Map._latLngBounds.getCenter()
+        );
+        Map._map.fitBounds(Map._latLngBounds);
+    },
+
+    _bindInfoWindow: function(marker, map, infoWindow, html)
+    {
+        google.maps.event.addListener(marker, 'click', function() {
+            infoWindow.setContent(html);
+            infoWindow.open(map, marker);
+        });
+    }
+};
+
+jQuery(document).ready(Map.init);

diff --git a/js/interactive.js b/js/interactive.js
new file mode 100644 (file)
index 0000000..7b56320
--- /dev/null
+++ b/js/interactive.js
@@ -0,0 +1,94 @@
+var Map = {
+       _map: null,
+       _latLngBounds: null,
+       _infoWindow: null,
+
+       init: function()
+       {
+               var canvas = document.getElementById('map-canvas');
+               var myOptions = {
+            scrollwheel: false,
+                       zoom: 9,
+                       mapTypeControl: true,
+                       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
+                       navigationControl: true,
+                       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+                       mapTypeId: google.maps.MapTypeId.ROADMAP
+               }
+
+               Map._map = new google.maps.Map(canvas, myOptions);
+               Map._latLngBounds = new google.maps.LatLngBounds();
+               Map._infoWindow = new google.maps.InfoWindow;
+
+        jQuery.get( mapBaseUrl + "/xml/interactive.xml", Map._loadData, 'xml');
+       },
+
+       _loadData: function(data)
+       {
+               var markers = data.documentElement.getElementsByTagName("marker");
+               for (i = 0; i < markers.length; i++) {
+                       var name = markers[i].getAttribute('name');
+                       var street = markers[i].getAttribute('street');
+                       var city = markers[i].getAttribute('city');
+                       var state = markers[i].getAttribute('state');
+                       var zip = markers[i].getAttribute('zip');
+                       var lat = markers[i].getAttribute('lat');
+                       var lng = markers[i].getAttribute('lng');
+            var main = markers[i].getAttribute('main');
+            var zIndex = markers[i].getAttribute('zIndex');
+
+                       var point = new google.maps.LatLng(
+                               parseFloat(lat),
+                               parseFloat(lng)
+                       );
+                       Map._latLngBounds.extend(point);
+
+                       var html = '<table><tbody><tr>';
+                       html += '<td><b>' + name + '</b><br>' +
+                                               street + '<br>' + city + ', ' + state + ' ' + zip;
+                       html += '</td>';
+                       html += '</tr></tbody></table>';
+
+            if (main) {
+                var pinColor = "FE7569";
+            } else {
+                var pinColor = "6ABD45";
+            }
+            var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
+                new google.maps.Size(21, 34),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(10, 34)
+            );
+            var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
+                new google.maps.Size(40, 37),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(12, 35)
+            );
+            var marker = new google.maps.Marker({
+                title: name,
+                position: point,
+                map: Map._map,
+                icon: pinImage,
+                shadow: pinShadow
+            });
+
+
+                       Map._bindInfoWindow(marker, Map._map, Map._infoWindow, html);
+               }
+
+               Map._map.setCenter(
+                       Map._latLngBounds.getCenter()
+               );
+               Map._map.fitBounds(Map._latLngBounds);
+       },
+
+       _bindInfoWindow: function(marker, map, infoWindow, html)
+       {
+               google.maps.event.addListener(marker, 'click', function() {
+                       infoWindow.setContent(html);
+                       infoWindow.open(map, marker);
+               });
+       }
+};
+
+$(document).ready(Map.init);

diff --git a/lib/courseMap.php b/lib/courseMap.php
new file mode 100644 (file)
index 0000000..5b71371
--- /dev/null
+++ b/lib/courseMap.php
@@ -0,0 +1,22 @@
+<?php
+
+add_shortcode( 'troutcreek-course-map', function( $atts ){
+    wp_enqueue_script(
+        'google-map',
+        'https://maps.google.com/maps/api/js?key=AIzaSyCdmRuCoTJoqWVQSbJ4Bymv4zNGzBGTbVI',
+        array(),
+        '1.0.0',
+        true
+    );
+    wp_enqueue_script(
+        'course-map',
+        get_template_directory_uri() . '/js/courseMap.js',
+        array( 'google-map' ),
+        '1.0',
+        true
+    );
+    return '<script>
+        var mapBaseUrl = "' . get_template_directory_uri() . '";
+    </script>
+    <div id="map-canvas" style="width: 100%; height:400px;"></div>';
+} );

diff --git a/lib/interactiveMap.php b/lib/interactiveMap.php
new file mode 100644 (file)
index 0000000..1ce739a
--- /dev/null
+++ b/lib/interactiveMap.php
@@ -0,0 +1,22 @@
+<?php
+
+add_shortcode( 'troutcreek-interactive-map', function( $atts ){
+    wp_enqueue_script(
+        'google-map',
+        'https://maps.google.com/maps/api/js?key=AIzaSyCdmRuCoTJoqWVQSbJ4Bymv4zNGzBGTbVI',
+        array(),
+        '1.0.0',
+        true
+    );
+    wp_enqueue_script(
+        'course-map',
+        get_template_directory_uri() . '/js/interactive.js',
+        array( 'google-map' ),
+        '1.0',
+        true
+    );
+    return '<script>
+        var mapBaseUrl = "' . get_template_directory_uri() . '";
+    </script>
+    <div id="map-canvas" style="width: 100%; height:400px;"></div>';
+} );

diff --git a/xml/courseMap.xml b/xml/courseMap.xml
new file mode 100644 (file)
index 0000000..480130c
--- /dev/null
+++ b/xml/courseMap.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<markers><marker name="Trout Creek Condominium Resort" lat="45.482311" lng="-84.909537" street="4749 S. Pleasantview Road" state="MI" city="Harbor Springs" zip="49740" distTo="" zIndex="1"/><marker name="Bay Harbor" lat="45.3637305" lng="-85.0557287" street="5800 Coastal Ridge Dr." state="MI" city="Bay Harbor" zip="49770" distTo="14.9" zIndex="2"/><marker name="Belvedere Golf Club" lat="45.2911382" lng="-85.2673243" street="5731 Marion Center Rd." state="MI" city="Charlevoix" zip="49720" distTo="28.4" zIndex="3"/><marker name="Black Lake Golf Club" lat="45.4139204" lng="-84.2678685" street="2800 Maxon Rd." state="MI" city="Onaway" zip="49765" distTo="43.8" zIndex="4"/><marker name="Boyne Highlands" lat="45.4642938" lng="-84.9368646" street="600 Highlands Pike" state="MI" city="Harbor Springs" zip="49740" distTo="2.2" zIndex="5"/><marker name="Boyne Mountain" lat="45.1584971" lng="-84.9238342" street="1 Boyne Mountain Rd." state="MI" city="Boyne Falls" zip="49713" distTo="26.3" zIndex="6"/><marker name="Chestnut Valley" lat="45.485635" lng="-84.881022" street="1875 Clubhouse Drive" state="MI" city="Harbor Springs" zip="49740" distTo="4.1" zIndex="7"/><marker name="Crooked Tree" lat="45.361384" lng="-85.013596" street="600 Crooked Tree Dr." state="MI" city="Petoskey" zip="49770" distTo="13.6" zIndex="8"/><marker name="Dunmaglas Golf Course" lat="45.292194" lng="-85.1598978" street="09031 Boyne City Rd." state="MI" city="Charlevoix" zip="49720" distTo="26" zIndex="9"/><marker name="Hidden River" lat="45.507348" lng="-84.7607699" street="7688 Maple River Rd." state="MI" city="Brutus" zip="49716" distTo="9.7" zIndex="10"/><marker name="Indian River Golf Club" lat="45.41720" lng="-84.61474" street="3301 Chippewa Beach Road" state="MI" city="Indian River" zip="49749" distTo="30.8" zIndex="11"/><marker name="Little Traverse Golf Club" lat="45.4461" lng="-84.89917" street="995 Hideaway Valley Road" state="MI" city="Harbor Springs" zip="49740" distTo="3.5" zIndex="12"/></markers>

diff --git a/xml/interactive.xml b/xml/interactive.xml
new file mode 100644 (file)
index 0000000..14f5be5
--- /dev/null
+++ b/xml/interactive.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<markers><marker name="Trout Creek Condominium Resort" lat="45.482311" lng="-84.909537" street="4749 S. Pleasantview Road" state="MI" city="Harbor Springs" zip="49740" main="1" zIndex="1"/><marker name="Petoskey Gaslight District" lat="45.373835" lng="-84.967258" street="Mitchell Street" state="MI" city="Petoskey" zip="49740" main="" zIndex="2"/><marker name="Downtown Harbor Springs" lat="45.431925" lng="-84.97886" street="Main Street" state="MI" city="Harbor Springs" zip="49740" main="" zIndex="3"/><marker name="Sturgeon Bay Beach" lat="45.6801748" lng="-84.9697738" street="Sturgeon Bay Trail Road" state="MI" city="Bliss Twp." zip="" main="" zIndex="4"/><marker name="Petoskey State Park" lat="45.394788" lng="-84.905643" street="2475 M119" state="MI" city="Petoskey" zip="49770" main="" zIndex="5"/><marker name="Mackinac Bridge" lat="45.799487" lng="-84.730506" street="I75 North" state="MI" city="Mackinaw City" zip="" main="" zIndex="6"/><marker name="Mackinac Island" lat="45.849180" lng="-84.618934" street="" state="MI" city="Mackinac Island" zip="49757" main="" zIndex="7"/><marker name="Boyne Highlands" lat="45.4642938" lng="-84.9368646" street="600 Highlands Dr." state="MI" city="Harbor Springs" zip="49740" main="" zIndex="8"/><marker name="Nubs Nob Ski Resort" lat="45.472035" lng="-84.905453" street="500 Nubs Nob Rd." state="MI" city="Harbor Springs" zip="49740" main="" zIndex="9"/><marker name="Inland Waterway" lat="45.403042" lng="-84.876479" street="2495 US 31 N" state="MI" city="Conway" zip="49722" main="" zIndex="10"/><marker name="Little Traverse Bay Golf Club" lat="45.4461" lng="-84.89917" street="995 Hideaway Valley Rd." state="MI" city="Harbor Springs" zip="49740" main="" zIndex="11"/><marker name="Chestnut Valley Golf Club" lat="45.485635" lng="-84.881022" street="1875 Clubhouse Dr." state="MI" city="Harbor Springs" zip="49740" main="" zIndex="12"/><marker name="Odawa Casino" lat="45.352946" lng="-84.979377" street="1760 Lears Rd." state="MI" city="Petoskey" zip="49770" main="" zIndex="13"/><marker name="North Country Hiking Trail" lat="45.492871" lng="-84.886551" street="Brutus Rd." state="MI" city="Brutus" zip="" main="" zIndex="14"/><marker name="Big Bear Adventures" lat="45.401283" lng="-84.618716" street="4271 S. Straits Hwy" state="MI" city="Indian River" zip="49749" main="" zIndex="15"/><marker name="Pond Hill Farms" lat="45.475602" lng="-85.059835" street="5581 S. Lakeshore Dr." state="MI" city="Harbor Springs" zip="49740" main="" zIndex="16"/><marker name="Bay Harbor Golf" lat="45.367200" lng="-85.020302" street="4000 Main St." state="MI" city="Bay Harbor" zip="49770" main="" zIndex="17"/><marker name="Tunnel of Trees" lat="45.431676" lng="-84.991999" street="M119" state="MI" city="Harbor Springs" zip="49740" main="" zIndex="18"/></markers>