google_map

// ------------------------------------------------------
// MAP pour afficher les programmes
// ------------------------------------------------------
export const googleMap = () => {
  let map = document.querySelectorAll(".google_map_js");

  if (map) {
    if (window.initMapsCookiesAllows === undefined) {
      if (map) {
        map.forEach(function (item) {
          document.querySelector(".google_markers_js").style.display = "none";
          let p = document.createElement("p");
          p.classList.add("rgpd-message");
          p.textContent =
            "La carte est désactivé ! veuillez accepter les cookies pour l'activer";
          item.appendChild(p);
        });
      }
    }

    window.initMapsCookiesAllows = function () {
      /*
       *
       *  This function will render each map when the document is ready (page has loaded)
       *
       *  @type  function
       *  @date  8/11/2013
       *  @since 5.0.0
       *
       *  @param n/a
       *  @return  n/a
       */
      // global var

      let map = document.querySelectorAll(".google_map_js");
      if (map) {
        map.forEach(function (item) {
          item.style.minHeight = "500px";
          createMap(item);
        });
      }

      function createMap(el) {
        const markers = el.querySelectorAll(".google_marker_js");

        const position = { lat: 48.5734053, lng: 7.7521113 };
        var args = {
          zoom: 13,
          markers: [],
          disableDefaultUI: false,
          center: position,
          //styles : []
        };

        // create map
        var map = new window.google.maps.Map(el, args);

        if (markers) {
          markers.forEach(function (marker) {
            addMarker(marker, map);
          });
        }

        // center map
        centerMap(map);

        map.addListener("zoom_changed", () => {
          //this.showOrHideMarkers();

          //https://medium.com/swlh/show-or-hide-markers-based-on-zoom-level-google-maps-vue-js-de9d9f36a927
          //showOrHideMarkers() {
          if (map) {
            if (map.getZoom() >= 15) {
              //showMarkers(map);
              markers.forEach(function (marker) {
                addMarker(marker, map);
              });
            }
            if (map.getZoom() < 15) {
              //clearMarkers(null);
            }
          }
          // }
        });
      }

      /*
       *  addMarker
       *
       *  This function will add a marker to the selected Google Map
       *
       *  @type  function
       *  @date  8/11/2013
       *  @since 4.3.0
       *
       *  @param $marker (jQuery element)
       *  @param map (Google Map object)
       *  @return  n/a
       */

      function addMarker(marker, map) {
        let lat = marker.getAttribute("data-lat");
        let lng = marker.getAttribute("data-lng");
        // create marker
        const point = new window.google.maps.Marker({
          position: new window.google.maps.LatLng(lat, lng), // position du marker
          map: map,
          icon: {
            path:
              "M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z",
            fillColor: "#947407",
            strokeColor: "#947407",
            fillOpacity: 1,
            scale: 2,
            anchor: new window.google.maps.Point(
              7.5, // la moitié de sa taille
              15 //  la moitié de sa taille
            ),
          },
        });
        // add to array
        map.markers.push(point);

        // if marker contains HTML, add it to an infoWindow
        if (marker.innerHTML) {
          // create info window
          var infowindow = new window.google.maps.InfoWindow({
            content: marker.innerHTML,
          });

          // show info window when marker is clicked
          point.addListener("click", () => {
            infowindow.open({
              anchor: point,
              map,
              shouldFocus: false,
            });
          });

          // Event that closes the Info Window with a click on the map
          window.google.maps.event.addListener(map, "click", function () {
            infowindow.close();
          });
        }
      }

      /*
       *  centerMap
       *
       *  This function will center the map, showing all markers attached to this map
       *
       *  @type  function
       *  @date  8/11/2013
       *  @since 4.3.0
       *
       *  @param map (Google Map object)
       *  @return  n/a
       */

      function centerMap(map) {
        // loop through all markers and create bounds
        if (map.markers) {
          var bounds = new window.google.maps.LatLngBounds();

          map.markers.forEach(function (marker) {
            let latlng = new window.google.maps.LatLng(
              marker.position.lat(),
              marker.position.lng()
            );
            bounds.extend(latlng);
          });

          // only 1 marker?
          if (map.markers.length === 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
          } else {
            // fit to bounds
            map.fitBounds(bounds);
          }
        }
      }
    };
  }
};