templates/_partials/map_home.html.twig line 1

Open in your IDE?
  1. <script src="https://maps.google.com/maps/api/js?key={{ api_key_google }}&libraries=places"></script>
  2. <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  3. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  5. <script>
  6.     var locations1 = [
  7.         {% for a in adherents %}
  8.             { 'position':  {  lat: {{ a.lat }}, lng: {{ a.lon }}  }, 'nom' :'{{ a.societe }}', 'adresse': '{{ a.adresse|replace({"\n": "", "\r": "", "\t": ""}) }}<br/>{{ a.cp }} {{ a.ville }}', 'tel' : '{{ a.tel }}', 'url' : '{{ a.urlVente }}', 'btn': '{{ a.societe }} {{ a.ville }}', 'concept':'{{ a.concept  }}'},
  9.             {% endfor %}
  10.     ]
  11.     var placeSearch;
  12.     var map, input, autocomplete;
  14.     $(".searchFormSubmit").click(function(){
  15.         $("#exampleModalCenter").modal("hide");
  16.         const myTimeout = setTimeout(searchFormModal, 1000);
  17.     });
  20.     function searchFormModal(){
  21.         map.setCenter(placeSearch.geometry.location);
  22.         map.setZoom(9);
  23.         var element = document.getElementById("scrollSmothHere");
  24.         element.scrollIntoView({behavior: "smooth"});
  25.     }
  29.     function initAutocomplete1() {
  31.         input2 = document.getElementById("pac-input-2");
  33.         const options1 = {
  34.             fields: ["formatted_address", "geometry", "name"],
  35.             strictBounds: false,
  36.             componentRestrictions: { country: "fr" },
  38.         };
  40.         autocomplete2 = new google.maps.places.Autocomplete(input2, options1);
  42.         map = new google.maps.Map(document.getElementById("mapAdherent1"), {
  43.             zoom: 7,
  44.             center: { lat: 46.8066357, lng: 2.2216369},
  45.         });
  48.         var infoWindow = new google.maps.InfoWindow({
  49.             content: "",
  50.             disableAutoPan: true,
  51.         });
  53.         var markers1 = locations1.map((element, i) => {
  54.             var position = element['position'];
  55.             var label = element['nom'];
  57.             const svgMarker = {
  58.             path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
  59.             fillColor: "blue",
  60.             fillOpacity: 0.6,
  61.             strokeWeight: 0,
  62.             rotation: 0,
  63.             scale: 2,
  64.             anchor: new google.maps.Point(15, 30),
  65.       };
  67.       let urlSvg1 = "{{ asset("img/map-marker.svg") | escape('js') }}"
  69.             var marker1 = new google.maps.Marker({position, icon: urlSvg1});
  71.             marker1.addListener("click", () => {
  72.                  if(element['concept'] == 'Open Point'){
  73.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-0'><img src='{{ asset('img/logo_points_3.png')| escape('js') }}' style='width: 130px;'></p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  75.                     }else{
  76.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-1'>"+element['nom']+"</p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  77.                     }
  78.                 infoWindow.open(map, marker1);
  79.             });
  80.             return marker1;
  81.         });
  83.         
  85.         autocomplete2.bindTo("bounds", map);
  87.         autocomplete2.addListener("place_changed", () => {
  88.             //const place = autocomplete2.getPlace();
  89.             placeSearch = autocomplete2.getPlace();
  91.             {#map.setCenter(place.geometry.location);
  92.                 map.setZoom(9);#}
  93.         });
  94.     }
  96.     initAutocomplete1();
  98.     $('#formSearchMap').on('submit', function(e) {
  99.         e.preventDefault()
  100.     });
  102.     </script>
  108.         <script>
  110.         var locations = [
  111.             {% for a in adherents %}
  112.             { 'position':  {  lat: {{ a.lat }}, lng: {{ a.lon }}  }, 'nom' :'{{ a.societe }}', 'adresse': '{{ a.adresse|replace({"\n": "", "\r": "", "\t": ""}) }}<br/>{{ a.cp }} {{ a.ville }}', 'tel' : '{{ a.tel }}', 'url' : '{{ a.urlVente }}', 'btn': '{{ a.societe }} {{ a.ville }}', 'concept':'{{ a.concept  }}'},
  113.             {% endfor %}
  114.         ]
  116.         var placeSearch;
  117.         var map, input, autocomplete;
  119.         $(".searchFormSubmit").click(function(){
  120.             $("#exampleModalCenter").modal("hide");
  121.             const myTimeout = setTimeout(searchFormModal, 1000);
  122.         });
  125.         function searchFormModal(){
  126.             map.setCenter(placeSearch.geometry.location);
  127.             map.setZoom(9);
  128.             var element = document.getElementById("scrollSmothHere");
  129.             element.scrollIntoView({behavior: "smooth"});
  130.         }
  134.         function initAutocomplete1() {
  136.             input2 = document.getElementById("pac-input-2");
  138.             const options1 = {
  139.                 fields: ["formatted_address", "geometry", "name"],
  140.                 strictBounds: false,
  141.                 componentRestrictions: { country: "fr" },
  143.             };
  145.             autocomplete2 = new google.maps.places.Autocomplete(input2, options1);
  147.             map = new google.maps.Map(document.getElementById("mapAdherent1"), {
  148.                 zoom: 7,
  149.                 center: { lat: 46.8066357, lng: 2.2216369},
  150.             });
  153.             var infoWindow = new google.maps.InfoWindow({
  154.                 content: "",
  155.                 disableAutoPan: true,
  156.             });
  158.             var markers1 = locations1.map((element, i) => {
  159.                 var position = element['position'];
  160.                 var label = element['nom'];
  162.                 const svgMarker = {
  163.                 path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
  164.                 fillColor: "blue",
  165.                 fillOpacity: 0.6,
  166.                 strokeWeight: 0,
  167.                 rotation: 0,
  168.                 scale: 2,
  169.                 anchor: new google.maps.Point(15, 30),
  170.           };
  172.           let urlSvg1 = "{{ asset("img/map-marker.svg") | escape('js') }}"
  174.                 var marker1 = new google.maps.Marker({position, icon: urlSvg1});
  176.                 marker1.addListener("click", () => {
  177.                    if(element['concept'] == 'Open Point'){
  178.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-0'><img src='{{ asset('img/logo_points_3.png')| escape('js') }}' style='width: 130px;'></p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  180.                     }else{
  181.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-1'>"+element['nom']+"</p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  182.                     }
  183.                     infoWindow.open(map, marker1);
  184.                 });
  185.                 return marker1;
  186.             });
  187.             
  189.             autocomplete2.bindTo("bounds", map);
  191.             autocomplete2.addListener("place_changed", () => {
  192.                 placeSearch = autocomplete2.getPlace();
  193.             });
  194.         }
  196.         initAutocomplete1();
  198.         $('#formSearchMap').on('submit', function(e) {
  199.             e.preventDefault()
  200.         });
  202.         </script>
  209.         <script>
  211.         var locations = [
  212.             {% for a in adherents %}
  213.             { 'position':  {  lat: {{ a.lat }}, lng: {{ a.lon }}  }, 'nom' :'{{ a.societe }}', 'adresse': '{{ a.adresse|replace({"\n": "", "\r": "", "\t": ""}) }}<br/>{{ a.cp }} {{ a.ville }}', 'tel' : '{{ a.tel }}', 'url' : '{{ a.urlVente }}', 'btn': '{{ a.societe }} {{ a.ville }}', 'concept':'{{ a.concept  }}'},
  214.             {% endfor %}
  215.         ]
  217.         var placeSearch;
  218.         var map, input, autocomplete;
  220.         $('#formSearchMap').on('submit', function(e) {
  221.             e.preventDefault();
  222.             const myTimeout = setTimeout(searchForm, 1000);
  223.         });
  225.         function searchForm(){
  226.             map.setCenter(placeSearch.geometry.location);
  227.             map.setZoom(9);
  228.             var element = document.getElementById("scrollSmothHere");
  229.             element.scrollIntoView({behavior: "smooth"});
  230.         }
  232.         function initAutocomplete() {
  233.             input = document.getElementById("pac-input");
  235.             const options = {
  236.                 fields: ["formatted_address", "geometry", "name"],
  237.                 strictBounds: false,
  238.                 componentRestrictions: { country: "fr" },
  240.             };
  241.             autocomplete = new google.maps.places.Autocomplete(input, options);
  243.             map = new google.maps.Map(document.getElementById("mapAdherent"), {
  244.                 zoom: 7,
  245.                 center: { lat: 46.8066357, lng: 2.2216369},
  246.             });
  249.             var infoWindow = new google.maps.InfoWindow({
  250.                 content: "",
  251.                 disableAutoPan: true,
  252.             });
  254.             var markers = locations.map((element, i) => {
  255.                 var position = element['position'];
  256.                 var label = element['nom'];
  258.                 const svgMarker = {
  259.                 path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
  260.                 fillColor: "blue",
  261.                 fillOpacity: 0.6,
  262.                 strokeWeight: 0,
  263.                 rotation: 0,
  264.                 scale: 2,
  265.                 anchor: new google.maps.Point(15, 30),
  266.           };
  268.             let urlSvg = "{{ asset("img/map-marker.svg") | escape('js') }}"
  270.             var marker = new google.maps.Marker({position, icon: urlSvg});
  272.                 marker.addListener("click", () => {
  273.                      if(element['concept'] == 'Open Point'){
  274.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-0'><img src='{{ asset('img/logo_points_3.png')| escape('js') }}' style='width: 130px;'></p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  276.                     }else{
  277.                       infoWindow.setContent("<div style='font-fmily: LATO;' class='mapInfoWindow text-center'><p class='mb-1'>"+element['nom']+"</p><p class='mb-1'>"+element['adresse']+"</p><p class='mb-1'>Tel: "+element['tel']+"</p><a href='"+element['url']+"' class='btn btn-sm blue_points_background btn-gmap mt-2 mb-2' target='_blank'>Accéder à mon centre</a></div>");
  278.                     }
  279.                     infoWindow.open(map, marker);
  280.                 });
  281.                 return marker;
  282.             });
  285.             // Marker clusterer
  286.             const markerCluster = new markerClusterer.MarkerClusterer({
  287.                 map: map,
  288.                 markers: markers, 
  289.                 renderer: {
  290.                     render: ({ markers, _position: position }) => {
  291.                         return new google.maps.Marker({
  292.                             position: {
  293.                                 lat: position.lat(),
  294.                                 lng: position.lng(),
  295.                             },
  296.                             label: {
  297.                                 text: String(markers.length),
  298.                                 color: "white",
  299.                                 fontSize: '12px',
  300.                                 fontWeight: '600'
  301.                             },
  302.                             icon: "{{ asset('img/m1.png')}}",
  303.                         });
  304.                     },
  305.                 }
  306.                 });
  309.             autocomplete.bindTo("bounds", map);
  311.             autocomplete.addListener("place_changed", () => {
  312.                 placeSearch = autocomplete.getPlace();
  313.             });
  315.         }
  317.         initAutocomplete();
  319.         </script>