templates/pages/map_search/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}マップ検索 |【公式】「とこワク」は三重県のワーケーションポータルサイト{% endblock %}
  4. {% block meta_og_title %}マップ検索 |【公式】「とこワク」は三重県のワーケーションポータルサイト{% endblock %}
  5. {% block meta_twitter_title %}マップ検索 |【公式】「とこワク」は三重県のワーケーションポータルサイト{% endblock %}
  6. {% block meta_description %}
  7. {{ parent() }}
  8. エリアを絞り込んでマップ検索が可能です。
  9. {% endblock %}
  10. {% block meta_og_description %}
  11. {{ parent() }}
  12. エリアを絞り込んでマップ検索が可能です。
  13. {% endblock %}
  15. {% block javascripts %}
  16. <script>
  17. window.icon_facility = "{{ asset('build/images/map_search/facility_icon.png') }}";
  18. window.icon_workspace = "{{ asset('build/images/map_search/workspace_icon.png') }}";
  19. window.icon_activity = "{{ asset('build/images/map_search/activity_icon.png') }}";
  20. window.icon_mobility = "{{ asset('build/images/map_search/mobility_icon.png') }}";
  21. </script>
  22.   {{ parent() }}
  23. {% endblock %}
  24. {% block extraHeader %}
  25. <link rel="canonical" content="{{ absolute_url(path('map_search_index')) }}">
  26. {% endblock %}
  28. {% block body %}
  29. <main id="map_search">
  30.   <section class="guide">
  31.     <div class="guideContainer">
  32.       <div class="guideContainer__breadcrumbs">
  33.         <a href="{{ path('top') }}">{{'common.top'|trans|raw }}</a>
  34.         <span class="guideContainerBreadcrumbs__arrow"></span>
  35.         <div>{{ 'map_search.title'|trans }}</div>
  36.       </div>
  37.     </div>
  38.   </section>
  39.   <section class="mapSearchButton">
  40.     <a href="{{ path('top') }}" class="buttonContainer__back">
  41.         <span></span>
  42.         {{ 'common.return'|trans }}
  43.     </a>
  44.     <div class="mapSearchButton__type">
  45.       <div class="mapSearchButtonType__item">
  46.         <div class="mapSearchButtonTypeItem__icon icon--activity">
  47.           <img src="{{ asset('build/images/map_search/icon_activity.png') }}" alt="">
  48.         </div>
  49.         <h5>{{ 'common.entry.activity'|trans }}・{{ 'common.entry.mobility'|trans }} <span>{{ '%03d'|format(counts.2.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  50.         <label class="mapSearch__checkbox">
  51.           <input type="checkbox" name="category" value="8">
  52.           <span></span>
  53.         </label>
  54.       </div>
  55.       <div class="mapSearchButtonType__item">
  56.         <div class="mapSearchButtonTypeItem__icon icon--facility">
  57.           <img src="{{ asset('build/images/map_search/icon_facility.png') }}" alt="">
  58.         </div>
  59.         <h5>{{ 'common.entry.facility'|trans }} <span>{{ '%03d'|format(counts.0.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  60.         <label class="mapSearch__checkbox">
  61.           <input type="checkbox" name="category" value="2">
  62.           <span></span>
  63.         </label>
  64.       </div>
  65.       <div class="mapSearchButtonType__item">
  66.         <div class="mapSearchButtonTypeItem__icon icon--workspace">
  67.           <img src="{{ asset('build/images/map_search/icon_workspace.png') }}" alt="">
  68.         </div>
  69.         <h5>{{ 'common.entry.workspace'|trans }} <span>{{ '%03d'|format(counts.1.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  70.         <label class="mapSearch__checkbox">
  71.           <input type="checkbox" name="category" value="4">
  72.           <span></span>
  73.         </label>
  74.       </div>
  75.     </div>
  76.     <label class="listmap__checkbox">
  77.       <input type="checkbox" class="js-listmap-toggle">
  78.       <span></span>
  79.     </label>
  80.   </section>
  82.   <section class="mapSearchResult">
  83.     <div class="mapSearchResult__list js-list">
  84.       <div class="js-map-search__list_container"></div>
  85.     </div>
  86.     <div class="mapSearchResult__map js-map">
  87.       <div
  88.         id="js-map-search"
  89.         class="js-map-search"
  90.         data-api-endpoint="{{ path('map_search_api') }}"
  91.       ></div>
  92.       <div class="mapSearchResultMap__button">
  93.         <div class="js-map-search__area-choice">
  94.           <label class="mapSearch__radio">
  95.             <input type="radio" name="mapsearch_radio" checked value="hokusei">
  96.             <span>{{ 'map_search.map-inner.area1'|trans }}</span>
  97.           </label>
  98.           <label class="mapSearch__radio">
  99.             <input type="radio" name="mapsearch_radio" value="chunansei">
  100.             <span>{{ 'map_search.map-inner.area2'|trans }}</span>
  101.           </label>
  102.           <label class="mapSearch__radio">
  103.             <input type="radio" name="mapsearch_radio" value="isesima">
  104.             <span>{{ 'map_search.map-inner.area3'|trans }}</span>
  105.           </label>
  106.           <label class="mapSearch__radio">
  107.             <input type="radio" name="mapsearch_radio" value="iga">
  108.             <span>{{ 'map_search.map-inner.area4'|trans }}</span>
  109.           </label>
  110.           <label class="mapSearch__radio">
  111.             <input type="radio" name="mapsearch_radio" value="kisyu">
  112.             <span>{{ 'map_search.map-inner.area5'|trans }}</span>
  113.           </label>
  114.         </div>
  115.       </div>
  116.     </div>
  117.     <div class="mapSearchButton__type">
  118.       <div class="mapSearchButtonType__item">
  119.         <div>
  120.           <div class="mapSearchButtonTypeItem__icon icon--activity">
  121.             <img src="{{ asset('build/images/map_search/icon_activity.png') }}" alt="">
  122.           </div>
  123.           <h5>{{ 'common.entry.activity'|trans }}・<br>{{ 'common.entry.mobility'|trans }} <span>{{ '%03d'|format(counts.2.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  124.         </div>
  125.         <label class="mapSearch__checkbox">
  126.           <input type="checkbox" name="category" value="8">
  127.           <span></span>
  128.         </label>
  129.       </div>
  130.       <div class="mapSearchButtonType__item">
  131.         <div>
  132.           <div class="mapSearchButtonTypeItem__icon icon--facility">
  133.             <img src="{{ asset('build/images/map_search/icon_facility.png') }}" alt="">
  134.           </div>
  135.           <h5>{{ 'common.entry.facility'|trans }} <span>{{ '%03d'|format(counts.0.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  136.         </div>
  137.         <label class="mapSearch__checkbox">
  138.           <input type="checkbox" name="category" value="2">
  139.           <span></span>
  140.         </label>
  141.       </div>
  142.       <div class="mapSearchButtonType__item">
  143.         <div>
  144.           <div class="mapSearchButtonTypeItem__icon icon--workspace">
  145.             <img src="{{ asset('build/images/map_search/icon_workspace.png') }}" alt="">
  146.           </div>
  147.           <h5>{{ 'common.entry.workspace'|trans }} <span>{{ '%03d'|format(counts.1.entry_count) }}</span> {{ 'map_search.unit'|trans }}</h5>
  148.         </div>
  149.         <label class="mapSearch__checkbox">
  150.           <input type="checkbox" name="category" value="4">
  151.           <span></span>
  152.         </label>
  153.       </div>
  154.     </div>
  155.   </section>
  156. </main>
  157.   <script defer src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}&callback=initMapSearch"></script>
  158. {% endblock %}