var map = [], baseUrl = ""; var hostname = window.location.hostname; switch (hostname) { case "boysbrigade.localhost": baseUrl = "http://boysbrigade.localhost/"; break; case "visiontank.net": baseUrl = "http://visiontank.net/bb-preview/"; break; case "dev.boys-brigade.org.uk": baseUrl = "https://dev.boys-brigade.org.uk/"; break; case "boys-brigade.org.uk": baseUrl = "https://boys-brigade.org.uk/"; break; default: baseUrl = "https://boys-brigade.org.uk/"; } console.log(hostname); function initMap() { // Create the map. map = new google.maps.Map(document.getElementById("map"), { //Map options zoom: 6, center: { lat: 54.8311934, lng: -2.3918667 }, panControl: false, zoomControl: true, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, rotateControl: false, fullscreenControl: false, styles: [ { elementType: "geometry", stylers: [ { color: "#f5f5f5", }, ], }, { elementType: "labels.icon", stylers: [ { visibility: "off", }, ], }, { elementType: "labels.text.fill", stylers: [ { color: "#b3b3b3", }, ], }, { elementType: "labels.text.stroke", stylers: [ { color: "#f5f5f5", }, ], }, { featureType: "administrative", elementType: "geometry", stylers: [ { visibility: "on", }, ], }, { featureType: "administrative.land_parcel", elementType: "labels.text.fill", stylers: [ { color: "#bdbdbd", }, ], }, { featureType: "landscape", stylers: [ { color: "#fafbf8", }, ], }, { featureType: "landscape", elementType: "geometry.fill", stylers: [ { color: "#fafaf8", }, ], }, { featureType: "landscape.man_made", elementType: "geometry.fill", stylers: [ { color: "#f7f6f3", }, ], }, { featureType: "landscape.man_made", elementType: "labels.text", stylers: [ { color: "#000000", }, ], }, { featureType: "poi", stylers: [ { visibility: "off", }, ], }, { featureType: "poi", elementType: "geometry", stylers: [ { color: "#eeeeee", }, ], }, { featureType: "poi", elementType: "labels.text.fill", stylers: [ { color: "#757575", }, ], }, { featureType: "poi.park", elementType: "geometry", stylers: [ { color: "#e5e5e5", }, ], }, { featureType: "poi.park", elementType: "labels.text.fill", stylers: [ { color: "#9e9e9e", }, ], }, { featureType: "road", elementType: "geometry", stylers: [ { color: "#ffffff", }, ], }, { featureType: "road", elementType: "geometry.fill", stylers: [ { color: "#ffffff", }, { weight: 2, }, ], }, { featureType: "road", elementType: "labels.icon", stylers: [ { visibility: "off", }, ], }, { featureType: "road.arterial", elementType: "geometry.fill", stylers: [ { color: "#edeeed", }, ], }, { featureType: "road.arterial", elementType: "labels.text.fill", stylers: [ { color: "#757575", }, ], }, { featureType: "road.highway", elementType: "geometry", stylers: [ { color: "#dadada", }, ], }, { featureType: "road.highway", elementType: "geometry.fill", stylers: [ { color: "#fefcff", }, ], }, { featureType: "road.highway", elementType: "labels.text.fill", stylers: [ { color: "#616161", }, ], }, { featureType: "road.local", elementType: "geometry.fill", stylers: [ { color: "#edeeed", }, ], }, { featureType: "road.local", elementType: "labels.text.fill", stylers: [ { color: "#9e9e9e", }, ], }, { featureType: "transit", stylers: [ { visibility: "off", }, ], }, { featureType: "transit.line", elementType: "geometry", stylers: [ { color: "#e5e5e5", }, ], }, { featureType: "transit.station", elementType: "geometry", stylers: [ { color: "#eeeeee", }, ], }, { featureType: "water", elementType: "geometry", stylers: [ { color: "#c9c9c9", }, ], }, { featureType: "water", elementType: "geometry.fill", stylers: [ { color: "#d5dadc", }, ], }, { featureType: "water", elementType: "labels.text.fill", stylers: [ { color: "#9e9e9e", }, ], }, ], }); } //Initiate global variables var groups = []; var markers = []; var activeMarker; var groupsPos = []; //Create search groups var searchGroups = function () { var address = jQuery(".finder__sidebar__search__input").val(); var geocoder = new google.maps.Geocoder(); if (address) { //Look for address on maps geocoder.geocode( { address: address, componentRestrictions: { country: "GB" }, }, //Function to run after lookup function (results, status) { //If lookup successful if (status == google.maps.GeocoderStatus.OK) { //Set map position to results lat and lng coordinates var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), pos = new google.maps.LatLng(lat, lng); //Run add markers function (created further down) addGroupMarkers(pos); } else { alert(address + " not found"); } } ); } else { //Clear search if address doesn't exist resetSearch(); } }; //Create add markers function var addGroupMarkers = function (pos) { //Delete all existing .finder__group elements jQuery(".finder__group").remove(); //If markers already exist if (markers) { //Loop through markers and set as null _.forEach(markers, function (marker, i) { marker.setMap(null); }); //Reset markers array to blank array markers = []; } //Reset arrays var groupsByPos = [], groupsPos = []; //Loop through existing groups _.forEach(groups, function (group, i) { //Initiate groupPos obj var groupPos = { position: "", distanceFrom: "", distanceFromMiles: "", index: "", }; //Set position, index, distanceFrom groupPos.position = new google.maps.LatLng( group.latitude, group.longitude ); groupPos.index = i; groupPos.distanceFrom = google.maps.geometry.spherical.computeDistanceBetween( groupPos.position, pos ); //Calculate miles distance from groupPos.distanceFromMiles = Math.round( groupPos.distanceFrom / 1609.344 ); //Push created obj to groupsPos array groupsPos.push(groupPos); group.distanceFromMiles = groupPos.distanceFromMiles; }); //Sort array by distance from groupsByPos = _.sortBy(groupsPos, [ function (o) { return o.distanceFrom; }, ]); //Initiate array var nearestGroups = []; //Set map bounds to the spread of groups var bounds = new google.maps.LatLngBounds(); //Loop ten times for (var i = 0; i < 10; i++) { //Get nearest group via index (incrementing each time) giving the nearest ten groups var nearestGroup = groups[groupsByPos[i].index], nearestGroupPos = new google.maps.LatLng( nearestGroup.latitude, nearestGroup.longitude ); //Initiate marker marker = {}; //Set new marker with group details marker = new google.maps.Marker({ position: nearestGroupPos, map: map, title: nearestGroup.name, icon: { url: baseUrl + "wp-content/themes/Boysbrigade/company-finder/images/marker_small.png", scaledSize: new google.maps.Size(15, 15), }, }); //Push marker to markers array markers.push(marker); //Push group to nearest groups array nearestGroups.push(nearestGroup); //Recalculate bounds to nearest groups bounds.extend(nearestGroupPos); } //Foreach marker in markers _.forEach(markers, function (marker, i) { //Add click event listner to marker marker.addListener("click", (event) => { //If is active marker, set icon to dot activeMarker && activeMarker.setIcon({ url: baseUrl + "wp-content/themes/Boysbrigade/company-finder/images/marker_small.png", scaledSize: new google.maps.Size(15, 15), }); //Set icon to pin marker.setIcon({ url: baseUrl + "wp-content/themes/Boysbrigade/company-finder/images/marker.png", scaledSize: new google.maps.Size(21, 30), }); //Set active marker as this marker activeMarker = marker; //Set group class associated with marker const groupClass = ".finder__group--" + i; //jQuery to figure out slide toggling if (jQuery(groupClass + " .finder__group__details").is(":hidden")) { jQuery(".finder__group__details").slideUp(); jQuery(".finder__group").removeClass("finder__group--open"); jQuery(groupClass + " .finder__group__details").slideToggle( function () { jQuery(".finder__groups_wrap").scrollTo( groupClass, 400 ); } ); jQuery(groupClass).toggleClass("finder__group--open"); } }); }); //Fade out no results jQuery(".finder__no_results").fadeOut(function () { //Run add groups html function addGroupsHTML(nearestGroups, true); //Slide down results container jQuery(".finder__sidebar__closest_wrap").slideDown(200, function () { //Calculate needed height calculateGroupsHeight(); }); //Run group click function groupClick(markers); }); //Make map fit bounds set by nearest groups map.fitBounds(bounds); }; //Create add groups html function var addGroupsHTML = function (groups, groupClass = false) { //If groupClass argument is true, set groupClass as 'searched' if (groupClass == true) { groupClass = "searched"; } //Loop through groups passed as first argument jQuery.each(groups, function (i, group) { //Creat html for each group with feed data var groupHTML = jQuery.parseHTML( `
${group.distanceFromMiles} mile${ group.distanceFromMiles == 1 ? "" : "s" } away
${group.custom_data.unit_address.address_1}
${
group.custom_data.unit_address.address_2
? group.custom_data.unit_address.address_2 + ","
: ""
}
${
group.custom_data.unit_address.address_3
? group.custom_data.unit_address.address_3 + ","
: ""
}
${
group.custom_data.unit_address.address_town
? group.custom_data.unit_address.address_town +
","
: ""
}
${
group.custom_data.unit_address.address_county
? group.custom_data.unit_address
.address_county + ","
: ""
}
${
group.custom_data.unit_address.address_postcode
? group.custom_data.unit_address
.address_postcode
: ""
}
" +
group.child_sections.bbukanchors[0].name +
" (5 to 8 years)" +
"
" +
group.child_sections.bbukanchors[0].custom_data
.section_times.meeting_day +
" " +
group.child_sections.bbukanchors[0].custom_data
.section_times.meeting_times +
"
" +
group.child_sections.bbukjuniors[0].name +
" (8 to 11 years)" +
"
" +
group.child_sections.bbukjuniors[0].custom_data
.section_times.meeting_day +
" " +
group.child_sections.bbukjuniors[0].custom_data
.section_times.meeting_times +
"
" +
group.child_sections.bbukcompanies[0].name +
" (11 to 14 years)" +
"
" +
group.child_sections.bbukcompanies[0].custom_data
.section_times.meeting_day +
" " +
group.child_sections.bbukcompanies[0].custom_data
.section_times.meeting_times +
"
" +
group.child_sections.bbukseniors[0].name +
" (15 to 18 years)" +
"
" +
group.child_sections.bbukseniors[0].custom_data
.section_times.meeting_day +
" " +
group.child_sections.bbukseniors[0].custom_data
.section_times.meeting_times +
"
${ group.custom_data.unit_data.designation == "BB with Boys Only" ? "Working with Boys Only" : group.custom_data.unit_data.designation == "BB with a Girls Association" || "BB with Amicus Group & Girls Association" || "BB with an Amicus Group" ? "Working with Boys & Girls" : group.custom_data.unit_data.designation }