templates/common/components/gmap.html.twig line 1

Open in your IDE?
  1. <div class="map-container">
  2.     <div class="map"></div>
  3. </div>
  5. <script>
  6.     const locations = {{ markers|default("[]")|raw }};
  8.     const pin = '/img/pin.png';
  10.     window.map_init = () => {
  11.         const mapElement = document.querySelector(".map-container > .map");
  13.         if (!mapElement) {
  14.             return;
  15.         }
  17.         const map = new google.maps.Map(mapElement, {
  18.             center: {lat: 49.5, lng: -30},
  19.             zoom: 3,
  20.             minZoom: 3,
  21.             zoomControl: true,
  22.             mapTypeControl: false,
  23.             scaleControl: false,
  24.             streetViewControl: false,
  25.             rotateControl: false,
  26.             fullscreenControl: false,
  27.             scrollwheel: false,
  28.             styles: [
  29.                 {
  30.                     featureType: "administrative",
  31.                     stylers: [
  32.                         {hue: "#000000"},
  33.                         {lightness: -100},
  34.                         {visibility: "off"},
  35.                     ],
  36.                 },
  37.                 {
  38.                     featureType: "landscape",
  39.                     elementType: "geometry",
  40.                     stylers: [
  41.                         {hue: "#dddddd"},
  42.                         {saturation: -100},
  43.                         {lightness: -3},
  44.                         {visibility: "on"},
  45.                     ],
  46.                 },
  47.                 {
  48.                     featureType: "landscape",
  49.                     elementType: "labels",
  50.                     stylers: [
  51.                         {hue: "#000000"},
  52.                         {saturation: -100},
  53.                         {lightness: -100},
  54.                         {visibility: "off"},
  55.                     ],
  56.                 },
  57.                 {
  58.                     featureType: "poi",
  59.                     stylers: [
  60.                         {hue: "#000000"},
  61.                         {saturation: -100},
  62.                         {lightness: -100},
  63.                         {visibility: "off"},
  64.                     ],
  65.                 },
  66.                 {
  67.                     featureType: "road",
  68.                     elementType: "geometry",
  69.                     stylers: [
  70.                         {hue: "#bbbbbb"},
  71.                         {saturation: -100},
  72.                         {lightness: 26},
  73.                         {visibility: "on"},
  74.                     ],
  75.                 },
  76.                 {
  77.                     featureType: "road",
  78.                     elementType: "labels",
  79.                     stylers: [
  80.                         {hue: "#ffffff"},
  81.                         {saturation: -100},
  82.                         {lightness: 100},
  83.                         {visibility: "off"},
  84.                     ],
  85.                 },
  86.                 {
  87.                     featureType: "road.local",
  88.                     stylers: [
  89.                         {hue: "#ffffff"},
  90.                         {saturation: -100},
  91.                         {lightness: 100},
  92.                         {visibility: "on"},
  93.                     ],
  94.                 },
  95.                 {
  96.                     featureType: "transit",
  97.                     elementType: "labels",
  98.                     stylers: [
  99.                         {hue: "#000000"},
  100.                         {lightness: -100},
  101.                         {visibility: "off"},
  102.                     ],
  103.                 },
  104.                 {
  105.                     featureType: "water",
  106.                     stylers: [
  107.                         {saturation: -100}
  108.                     ]
  109.                 },
  110.                 {
  111.                     featureType: "water",
  112.                     elementType: "geometry",
  113.                     stylers: [
  114.                         {saturation: -100},
  115.                         {lightness: 100},
  116.                         {visibility: "on"},
  117.                     ],
  118.                 },
  119.                 {
  120.                     featureType: "water",
  121.                     elementType: "geometry.fill",
  122.                     stylers: [
  123.                         {color: "#fbfafa"}
  124.                     ],
  125.                 },
  126.                 {
  127.                     featureType: "water",
  128.                     elementType: "labels",
  129.                     stylers: [
  130.                         {hue: "#000000"},
  131.                         {saturation: -100},
  132.                         {lightness: -100},
  133.                         {visibility: "off"},
  134.                     ],
  135.                 },
  136.             ],
  137.         });
  139.         const latLngList = [];
  141.         for (const location of locations) {
  142.             const position = new google.maps.LatLng(location["coords"]);
  143.             latLngList.push(position);
  145.             const marker = new google.maps.Marker({
  146.                 position: position,
  147.                 map: map,
  148.                 icon: {
  149.                     url: pin,
  150.                     labelOrigin: new google.maps.Point(-30, 20),
  151.                 },
  152.                 title: location.title,
  153.                 animation: google.maps.Animation.DROP,
  154.                 label: {
  155.                     color: "#000",
  156.                     fontWeight: "bold",
  157.                     fontSize: "12px",
  158.                     text: location.city,
  159.                 },
  160.                 optimized: false,
  161.                 visible: true,
  162.             });
  164.             if (location.uri) {
  165.                 google.maps.event.addListener(marker, "click", function () {
  166.                     window.location.href = location.uri;
  167.                 });
  168.             }
  169.         }
  171.         if (latLngList.length > 1) {
  172.             if (latLngList.length > 2 && window.innerWidth < 600) {
  173.                 map.fitBounds({
  174.                     south: 21.639712295652373,
  175.                     west: -21.062955980857527,
  176.                     north: 66.29012644366672,
  177.                     east: 44.85501276914247,
  178.                 });
  179.             } else {
  180.                 const bounds = new google.maps.LatLngBounds();
  181.                 for (const latLng of latLngList) {
  182.                     bounds.extend(latLng);
  183.                 }
  184.                 map.fitBounds(bounds);
  185.             }
  186.         }
  187.     };
  188. </script>