templates/_partials/map.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>
  7.         var locations = [
  8.             {% for a in adherents %}
  9.                 {% set nom = a.societe %}
  10.                 {% if a.concept == "Open Point" %}
  11.                     {% set nom = '<img src="img/logo_points2.png" style="width: 40px;">' %}
  12.                 {% endif %}
  13.             { 'position':  {  lat: {{ a.lat }}, lng: {{ a.lon }}  }, 'nom' :'{{ nom|raw }}', '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  }}'},
  14.             {% endfor %}
  15.         ]
  18.         var map, input, autocomplete;
  20.         function initAutocomplete() {
  21.             input = document.getElementById("pac-input");
  22.             input2 = document.getElementById("pac-input-2");
  24.             const options = {
  25.                 fields: ["formatted_address", "geometry", "name"],
  26.                 strictBounds: false,
  27.                 componentRestrictions: { country: "fr" },
  29.             };
  30.             autocomplete = new google.maps.places.Autocomplete(input, options);
  31.             autocomplete2 = new google.maps.places.Autocomplete(input2, options);
  33.             map = new google.maps.Map(document.getElementById("mapAdherent1"), {
  34.                 zoom: 7,
  35.                 center: { lat: 46.8066357, lng: 2.2216369},
  36.             });
  39.             var infoWindow = new google.maps.InfoWindow({
  40.                 content: "",
  41.                 disableAutoPan: true,
  42.             });
  44.             var markers = locations.map((element, i) => {
  45.                 var position = element['position'];
  46.                 var label = element['nom'];
  48.                 const svgMarker = {
  49.                 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",
  50.                 fillColor: "blue",
  51.                 fillOpacity: 0.6,
  52.                 strokeWeight: 0,
  53.                 rotation: 0,
  54.                 scale: 2,
  55.                 anchor: new google.maps.Point(15, 30),
  56.           };
  58.           let urlSvg = "{{ asset("img/map-marker.svg") | escape('js') }}"
  60.                 var marker = new google.maps.Marker({position, icon: urlSvg});
  62.                 marker.addListener("click", () => {
  63.                     if(element['concept'] == 'Open Point'){
  64.                       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>");
  66.                     }else{
  67.                       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>");
  68.                     }
  69.                     infoWindow.open(map, marker);
  70.                 });
  71.                 return marker;
  72.             });
  76.             const markerCluster = new markerClusterer.MarkerClusterer({
  77.                 map: map,
  78.                 markers: markers, 
  79.                 renderer: {
  80.                     render: ({ markers, _position: position }) => {
  81.                         return new google.maps.Marker({
  82.                             position: {
  83.                                 lat: position.lat(),
  84.                                 lng: position.lng(),
  85.                             },
  86.                             label: {
  87.                                 text: String(markers.length),
  88.                                 color: "white",
  89.                                 fontSize: '12px',
  90.                                 fontWeight: '600'
  91.                             },
  92.                             icon: "{{ asset('img/m1.png')}}",
  93.                         });
  94.                     },
  95.                 }
  96.             });
  97.             autocomplete.bindTo("bounds", map);
  99.             autocomplete.addListener("place_changed", () => {
  100.                 const place = autocomplete.getPlace();
  102.                 map.setCenter(place.geometry.location);
  103.                     map.setZoom(9);
  104.             });
  106.             autocomplete2.bindTo("bounds", map);
  108.             autocomplete2.addListener("place_changed", () => {
  109.                 const place = autocomplete2.getPlace();
  110.                 map.setCenter(place.geometry.location);
  111.                     map.setZoom(9);
  112.             });
  113.         }
  115.         initAutocomplete();
  117.         $('#formSearchMap').on('submit', function(e) {
  118.             e.preventDefault()
  119.         });
  121. </script>