{"version":3,"file":"/assets/js/map.js","mappings":"iJAEIA,EAAM,UACNC,GAAQ,SAEG,IAAIC,EAAAA,GAAO,CACxBC,OAAQ,0CACRC,QAAS,WAGJC,OAAOC,MAAKC,WACjBA,eAAeC,IACb,MAAM,IAAEC,SAAcC,OAAOC,KAAKC,cAAc,SAC1C,sBAAEC,SAAgCH,OAAOC,KAAKC,cAAc,UAG5DE,EAAM,IAAIL,EAAIM,SAASC,eAAe,OAAQ,CAClDC,OAAQ,CAAEjB,IAAKA,EAAKkB,IAAKjB,GACzBkB,KAAM,GACNC,MAAO,kCAOHC,GAHS,IAAIC,WAGGC,gBADpB,ksCAGA,iBACAC,gBAQIC,GAPS,IAAIZ,EAAsB,CACvCC,MACAY,SAAU,CAAE1B,IAAKA,EAAKkB,IAAKjB,GAC3B0B,QAASN,IAIM,IAAIX,OAAOC,KAAKiB,mBAC/Bb,SAASC,eAAe,QACxB,CACEU,SAAU,CAAE1B,IAAKA,EAAKkB,IAAKjB,GAC3B4B,IAAK,CACHC,QAAS,GACTC,MAAO,OAKbjB,EAAIkB,cAAcP,GAGlB,MAAMQ,EAAmBlB,SAASC,eAAe,oBAC3CkB,EAAcnB,SAASC,eAAe,QAE5CiB,EAAiBE,iBAAiB,SAAS,SAAUC,GAGpC,gBAFFH,EAAiBI,WAG5BJ,EAAiBI,UAAY,WAC7BH,EAAYI,UAAUC,OAAO,YAE7BL,EAAYI,UAAUE,IAAI,UAC1BP,EAAiBI,UAAY,cAEjC,IAGA,MAAMI,EAAoB,IAAI/B,OAAOC,KAAK+B,kBACpCC,EAAqB,IAAIjC,OAAOC,KAAKiC,mBAAmB,CAC5DC,WAAW,EACX/B,MACAgC,MAAO/B,SAASC,eAAe,WAO3B+B,EAAmBhC,SAASC,eAAe,oBAC3CgC,EAAkBjC,SAASC,eAAe,mBAEhD+B,EAAiBZ,iBAAiB,SAPV,YAyBxB,SAAkCM,EAAmBE,GACnD,MAAMM,EAAQlC,SAASC,eAAe,oBAAoBkC,MAE1DT,EACGU,MAAM,CACLC,OAAQH,EACRI,YAAa,CACXrD,IAAKA,EACLkB,IAAKjB,GAEPqD,WAAY5C,OAAOC,KAAK4C,WAAWC,QACnCC,WAAY/C,OAAOC,KAAK+C,WAAWC,WAEpCrD,MAAMsD,IACLjB,EAAmBkB,cAAcD,EAAS,IAE3CE,OAAO1B,GAAM2B,QAAQC,IAAI,oCAE5BhB,EAAgBV,UAAUC,OAAO,SACnC,CA3CE0B,CAAyBxB,EAAmBE,EAC9C,IAOAK,EAAgBb,iBAAiB,SAAS,SAAUC,GACzBrB,SAASC,eAAe,oBAGhCkC,MAAQ,GAGzBnC,SAASC,eAAe,SAASkD,UAAY,GAG7C1D,IAGAwC,EAAgBV,UAAUE,IAAI,SAChC,GAsBF,CACAhC,EAAS,G","sources":["webpack://On2netWebsiteFramework/./src/js/map.js"],"sourcesContent":["import { Loader } from \"@googlemaps/js-api-loader\";\r\n\r\nvar lat = 52.588336;\r\nvar long = -2.146368;\r\n\r\nconst loader = new Loader({\r\n apiKey: \"AIzaSyC1Yqs1umsFi_DFxE2dto0mo07E8sy18sY\",\r\n version: \"weekly\",\r\n});\r\n\r\nloader.load().then(async () => {\r\n async function initMap() {\r\n const { Map } = await google.maps.importLibrary(\"maps\");\r\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\r\n\r\n // Set up map\r\n const map = new Map(document.getElementById(\"map\"), {\r\n center: { lat: lat, lng: long },\r\n zoom: 11,\r\n mapId: \"google.maps.MapTypeId.ROADMAP\",\r\n });\r\n\r\n // Set up custom marker\r\n const parser = new DOMParser();\r\n const pinSvgString =\r\n '';\r\n const pinSvg = parser.parseFromString(\r\n pinSvgString,\r\n \"image/svg+xml\"\r\n ).documentElement;\r\n const marker = new AdvancedMarkerElement({\r\n map,\r\n position: { lat: lat, lng: long },\r\n content: pinSvg,\r\n });\r\n\r\n // Set up Street View\r\n const panorama = new google.maps.StreetViewPanorama(\r\n document.getElementById(\"pano\"),\r\n {\r\n position: { lat: lat, lng: long },\r\n pov: {\r\n heading: 34,\r\n pitch: 10,\r\n },\r\n }\r\n );\r\n\r\n map.setStreetView(panorama);\r\n\r\n // Button to show/hide street view\r\n const streetViewSubmit = document.getElementById(\"streetViewSubmit\");\r\n const panoElement = document.getElementById(\"pano\");\r\n\r\n streetViewSubmit.addEventListener(\"click\", function (e) {\r\n var btnTxt = streetViewSubmit.innerText;\r\n\r\n if (btnTxt === \"Street View\") {\r\n streetViewSubmit.innerText = \"Map View\";\r\n panoElement.classList.remove(\"d-none\");\r\n } else {\r\n panoElement.classList.add(\"d-none\");\r\n streetViewSubmit.innerText = \"Street View\";\r\n }\r\n });\r\n\r\n // Add directions\r\n const directionsService = new google.maps.DirectionsService();\r\n const directionsRenderer = new google.maps.DirectionsRenderer({\r\n draggable: true,\r\n map,\r\n panel: document.getElementById(\"panel\"),\r\n });\r\n\r\n const onChangeHandler = function () {\r\n calculateAndDisplayRoute(directionsService, directionsRenderer);\r\n };\r\n\r\n const directionsSubmit = document.getElementById(\"directionsSubmit\");\r\n const directionsClear = document.getElementById(\"directionsClear\");\r\n\r\n directionsSubmit.addEventListener(\"click\", onChangeHandler);\r\n\r\n directionsClear.addEventListener(\"click\", function (e) {\r\n const directionsSource = document.getElementById(\"directionsSource\");\r\n\r\n // Clear the input\r\n directionsSource.value = \"\";\r\n\r\n // Clear the panel\r\n document.getElementById(\"panel\").innerHTML = \"\";\r\n\r\n // Reset the Map\r\n initMap();\r\n\r\n // Hide clear button\r\n directionsClear.classList.add(\"d-none\");\r\n });\r\n\r\n function calculateAndDisplayRoute(directionsService, directionsRenderer) {\r\n const start = document.getElementById(\"directionsSource\").value;\r\n\r\n directionsService\r\n .route({\r\n origin: start,\r\n destination: {\r\n lat: lat,\r\n lng: long,\r\n },\r\n travelMode: google.maps.TravelMode.DRIVING,\r\n unitSystem: google.maps.UnitSystem.IMPERIAL,\r\n })\r\n .then((response) => {\r\n directionsRenderer.setDirections(response);\r\n })\r\n .catch((e) => console.log(\"error loading these directions\"));\r\n\r\n directionsClear.classList.remove(\"d-none\");\r\n }\r\n }\r\n initMap();\r\n});\r\n\r\n/*\r\n\r\nfunction isNumber(n) {\r\n return !isNaN(parseFloat(n)) && isFinite(n);\r\n}\r\n\r\nvar map = document.querySelector(\"#map_holder\");\r\n\r\nif (map) {\r\n var propertyMap =\r\n propertyMap ||\r\n (function () {\r\n //private variables\r\n var lat, lng, latLng, map, directionsService, directionsDisplay, panorama; //, directionDistance;\r\n\r\n return {\r\n //\r\n //Sets the latitude & longitude of the section of the map we want to pin point (must be called first)\r\n latLng: function (_lat, _lng) {\r\n lat = _lat;\r\n lng = _lng;\r\n },\r\n\r\n //\r\n //Function to render the map to screen\r\n render: function () {\r\n if (!isNumber(lat) || !isNumber(lng)) {\r\n //lat or long is invalid, exit.\r\n return;\r\n }\r\n\r\n latLng = new google.maps.LatLng(lat, lng);\r\n\r\n //Setup the map options\r\n var mapOptions = {\r\n center: latLng,\r\n zoom: 14,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP,\r\n mapTypeControl: true,\r\n mapTypeControlOptions: {\r\n style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,\r\n position: google.maps.ControlPosition.LEFT_BOTTOM,\r\n },\r\n };\r\n\r\n //Set the map div\r\n map = new google.maps.Map(\r\n document.getElementById(\"my_map\"),\r\n mapOptions\r\n );\r\n\r\n\r\n //Map marker options\r\n var marker = new google.maps.Marker({\r\n position: latLng,\r\n //'icon': markerImage,\r\n //'shadow': markerShadow,\r\n map: map,\r\n animation: google.maps.Animation.DROP,\r\n optimized: true,\r\n title: \"Deansgate\",\r\n content: \"\",\r\n });\r\n\r\n //Attach the various controls for the map sytsem...\r\n\r\n //Map enlargement/ reduction\r\n $(\"#enlargeMap\").click(function (e) {\r\n e.preventDefault();\r\n\r\n //Move the current map to the popup holder\r\n $(\"#mapAndOptions\").appendTo($(\"#map_holder_popup\"));\r\n\r\n //Popup code\r\n $.magnificPopup.open({\r\n items: {\r\n src: \"#map_holder_popup\",\r\n type: \"inline\",\r\n },\r\n callbacks: {\r\n open: function () {\r\n //Save the original width and height for later\r\n origWidth = $(\"#my_map\").width();\r\n origHeight = $(\"#my_map\").height();\r\n\r\n $(\"#my_map\").width(\"100%\");\r\n $(\"#my_map\").height($(window).height() * 0.7);\r\n propertyMap.resize();\r\n },\r\n close: function () {\r\n //Return the map to it's previous position\r\n $(\"#mapAndOptions\").prependTo($(\"#map_holder\"));\r\n //And resize it...\r\n $(\"#my_map\").width(origWidth);\r\n $(\"#my_map\").height(origHeight);\r\n propertyMap.resize();\r\n },\r\n },\r\n });\r\n\r\n propertyMap.resize();\r\n });\r\n\r\n //Directions code\r\n function renderDirections() {\r\n var sourceLocation = $(\"#directionsSource\").val();\r\n propertyMap.directions(sourceLocation);\r\n $(\"#clearDirections\").fadeIn();\r\n switchView(\"Map view\");\r\n\r\n //Show the driving directions and resize the height to match the map\r\n $(\"#driving_directions\").addClass(\"show_driving_directions\");\r\n\r\n //Add margin to the map a,d call the resize function -- to make room for written directions\r\n $(\"#my_map\").addClass(\"mapMargin\");\r\n propertyMap.resize();\r\n\r\n //alert(propertyMap.drivingDistance());\r\n }\r\n\r\n $(\"#directionsSource\").keydown(function (e) {\r\n if (e.which == 13) renderDirections();\r\n });\r\n $(\"#goDirections\").click(function (e) {\r\n renderDirections();\r\n });\r\n\r\n $(\"#clearDirections\").click(function (e) {\r\n $(\"#directionsSource\").val(\"\");\r\n propertyMap.clearDirections();\r\n $(\"#clearDirections\").fadeOut();\r\n\r\n //Remove the driving directions panel and resize/ re-center the map\r\n $(\"#driving_directions\").removeClass(\"show_driving_directions\");\r\n $(\"#my_map\").removeClass(\"mapMargin\");\r\n propertyMap.resize();\r\n });\r\n\r\n //View switcher\r\n $(\"#switchView\").click(function (e) {\r\n var buttonText = $(this).text();\r\n switchView($(this).text());\r\n });\r\n\r\n function switchView(buttonText) {\r\n if (buttonText == \"Street view\") {\r\n //Display street view\r\n propertyMap.streetView();\r\n buttonText = \"Map view\";\r\n } else {\r\n //Display map view\r\n propertyMap.mapView();\r\n buttonText = \"Street view\";\r\n }\r\n $(\"#switchView\").text(buttonText);\r\n }\r\n\r\n //End of controls for map system\r\n },\r\n\r\n //\r\n //Trigger the gmap resize function and recenter the map position\r\n resize: function () {\r\n //Resize and re-center the map\r\n google.maps.event.trigger(map, \"resize\");\r\n map.setCenter(latLng);\r\n\r\n //Resize the directions panel\r\n $(\"#driving_directions\").css(\"height\", $(\"#my_map\").height());\r\n\r\n return;\r\n },\r\n\r\n //\r\n //Create an instance of the directions service (if it doesn't already exist)\r\n //and calculate directions from inputted source to latlng destination\r\n directions: function (sourceLocation) {\r\n if (typeof directionsService === \"undefined\") {\r\n directionsService = new google.maps.DirectionsService();\r\n directionsDisplay = new google.maps.DirectionsRenderer();\r\n }\r\n directionsDisplay.setMap(map);\r\n directionsDisplay.setPanel(\r\n document.getElementById(\"driving_directions\")\r\n );\r\n\r\n var request = {\r\n origin: sourceLocation,\r\n destination: latLng,\r\n travelMode: google.maps.DirectionsTravelMode.DRIVING,\r\n unitSystem: google.maps.UnitSystem.IMPERIAL,\r\n };\r\n\r\n directionsService.route(request, function (response, status) {\r\n //directionDistance = \"\"; //Reset distance\r\n if (status == google.maps.DirectionsStatus.OK) {\r\n directionsDisplay.setDirections(response);\r\n if (typeof panorama != \"undefined\") panorama.setVisible(false); //Revert to map view\r\n\r\n //Now we can grab the distance between the points\r\n var directionDistance = response.routes[0].legs[0].distance.text; //\"xx mi\" //What do we do with this?\r\n $(\"#driving_distance\")\r\n .text(directionDistance + \" to destination\")\r\n .addClass(\"animated flipInX\")\r\n .show();\r\n } else {\r\n alert(\r\n \"We could not find your location.\\nTry being more specified, like entering your postcode.\"\r\n );\r\n }\r\n });\r\n },\r\n\r\n //\r\n //Clear the driving directions from the map\r\n clearDirections: function () {\r\n if (typeof directionsService != \"undefined\") {\r\n directionsDisplay.setMap(null);\r\n $(\"#driving_distance\").hide(); //.addClass(\"animated flipOutX\");\r\n map.setCenter(latLng);\r\n }\r\n return true;\r\n },\r\n\r\n //\r\n //Switch over to streetview\r\n streetView: function () {\r\n //Return the nearest street view in a given radius of 100 meters from latLng\r\n var sv = new google.maps.StreetViewService();\r\n sv.getPanoramaByLocation(latLng, 100, processSVData);\r\n\r\n //Called when we receive streetview data from Google\r\n function processSVData(data, status) {\r\n if (status == google.maps.StreetViewStatus.OK) {\r\n panorama = map.getStreetView();\r\n panorama.setPosition(data.location.latLng);\r\n\r\n //Compute heading, so that we're pointing TOWARDS the map point\r\n var heading = google.maps.geometry.spherical.computeHeading(\r\n data.location.latLng,\r\n latLng\r\n );\r\n panorama.setPov({ heading: heading, pitch: 0 });\r\n panorama.setVisible(true);\r\n } else {\r\n alert(\"Street view data not found for this location.\");\r\n }\r\n }\r\n },\r\n\r\n //\r\n //Switch back to map view\r\n mapView: function () {\r\n if (typeof panorama != \"undefined\") panorama.setVisible(false);\r\n },\r\n\r\n //\r\n //Return driving distance from directions (if they exist)\r\n drivingDistance: function () {\r\n return directionDistance;\r\n },\r\n };\r\n })();\r\n\r\n propertyMap.latLng(\"52.588336\", \"-2.146368\");\r\n propertyMap.render();\r\n displayingMap = true;\r\n}\r\n\r\n*/\r\n"],"names":["lat","long","Loader","apiKey","version","load","then","async","initMap","Map","google","maps","importLibrary","AdvancedMarkerElement","map","document","getElementById","center","lng","zoom","mapId","pinSvg","DOMParser","parseFromString","documentElement","panorama","position","content","StreetViewPanorama","pov","heading","pitch","setStreetView","streetViewSubmit","panoElement","addEventListener","e","innerText","classList","remove","add","directionsService","DirectionsService","directionsRenderer","DirectionsRenderer","draggable","panel","directionsSubmit","directionsClear","start","value","route","origin","destination","travelMode","TravelMode","DRIVING","unitSystem","UnitSystem","IMPERIAL","response","setDirections","catch","console","log","calculateAndDisplayRoute","innerHTML"],"sourceRoot":""}