Add google map into theme
authorSteve Sutton <steve@gaslightmedia.com>
Tue, 18 Nov 2014 20:46:06 +0000 (15:46 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Tue, 18 Nov 2014 20:46:06 +0000 (15:46 -0500)
functions.php
js/google-map.js [new file with mode: 0644]
js/map.xml [new file with mode: 0644]

index 6268212..91a9254 100755 (executable)
@@ -22,7 +22,7 @@ function glm_page_menu($parent = 0, $class = '')
         $childs = get_pages('child_of=' . $page->ID);
         if (count($childs) > 0) {
             echo '<li class="has-dropdown">'."\n";
-            echo '<a href="'.get_permalink($child->ID).'">'.$page->post_title.'</a>'."\n";
+            echo '<a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a>'."\n";
             echo glm_page_menu($page->ID, 'sub-menu dropdown');
             echo '</li>'."\n";
         } else {
@@ -59,9 +59,35 @@ function preston_feather_scripts()
             '1.0',
             true
          );
+        wp_enqueue_script(
+            'glm_google_map_code',
+            'http://maps.google.com/maps/api/js?sensor=false',
+            'jquery',
+            '1',
+            true
+        );
+        wp_enqueue_script(
+            'glm_google_map',
+            get_template_directory_uri() . '/js/google-map.js',
+            'jquery',
+            '1',
+            true
+        );
     }
 
 }
-
+/**
+ * Output the div for the google map
+ *
+ * @param type $w Width of the div
+ * @param type $h Height of the div
+ *
+ * @return type
+ */
+function glm_google_map($w = '500px', $h = '200px')
+{
+    $format = '<div id="map-canvas" style="width: %s;height: %s">Loading...</div>';
+    return sprintf($format, $w, $h);
+}
 add_action('wp_enqueue_scripts', 'preston_feather_scripts');
 ?>
\ No newline at end of file
diff --git a/js/google-map.js b/js/google-map.js
new file mode 100644 (file)
index 0000000..13d4746
--- /dev/null
@@ -0,0 +1,109 @@
+var Map = {
+    _map: null,
+    _latLngBounds: null,
+    _infoWindow: null,
+    arrMarkers: [],
+
+    init: function()
+    {
+        var canvas = document.getElementById('map-canvas');
+        var myOptions = {
+            zoom: 13,
+            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;
+
+        $.get("http://localhost/WordPress/preston/wp-content/plugins/glm-google-map/map.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('member_name');
+            var street = markers[i].getAttribute('street');
+            var city = markers[i].getAttribute('city_name');
+            var state = markers[i].getAttribute('state_abb');
+            var zip = markers[i].getAttribute('zip');
+            var lat = markers[i].getAttribute('lat');
+            var lng = markers[i].getAttribute('lng');
+            var phone = markers[i].getAttribute('phone');
+            var tfree = markers[i].getAttribute('tfree');
+            var zIndex = markers[i].getAttribute('zIndex');
+
+            var point = new google.maps.LatLng(
+                parseFloat(lat),
+                parseFloat(lng)
+            );
+            Map._latLngBounds.extend(point);
+
+            var html = '<div>';
+            html += '<p><b>' + name + '</b><br>' +
+                        street + '<br>' + city + ', ' + state + ' ' + zip;
+
+            if (phone != '') {
+                html += '<br>' + phone;
+            }
+            if (tfree != '') {
+                html += '<br>' + tfree;
+            }
+
+            html += '</p>';
+            html += '</div>';
+
+//            html += '<span class="infoWindow divider"> - </span>';
+            var marker = new google.maps.Marker({
+                title: name,
+                map: Map._map,
+                position: point
+            });
+
+            Map.arrMarkers.push(marker);
+            Map._bindInfoWindow(marker, Map._map, Map._infoWindow, html);
+        }
+
+        Map._map.setCenter(
+            Map._latLngBounds.getCenter()
+        );
+        Map._map.fitBounds(Map._latLngBounds);
+
+        if (typeof glm_searchMapIconActive !== "undefined" && glm_searchMapIconActive) {
+            $(".map-link").click(function (){
+                var linkId = $(this).attr("rel");
+                google.maps.event.trigger(Map.arrMarkers[linkId], "click");
+                myAnchor = '#map-canvas';
+                window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
+                Map._map.setZoom(14);
+            });
+        }
+    },
+
+    _bindInfoWindow: function(marker, map, infoWindow, html)
+    {
+        google.maps.event.addListener(marker, 'click', function() {
+            infoWindow.setContent(html);
+            infoWindow.open(map, marker);
+
+            $('.addToPlanner a:first').click(function(event) {
+                if ($(this).text() == 'Add To Planner') {
+                    event.preventDefault();
+
+                    $.get($(this).attr('href'), function(data, textstatus) {
+                        $(".trip-list-count").html(data);
+                        $('.addToPlanner a').toggle();
+                    });
+                    return false;
+                }
+            });
+        });
+    }
+};
+
+$(document).ready(Map.init);
\ No newline at end of file
diff --git a/js/map.xml b/js/map.xml
new file mode 100644 (file)
index 0000000..9af6f27
--- /dev/null
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<markers>
+    <marker
+        member_name="Petoskey"
+        lat="45.367922"
+        lng="-84.970817"
+        street="900 Spring Street"
+        state_abb="MI"
+        city_name="Petoskey"
+        zip="49770"
+        phone="231-347-2501"
+        tfree="800-968-2501"
+        zIndex="1">
+    </marker>
+    <marker
+        member_name="Harbor Springs"
+        lat="45.425492"
+        lng="-84.887101"
+        street="8600 Moeller Drive"
+        state_abb="MI"
+        city_name="Harbor Springs"
+        zip="49740"
+        phone="231-348-2990"
+        tfree="800-968-2990"
+        zIndex="1">
+    </marker>
+    <marker
+        member_name="Gaylord"
+        lat="44.976500"
+        lng="-84.682159"
+        street="3689 Old 27 South"
+        state_abb="MI"
+        city_name="Gaylord"
+        zip="49735"
+        phone="989-732-8862"
+        tfree="888-732-8862"
+        zIndex="1">
+    </marker>
+    <marker
+        member_name="Traverse City"
+        lat="44.753743"
+        lng="-85.570007"
+        street="777 US 31 South"
+        state_abb="MI"
+        city_name="Traverse City"
+        zip="49685"
+        phone="231-943-1180"
+        tfree=""
+        zIndex="1">
+    </marker>
+</markers>
\ No newline at end of file