spinn_mit/loadMap.js

 const zuerich_bounds = {
  north: 47.43590970260092,
  south: 47.278703309031846,
  west: 8.40742642179812,
  east: 8.680047733589026,
};

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
  mapId: "fd4581e1612d9ef",
  center: {lat: 47.36972459746934, lng: 8.53404830446534},
  restriction: {
      latLngBounds: zuerich_bounds,
     strictBounds: false,
    },
  zoom: 13,
  disableDefaultUI: true,
  gestureHandling: "greedy"

});
infoWindow = new google.maps.InfoWindow();



const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();


addMarkers();









function addMarkers(){

  let  url = "system/alleInfosHolen.php";
  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((markerData) => {
      let mostLikes = 1;
  
      for (let i = 0; i < markerData.length; i++) {
        if(markerData[i].likes >= mostLikes){
          mostLikes = markerData[i].likes;
        } 
        
      }

      

      console.log(mostLikes);
      

      let markerSizeFactor = 1/mostLikes*100;
      
      
     for (let i = 0; i < markerData.length; i++) {

        let markerIMGcounter = markerData[i].id % 6;

        

        let likes = markerData[i].likes 

        

        

        let markersizeDelta =  likes * markerSizeFactor /100 * 80
        let markersize = markersizeDelta + 40
        console.log(markersize);
        
        
      setTimeout(() => {
        
       if (markerData[i].sichtbarkeit = 1) {
        
         const marker = new google.maps.Marker({
             position: {lat: markerData[i].koordinatenLat, lng: markerData[i].koordinatenLng},
             map: map,
             title: markerData[i].titel,
             icon: {
               url: "/images/Marker_" + markerIMGcounter + ".svg",
               scaledSize: new google.maps.Size(markersize, markersize),
               
             },
             animation: google.maps.Animation.DROP,
             zIndex: 100,

           });

           
         marker.addListener("click", () => {
          ideeAnzeigen(markerData[i]);
          
          openOverlay();
          
         })
       }
       else {

       }
      }, Math.floor(Math.random() * 250 + 100));
     }
    })
    .catch(function(error) {
      console.log('Error!: ' + error.message);
    });
  }

// NEUE IDEE ERFASSEN
  map.addListener("click", (mapsMouseEvent) => {

    let mousePosition = mapsMouseEvent.latLng;
    newMarker(mousePosition);

    setTimeout(() => {
      openOverlay();
    }, 800);

    geocodeLatLng(geocoder, map, infowindow, mousePosition);

    function geocodeLatLng(geocoder, map, infowindow, mousePosition) {

      geocoder
        .geocode({ location: mousePosition, })
        .then((response) => {
          if (response.results[0]) {
            let ergebnis = response.results[0].formatted_address;
            let indexOf = ergebnis.lastIndexOf(",");
            ergebnis = ergebnis.slice(0,indexOf);
            formularErstellen(mousePosition, ergebnis);
          } else {
            //console.log("Bitte Adresse eintragen");
            let error = "Bitte Adresse eintragen";
            formularErstellen(mousePosition, error);
          }
        })
        .catch((e) => window.alert("Geocoder failed due to: " + e));
    }
  })



function newMarker(mousePosition) {
  const newMarker = new google.maps.Marker({

      position: mousePosition,
      map: map,
      animation: google.maps.Animation.DROP,

    });

    newMarker.setMap(map);

    let icon = {url:"/images/ort.png", size: new google.maps.Size(30, 30)};

    newMarker.setIcon("/images/newMarker.png");

    $("#cancel").click(function() {
      newMarker.setMap(null);
    })

}


// CHANCEL location_button

// LOCATION BUTTON

  let location_button = document.getElementById("currentLocation");
  // map.controls[google.maps.ControlPosition.TOP_CENTER].push("location_button");
  location_button.addEventListener("click", () => {
  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };

        const marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: {
              url: "/images/current_location.gif",
            animation: google.maps.Animation.DROP,
            scaledSize: new google.maps.Size(50, 50),
            },
            zIndex: 999
        });

        map.setCenter(pos);
      },
      () => {
        handleLocationError(true, infoWindow, map.getCenter());
      }
    );
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

});
}