{"version":3,"file":"js/map-711d87e3798d1487eda8.js","sources":["webpack:///webpack/bootstrap","webpack:///./app/javascript/packs/map.js"],"sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/packs/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./app/javascript/packs/map.js\");\n","//map\n//変数定義\nlet click_change = false;\nlet marker = []; // marker class\nlet infoWindow = [];\nlet opend = -1;\nlet map;\nlet bounds;\nlet accordion_downed;\nlet targetLocationMarker; // map click marker\nlet polygon_array;\n\nconst isSmall = () => {\n return Foundation.MediaQuery._getCurrentSize() === \"small\";\n};\n\nconst isMedium = () => {\n return Foundation.MediaQuery._getCurrentSize() === \"medium\";\n};\n\nconst isLarge = () => {\n return Foundation.MediaQuery._getCurrentSize() === \"large\";\n};\n\nconst isXLarge = () => {\n return Foundation.MediaQuery._getCurrentSize() === \"xlarge\";\n};\n\nconst isXXLarge = () => {\n return Foundation.MediaQuery._getCurrentSize() === \"xxlarge\";\n};\n\n//TOP画面で利用するマップの初期化\nwindow.initMapModalOnly = () => {\n const url = new URL(location.href);\n let distance_id = parseInt(url.searchParams.get(\"search[distance_id]\"));\n\n // TODO: この変数の扱いをどうするか\n bounds = new google.maps.LatLngBounds();\n map_modal = new google.maps.Map(\n document.getElementById('map_modal'),{\n zoom: mapZoom(distance_id, [], {lat: 1.2831005, lng: 103.8436753}),\n center: {lat: 1.2831005, lng: 103.8436753},\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n mapTypeControl: false,\n fullscreenControl: false,\n streetViewControl: false,\n scaleControl: true,\n zoomControlOptions:{\n position: google.maps.ControlPosition.RIGHT_BOTTOM,\n },\n }\n );\n // change map panning and scrolling behavior of a map when viewed on a mobile device.\n setGestureHandling(map_modal);\n\n // add map click marker\n addMapClickListener(map_modal);\n\n\n // draw location outline\n drawLoationShapes(map_modal, []);\n\n // listener\n const listener_modal = google.maps.event.addListenerOnce(map_modal,'idle', function() {\n google.maps.event.removeListener(listener_modal);\n });\n\n let before_size = Foundation.MediaQuery._getCurrentSize();\n google.maps.event.addDomListener(window, 'resize', function() {\n if (before_size != Foundation.MediaQuery._getCurrentSize()) {\n change_map(map_modal);\n setGestureHandling(map_modal);\n }\n before_size = Foundation.MediaQuery._getCurrentSize();\n });\n}\n\n\nwindow.initMap = () => {\n // JS API is loaded and available\n const url = new URL(location.href);\n let distance_id = parseInt(url.searchParams.get(\"search[distance_id]\"));\n // TODO: この変数の扱いをどうするか\n bounds = new google.maps.LatLngBounds();\n map_main = new google.maps.Map(\n document.getElementById((isMedium() || isSmall()) ? 'map_small': 'map'),{\n zoom: mapZoom(distance_id, g_markerData, g_iscCnterLatLngDefault),\n center: g_centerLatLng,\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n mapTypeControl: false,\n fullscreenControl: true,\n fullscreenControlOptions: {\n position: google.maps.ControlPosition.RIGHT_CENTER,\n },\n streetViewControl: true,\n streetViewControlOptions: {\n position: google.maps.ControlPosition.RIGHT_CENTER,\n },\n scaleControl: true,\n zoomControlOptions:{\n position: google.maps.ControlPosition.RIGHT_CENTER,\n },\n }\n );\n map_modal = new google.maps.Map(\n document.getElementById('map_modal'),{\n zoom: mapZoom(distance_id, g_markerData, g_iscCnterLatLngDefault),\n center: g_centerLatLng,\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n mapTypeControl: false,\n fullscreenControl: false,\n streetViewControl: false,\n scaleControl: true,\n zoomControlOptions:{\n position: google.maps.ControlPosition.RIGHT_BOTTOM,\n },\n }\n );\n\n // change map panning and scrolling behavior of a map when viewed on a mobile device.\n setGestureHandling(map_main);\n setGestureHandling(map_modal);\n\n // add map click marker\n addMapClickListener(map_main);\n addMapClickListener(map_modal);\n\n // draw Center Circle\n if (distance_id){\n drawCenterCircle(map_main, markerData, iscCnterLatLngDefault);\n }\n\n // draw location outline\n drawLoationShapes(map_main, g_location_shapes);\n drawLoationShapes(map_modal, g_location_shapes);\n\n // draw shops marker\n drawMarker(map_main, g_markerData);\n\n adjustZoom(map_main, g_markerData);\n let listener = google.maps.event.addListenerOnce(map_main,'idle', function() {\n adjustZoom(map_main, g_markerData);\n google.maps.event.removeListener(listener);\n });\n\n let listener_modal = google.maps.event.addListenerOnce(map_modal,'idle', function() {\n google.maps.event.removeListener(listener_modal);\n });\n\n let before_size = Foundation.MediaQuery._getCurrentSize();\n google.maps.event.addDomListener(window, 'resize', function() {\n if (before_size != Foundation.MediaQuery._getCurrentSize()) {\n change_map(map_main);\n change_map(map_modal);\n setGestureHandling(map_main);\n setGestureHandling(map_modal);\n }\n before_size = Foundation.MediaQuery._getCurrentSize();\n });\n}\n\n\nconst mapZoom = (distance_id, markerData, iscCnterLatLngDefault) => {\n let zoom;\n if(markerData.length === 0 && iscCnterLatLngDefault){\n zoom = 12;\n } else if(!distance_id) {\n zoom = 13;\n } else {\n switch (distance_id) {\n case 1: zoom = 18; break;\n case 2: zoom = 17; break;\n case 3: zoom = 16; break;\n case 4: zoom = 16; break;\n case 5: zoom = 15; break;\n case 6: zoom = 15; break;\n default: zoom = 15; break;\n }\n }\n return zoom;\n}\n\n\nconst setGestureHandling = (map) => {\n if (isMedium() || isSmall()) {\n //googlemapの設定 初期値。表示しているページがスクロールできる場合はcooperative、スクロールできない場合はgreedyが適用される。\n //通常はこれを使う\n map.set('gestureHandling', 'auto');\n } else {\n //googlemapの設定 旧バージョンの仕様。一本指でドラッグ操作ができる。\n map.set('gestureHandling', 'greedy');\n }\n}\n\n\n// Map Click Listener\nconst addMapClickListener = (map) => {\n map.addListener('click', (e) => {\n if(typeof before_marker !== 'undefined') {\n before_marker.setMap(null);\n }\n\n if(typeof before_window !== 'undefined') {\n before_window.close(map);\n }\n\n // make marker\n targetLocationMarker = new google.maps.Marker({\n position: e.latLng,\n title: 'You can search shops form here',\n map: map,\n });\n\n // open info window\n hereSearchWindow = searchInfoWindow(e.latLng);\n targetLocationMarker.addListener('click', function () {\n hereSearchWindow.open(map, targetLocationMarker);\n });\n\n // remove marker\n targetLocationMarker.addListener('dblclick', function () {\n targetLocationMarker.setMap(null);\n });\n\n before_window = hereSearchWindow;\n before_marker = targetLocationMarker;\n\n click_change = true; //modal\n\n let request = new XMLHttpRequest();\n request.open('GET', `/${locale}/location_shapes?search[lat]=${e.latLng.lat()}&search[lng]=${e.latLng.lng()}`, true);\n request.onload = function() {\n if (request.status >= 200 && request.status < 400) {\n const response = JSON.parse(request.responseText)\n if(polygon_array){\n polygon_array.forEach(function(polygon) {\n polygon.setMap(null);\n });\n }\n \n //スマホモーダル用\n const planningArea = document.querySelector(\"#modal_search_planning_area_id\")\n planningArea.value = response[0][\"planning_area_id\"]\n triggerEvent(planningArea, 'change')\n //select要素追加\n var tmps = subzone.filter(v=> v[3] == response[0][\"planning_area_id\"])\n var select_groups = \"\"\n var selects = \"\"\n tmps.forEach(v=>{\n select_groups = `\"\n $(\"#modal_search_subzone_id > optgroup\").remove()\n $(\"#modal_search_subzone_id\").append(complete_select)\n // TODO: select2 のパラメータにplaceholderがない。エラーになるはず。\n $(\"#modal_search_subzone_id\").select2({allowClear: true});\n \n // TODO: location district planning_area がぐじゃぐちゃ?\n $(\"#location_searchbox\").val(response[0][\"planning_area_id\"])\n $(\"#location_searchbox\").trigger('change');\n $(\"#district_searchbox\").val(response[0][\"id\"])\n $(\"#district_searchbox\").trigger('change');\n polygon_array = drawLoationShapes(map, response[1]);\n }\n }\n request.send();\n // このエリアを検索表示(PCのみ)\n if (document.getElementById(\"searchBtn\") == null && !navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){\n const ingressButtonDiv = document.createElement(\"div\");\n ingressButtonDiv.id = \"searchBtn\"\n new ingressControl(ingressButtonDiv, map);\n ingressButtonDiv.index = 1;\n map.controls[google.maps.ControlPosition.TOP].push(ingressButtonDiv);\n }\n });\n}\n\n// draw center circle\nconst drawCenterCircle = (map, markerData, iscCnterLatLngDefault) => {\n if (markerData.length === 0 || iscCnterLatLngDefault || !isDistanseSearch()) return;\n let here = new google.maps.Marker({\n position: centerLatLng,\n map: map,\n title: 'Here',\n });\n let markerLatLng = new google.maps.LatLng(centerLatLng);\n\n here.addListener('click', function() {\n searchInfoWindow(markerLatLng, false).open(map, here);\n });\n\n let cityCircle = new google.maps.Circle({\n strokeColor: '#ffa500',\n strokeWeight: 1,\n fillColor: '#ffa500',\n fillOpacity: 0.1,\n map: map,\n center: centerLatLng ,\n radius: radius(),\n clickable: false\n });\n}\n\nconst triggerEvent = (element, event) => {\n if (document.createEvent) {\n // IE以外\n let evt = document.createEvent(\"HTMLEvents\");\n evt.initEvent(event, true, true ); // event type, bubbling, cancelable\n return element.dispatchEvent(evt);\n } else {\n // IE\n let evt = document.createEventObject();\n return element.fireEvent(\"on\"+event, evt)\n }\n}\n\nconst isDistanseSearch = () =>{\n const url = new URL(location.href);\n let distance_id = parseInt(url.searchParams.get(\"search[distance_id]\"));\n let famous_spot_id = parseInt(url.searchParams.get(\"search[famous_spot_id]\"));\n let staying = url.searchParams.get(\"search[staying]\");\n let stations = url.searchParams.get(\"search[stations]\");\n let bus = url.searchParams.get(\"search[bus]\");\n let lat = parseInt(url.searchParams.get(\"search[lat]\"));\n let lng = parseInt(url.searchParams.get(\"search[lng]\"));\n if (distance_id && (famous_spot_id || staying || stations || bus || (lat && lng))){\n return true;\n } else {\n return false;\n }\n}\n\n// draw area outline\nconst drawLoationShapes = (map, location_shapes) =>{\n let polygon_array=[];\n // TODO: polygons, polygon の変数は?\n location_shapes.forEach(function(polygons){\n polygons.forEach(function(polygon){\n let poly = new google.maps.Polygon({\n map: map,\n paths: polygon,\n clickable: false,\n strokeWeight: 1,\n strokeColor: \"#ffa500\",\n // strokeOpacity: 0.35,\n fillColor: \"#ffa500\",\n fillOpacity: 0.1\n });\n polygon_array.push(poly);\n });\n });\n return polygon_array;\n}\n\n\n// draw shop marker\nconst drawMarker = (map, markerData) =>{\n for (var i = 0; i < markerData.length; i++) {\n markerLatLng = new google.maps.LatLng({lat: Number(markerData[i][0]['lat']), lng: Number(markerData[i][0]['lng'])});\n bounds.extend(markerLatLng);\n marker[i] = new google.maps.Marker({\n position: markerLatLng,\n map: map,\n icon: icon(markerData[i][0]),\n });\n\n if(markerData[i][0][\"listed\"] == true){\n contents=[];\n for (var j = 0; j < markerData[i].length; j++) {\n contents.push(infoWindowContent2(markerData[i][j]));\n shop_marker_index[markerData[i][j]['shop_id']] = i;\n }\n infoWindow[i] = new google.maps.InfoWindow({\n content: `${infoWindowContent(markerData[i][0])} ${contents.join('')}`\n });\n // listed_count++;\n } else {\n infoWindow[i] = new google.maps.InfoWindow({\n content: infoWindowContent(markerData[i][0])\n });\n }\n markerEvent(i);\n }\n}\n\nconst markerEvent = (i) => {\n marker[i].addListener('click', function() {\n //todoここ必要か後で確認(ローカルだとアイコン画像がでないので確認できない)\n infoWindowOpenClose(i);\n });\n}\n\n\nwindow.infoWindowOpenClose = (i) => {\n infoWindow[i].open(map, marker[i]);\n if (opend != -1 && opend != i ){\n infoWindow[opend].close(map);\n }\n opend=i;\n}\n\nconst ingressControl = (buttonDiv, map) => {\n const buttonUI = document.createElement(\"div\");\n buttonUI.style.backgroundColor = \"rgb(255, 255, 255)\";\n buttonUI.style.border = \"0\";\n buttonUI.style.boxShadow = \"0 2px 5px -1px rgba(0, 0, 0, 0.3)\";\n buttonUI.style.cursor = \"pointer\";\n buttonUI.style.margin = '110px auto 0 auto';\n buttonUI.style.padding = \"5px 30px\";\n buttonUI.style.borderRadius = \"21px\";\n if (isMedium() || isSmall()) {\n buttonUI.style.margin = '8px auto 0 auto';\n } else {\n buttonUI.style.margin = '110px auto 0 auto';\n }\n buttonUI.style.color = \"#424242\";\n buttonUI.style.fontSize = \"14px\";\n buttonUI.style.fontWeight = \"500\";\n buttonUI.style.textAlign = \"center\";\n buttonUI.title = serachTitle;\n buttonUI.innerHTML = searchTag;\n buttonDiv.style.padding = \"5px\";\n buttonDiv.appendChild(buttonUI);\n google.maps.event.addDomListener(buttonUI, \"click\", function() {\n document.querySelector(\"#modal_search_planning_area_form\").submit();\n });\n}\n\n\nconst infoWindowContent = (shop) => {\n if(shop['listed'] == false) {\n return `${shop[\"name_\"+ locale]}`\n } else {\n return '';\n }\n}\n\n\nconst infoWindowContent2 = (shop) => {\n return `