From bc29a129e6619c09318c2d971d61c7ecc394f05c Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Mon, 10 Jul 2017 16:32:29 -0400 Subject: [PATCH] Adding shortcodes for two google maps Setting up the interactive maps for troutcreek theme. --- functions.php | 2 + js/courseMap.js | 97 ++++++++++++++++++++++++++++++++++++++++++ js/interactive.js | 94 ++++++++++++++++++++++++++++++++++++++++ lib/courseMap.php | 22 ++++++++++ lib/interactiveMap.php | 22 ++++++++++ xml/courseMap.xml | 2 + xml/interactive.xml | 2 + 7 files changed, 241 insertions(+) create mode 100644 js/courseMap.js create mode 100644 js/interactive.js create mode 100644 lib/courseMap.php create mode 100644 lib/interactiveMap.php create mode 100644 xml/courseMap.xml create mode 100644 xml/interactive.xml diff --git a/functions.php b/functions.php index f4282c4..8c8c073 100644 --- a/functions.php +++ b/functions.php @@ -1,6 +1,8 @@ '; + html += '' + name + '
' + + street + '
' + city + ', ' + state + ' ' + zip; + if (distTo) { + html += '
' + distTo + ' Miles from Trout Creek'; + } + html += ''; + html += ''; + + 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 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 = ''; + html += ''; + html += '
' + name + '
' + + street + '
' + city + ', ' + state + ' ' + zip; + html += '
'; + + 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 index 0000000..5b71371 --- /dev/null +++ b/lib/courseMap.php @@ -0,0 +1,22 @@ + + var mapBaseUrl = "' . get_template_directory_uri() . '"; + +
'; +} ); diff --git a/lib/interactiveMap.php b/lib/interactiveMap.php new file mode 100644 index 0000000..1ce739a --- /dev/null +++ b/lib/interactiveMap.php @@ -0,0 +1,22 @@ + + var mapBaseUrl = "' . get_template_directory_uri() . '"; + +
'; +} ); diff --git a/xml/courseMap.xml b/xml/courseMap.xml new file mode 100644 index 0000000..480130c --- /dev/null +++ b/xml/courseMap.xml @@ -0,0 +1,2 @@ + + diff --git a/xml/interactive.xml b/xml/interactive.xml new file mode 100644 index 0000000..14f5be5 --- /dev/null +++ b/xml/interactive.xml @@ -0,0 +1,2 @@ + + -- 2.17.1