templates/index/map.html.twig line 1

Open in your IDE?
  1. {% extends 'index/layout.html.twig' %}
  3. {% block title %}地図から探す{% endblock %}
  5. {% block stylesheet %}
  6.   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  7.   <link rel="stylesheet" href="/css/map.css">
  8. {% endblock %}
  10. {% block header %}
  11.   <header>
  12.     <div class="back">
  13.       <a href="{{ path('index') }}"><img src="img/detail/arrow.png" alt="戻る"></a>
  14.     </div>
  15.     <a href="#navi" class="navi-trigger drawer-toggle">
  16.         <span class="navi-icon">
  17.             <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"></svg>
  18.         </span>
  19.     </a>
  21.     <button id="geolocation" style="" class="btn-location">
  22.       <svg height="20px" version="1.1" viewBox="0 0 16 16" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="#000000" id="Group" transform="translate(-144.000000, -192.000000)"><path d="M144.017456,200 L160.019653,192.043091 L152,208.088623 L152,200 L144.017456,200 Z M144.017456,200" id="Path 221"/></g></g></svg>
  23.     </button>
  24.   </header>
  25. {% endblock %}
  27. {% block main %}
  28.   <main>
  29.     <div id="map-container"></div>
  31.     <section>
  32.       <div id="map-footer-container" class="footer-panel" style="max-height:300px;">
  33. {#        {% for shop in shops %}#}
  34. {#        <div class="shop_wr" id="shop-{{ shop.id }}" data-shop="{{ shop.id }}" data-lat="{{ shop.coordinate.latitude }}" data-lng="{{ shop.coordinate.longitude }}">#}
  35. {#          <div class="food_wr">#}
  36. {#            <ul class="clearfix slick-carousel">#}
  37. {#              {% for menu in shop.menus %}#}
  38. {#                <li>#}
  39. {#                  <a href="{{ path('shop', {id: shop.id} )}}" class="shadow"> </a>#}
  40. {#                  <div class="food_img" style="border-radius: 5px;" data-img="{{ menu.image|default('/img/no-image.jpeg') }}"></div>#}
  41. {#                  {% if not shop.acceptable %}#}
  42. {#                    <a href="{{ path('shop', {id: shop.id} )}}" class="shop_unacceptable">受付時間外です</a>#}
  43. {#                  {% endif %}#}
  44. {#                  <h3>{{ menu.name }}</h3>#}
  45. {#                  <div class="price">¥ {{ menu.price|number_format }} -</div>#}
  46. {#                </li>#}
  47. {#              {% endfor %}#}
  48. {#            </ul>#}
  49. {#          </div>#}
  50. {#          <div class="info_wr">#}
  51. {#            <a href="{{ path('shop', {id: shop.id} )}}" class="details_wr">#}
  52. {#              <h2>{{ shop.name }}</h2>#}
  53. {#              <div class="categories">{{ shop.categories|join(' / ') }}</div>#}
  54. {#              <ul class="provide">#}
  55. {#                {% if shop.toGo %}<li>テイクアウト</li>{% endif %}#}
  56. {#                {% if shop.delivery %}<li>デリバリー</li>{% endif %}#}
  57. {#                <li class="indication">提供時間目安 <span>{{ shop.estimatedMinutes|default('-') }}分</span></li>#}
  58. {#              </ul>#}
  59. {#            </a>#}
  60. {#          </div>#}
  61. {#        </div>#}
  62. {#        {% endfor %}#}
  63.       </div>
  65.     </section>
  66.   </main>
  67. {% endblock %}
  69. {% block js %}
  70.   <script async defer src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AIzaSyACq30V5WAPj9fOOALRSbMp-sgnuY3N2I4&callback=initMap"></script>
  71.   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  72.   <script>
  73.     var map;
  74.     var position = {lat: 36.69084630695481, lng: 137.21299807365202};
  75.     var slickOptions = {
  76.       variableWidth: true,
  77.       arrows: false,
  78.       dots: false
  79.     };
  80.     var bounds;
  81.     var pinCache = {};
  82.     var currentMarkers = [];
  83.     var fetchTimer;
  85.     $(function () {
  86.       // $('.slick-carousel').slick({
  87.       //   variableWidth: true,
  88.       //   arrows: false,
  89.       //   dots: false
  90.       // });
  92.       $('#geolocation').click(function () {
  93.         if (!navigator.geolocation) {
  94.           return false;
  95.         }
  97.         navigator.geolocation.getCurrentPosition(function (result) {
  98.           position = {lat: result.coords.latitude, lng: result.coords.longitude};
  99.           map.panTo(position);
  100.         });
  101.       });
  102.     });
  104.     // $.ajax({
  105.     //   url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDxtlmq6i3t7yKHPlFdgvRLZh2dN4XnEok',
  106.     //   method: 'post',
  107.     //   contentType: 'application/json',
  108.     //   data: {
  109.     //
  110.     //   },
  111.     //   crossDomain: true
  112.     // }).done(function(data) {
  113.     //   position = data.location;
  114.     //   if (map) {
  115.     //     map.setCenter(position);
  116.     //   }
  117.     // });
  118.     function loadPins() {
  119.       $.ajax({
  120.         url: '/pins?lat1=' + bounds.getSouthWest().lat() + '&lng1=' + bounds.getSouthWest().lng() + '&lat2=' + bounds.getNorthEast().lat() + '&lng2=' + bounds.getNorthEast().lng(),
  121.         type: 'json'
  122.       }).done(function (json) {
  123.         $.each(json, function (key, shop) {
  124.           if (!pinCache[shop.id]) {
  125.             pinCache[shop.id] = shop;
  126.             // Insert HTML
  127.             var $html = $(shop.html);
  130.             var marker = new google.maps.Marker({
  131.               position: {lat: parseFloat(shop.latitude), lng: parseFloat(shop.longitude)},
  132.               map: map,
  133.               draggable: false,
  134.               icon: {
  135.                 url: '/img/map-marker.png',
  136.                 scaledSize: new google.maps.Size(40, 40),
  137.                 size: new google.maps.Size(80, 80),
  138.                 origin: new google.maps.Point(0, 0),
  139.                 anchor: new google.maps.Point(20, 38)
  140.               }
  141.             });
  143.             marker.addListener('click', function() {
  144.               map.panTo(marker.getPosition());
  145.               $('.shop_wr').hide();
  147.               $html.show();
  148.               $('.footer-panel').toggleClass('open', true);
  149.             });
  151.             $html.appendTo($('#map-footer-container'));
  152.             // $('.slick-carousel').each(function () {
  153.             //   if (!$(this).is('.slick-initialized')) {
  154.             //     $(this).find('.food_img').each(function () {
  155.             //       $(this).css({
  156.             //         'background-image': 'url(' + $(this).data('img') + ')'
  157.             //       })
  158.             //     });
  159.             //     $(this).slick(slickOptions);
  160.             //   }
  161.             // });
  162.           }
  163.         });
  164.       });
  165.     }
  167.     function initMap() {
  168.       $(function () {
  169.         map = new google.maps.Map($('#map-container').get(0), {
  170.           center: position,
  171.           zoom: 16,
  172.           disableDefaultUI: true
  173.         });
  175.         map.addListener('click', function () {
  176.           $('.footer-panel').toggleClass('open', false);
  177.         });
  179.         // setTimeout(function () {
  180.         //   $('[data-shop]').each(function () {
  181.         //     var markerPosition = {lat: parseFloat($(this).data('lat')), lng: parseFloat($(this).data('lng'))};
  182.         //
  183.         //     var $panel = $(this);
  184.         //
  185.         //     var marker = new google.maps.Marker({
  186.         //       position: markerPosition,
  187.         //       map: map,
  188.         //       draggable: false,
  189.         //       icon: {
  190.         //         url: '/img/map-marker.png',
  191.         //         scaledSize: new google.maps.Size(40, 40),
  192.         //         size: new google.maps.Size(80, 80),
  193.         //         origin: new google.maps.Point(0, 0),
  194.         //         anchor: new google.maps.Point(20, 38)
  195.         //       }
  196.         //     });
  197.         //
  198.         //     marker.addListener('click', function() {
  199.         //       //console.log($panel);
  200.         //       var $carousel = $panel.find('.slick-carousel');
  201.         //       map.panTo(marker.getPosition());
  202.         //       $('.shop_wr').hide();
  203.         //       if (!$carousel.is('.slick-initialized')) {
  204.         //         $carousel.find('.food_img').each(function () {
  205.         //           $(this).css({
  206.         //             'background-image': 'url(' + $(this).data('img') + ')'
  207.         //           })
  208.         //         });
  209.         //         $carousel.slick(slickOptions);
  210.         //       }
  211.         //       $panel.show();
  212.         //       $('.footer-panel').toggleClass('open', true);
  213.         //     });
  214.         //
  215.         //   });
  216.         // }, 100);
  218.         bounds = map.getBounds();
  220.         map.addListener('bounds_changed', function () {
  221.           bounds = map.getBounds();
  222.           console.log(bounds.getCenter().toString());
  223.           //console.log(bounds.getNorthEast().toString(), bounds.getSouthWest().toString());
  224.           //loadPins();
  225.           if (fetchTimer) {
  226.             clearTimeout(fetchTimer);
  227.           }
  229.           fetchTimer = setTimeout(loadPins, 200);
  230.         });
  231.       });
  232.     }
  233.   </script>
  234. {% endblock %}