Google Map JS

The_C · 18. Okt. 2024

Hallo Experten,
hab mir für meine Website eine Google Map zusammengebaut und jetzt bekomme ich eine Warnung in der Console:

main.js:385 Google Maps JavaScript API: A Map's styles property cannot be set when a mapId is present. When a mapId is present, Map styles are controlled via the cloud console. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling
main.js:146 Uncaught (in promise) InvalidValueError: Unknown property 'icon' of AdvancedMarkerElement at _.lk (main.js:146:373) at zk (main.js:150:234) at ZP.Dj (main.js:362:128) at new ZP (marker.js:118:401) at initMap (googleMap.js?1729241584:63:20) at main.js:246:227 at main.js:245:235

Hab mir das mal auf der Seite angeschaut wie mein Code aufgebaut werden soll das diese Warnung verschwindet doch leider habe ich keinen Erfolg ich bekomme immer mehr Warnungen und Fehler wenn ich das ausführe wie beschrieben.
Weis jemand von Euch wie ich meinen Code korrigieren muss das alle Warnungen verschwinden meine JS Wissen reicht leider nicht aus um das zu machen und deswegen bitte ich hier um Hilfe.
Danke schon mal letzt im voraus!

Hier mal mein Code der soweit funktioniert bis auf die eine Warnung.

Javascript:

function initMap() {

  const markers = [
    {
      placeTo: "Wettbewerb",
      locationName: "Kirschenhalle",
      lat: 47.03356378798437,
      lng: 15.29594796797921,
      address: "Hitzendorf 176 <br> 8151 Hitzendorf <br> Österreich",
    },
    {
      placeTo: "Registrierung",
      locationName: "Arnold Schwarzenegger Museum",
      lat: 47.07214363603234,
      lng: 15.362710011247016,
      address: "Linakstraße 9 <br> 8051 Thal <br> Österreich",
    },
  ];

  const prefix = "/_assets/b7de12eb5e07b90434af16b51b24e2db/";
  const fehMarkerActive = `${prefix}/Images/gmap_marker_active.png`;
  const fehMarkerDefault = `${prefix}/Images/gmap_marker.png`;

  // Karte Zentrieren
  const centerMap = { lat: 47.0691891, lng: 15.2515881 };

  const mapOptions = {
    center: centerMap,
    zoom: 10,
    disableDefaultUI: false,
    // mapId: "RCmap",
    styles: [
      {
        featureType: "administrative.province",
        elementType: "labels.icon",
        stylers: [
          {
            visibility: "on",
          },
        ],
      },
    ],
  };

  const map = new google.maps.Map(document.getElementById("RCmap"), mapOptions);

  const infoWindow = new google.maps.InfoWindow({
    minWidht: 300,
    maxWidth: 300,
  });

  const bounds = new google.maps.LatLngBounds();

  /**
   * Loop through all markers
   */
  for (let i = 0; i < markers.length; i++) {
    const marker = new google.maps.Marker({
    // Funktioniert leider nicht mit AdvancedMarkerElement
      // const marker = new google.maps.marker.AdvancedMarkerElement({
      position: { lat: markers[i]["lat"], lng: markers[i]["lng"] },
      map: map,
      icon: fehMarkerDefault,
    });

    function createInfoWindows() {
      const infoWindowContent = `
        <div class="feh-content">
        <h5 style="background-color: #2a93c9; color: white; border-radius: 10px; padding: 10px; text-align: center;">${markers[i]["placeTo"]}</h5>
          <h6>${markers[i]["locationName"]}</h6>
          <address>
          <p>${markers[i]["address"]}</p>
        </div>
      `;

      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(infoWindowContent);
        infoWindow.open(map, marker);
      });
    }
    createInfoWindows();

    // Hover-Effekte hinzufügen
    google.maps.event.addListener(marker, "mouseover", function () {
      marker.setIcon(fehMarkerActive); // Setze das Hover-Bild
    });

    google.maps.event.addListener(marker, "mouseout", function () {
      marker.setIcon(fehMarkerDefault); // Setze das aktive Bild zurück
    });

    infoWindow.addListener("closeclick", function () {
      map.fitBounds(bounds);
    });

    bounds.extend(new google.maps.LatLng(markers[i]["lat"], markers[i]["lng"]));
    map.fitBounds(bounds);
  }
}

The_C · 18. Okt. 2024

Sorry das ist die Fehlermeldung für den obrigen JS Code:

main.js:170 As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/deprecations for additional details and https://developers.google.com/maps/documentation/javascript/advanced-markers/migration for the migration guide.
main.js:266 Laden von XHR beendet: GET „https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true“.

The_C · 18. Okt. 2024

Wenn ich den Codeabschnitt so anpasse:

Javascript:

.....

for (let i = 0; i < markers.length; i++) {
    // const marker = new google.maps.Marker({
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: { lat: markers[i]["lat"], lng: markers[i]["lng"] },
      map: map,
      icon: fehMarkerDefault,
    });

....

bekomme ich diese Fehlermeldungen in der Console und meine Icons werden nicht angezeigt:

main.js:146 Uncaught (in promise) InvalidValueError: Unknown property 'icon' of AdvancedMarkerElement
at _.lk (main.js:146:373)
at zk (main.js:150:234)
at ZP.Dj (main.js:362:128)
at new ZP (marker.js:118:401)
at initMap (googleMap.js?1729243637:48:20)
at main.js:246:227
at main.js:245:235

main.js:386 Die Karte wird ohne gültige Karten-ID initialisiert. Erweiterte Markierungen können daher nicht verwendet werden.

The_C · 18. Okt. 2024

Ich hab es geschafft keine Fehler und keine Warnungen mehr.
Nur der Hover über den Pin funktioniert noch nicht.

Javascript:

async function initMap() {
  // Lade die Bibliothek asynchron
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  const markers = [
    {
      placeTo: "Wettbewerb",
      locationName: "Kirschenhalle",
      lat: 47.03356378798437,
      lng: 15.29594796797921,
      address: "Hitzendorf 176 <br> 8151 Hitzendorf <br> Österreich",
    },
    {
      placeTo: "Registrierung",
      locationName: "Arnold Schwarzenegger Museum",
      lat: 47.07214363603234,
      lng: 15.362710011247016,
      address: "Linakstraße 9 <br> 8051 Thal <br> Österreich",
    },
  ];

  const prefix = "/_assets/b7de12eb5e07b90434af16b51b24e2db/";
  const fehMarkerActive = `${prefix}/Images/gmap_marker_active.png`; // Bild für aktiven Marker
  const fehMarkerDefault = `${prefix}/Images/gmap_marker.png`; // Bild für Standard-Marker

  const centerMap = { lat: 47.0691891, lng: 15.2515881 };

  const mapOptions = {
    center: centerMap,
    zoom: 10,
    disableDefaultUI: false,
    mapId: "DEINE_MAP_ID", // Map-ID nur für die Karte, nicht die Marker
  };

  const map = new google.maps.Map(document.getElementById("RCmap"), mapOptions);

  const infoWindow = new google.maps.InfoWindow({
    minWidht: 300,
    maxWidth: 300,
  });

  const bounds = new google.maps.LatLngBounds();

  // Loop durch alle Marker
  for (let i = 0; i < markers.length; i++) {
    // Erstelle ein benutzerdefiniertes HTML-Element für den Marker
    const markerIcon = document.createElement("img");
    markerIcon.src = fehMarkerDefault; // Standard-Marker-Bild setzen
    markerIcon.style.width = "42px"; // Setze die gewünschte Breite
    markerIcon.style.height = "60px"; // Setze die gewünschte Höhe

    // Erstelle den erweiterten Marker und weise das Bild als Inhalt zu
    const marker = new AdvancedMarkerElement({
      position: { lat: markers[i]["lat"], lng: markers[i]["lng"] },
      map: map,
      content: markerIcon, // Setze das Bild als Marker-Content
    });

    // Funktion zum Erstellen der Infofenster
    function createInfoWindows() {
      const infoWindowContent = `
        <div class="feh-content">
        <h5 style="background-color: #2a93c9; color: white; border-radius: 10px; padding: 10px; text-align: center;">${markers[i]["placeTo"]}</h5>
          <h6>${markers[i]["locationName"]}</h6>
          <address>
          <p>${markers[i]["address"]}</p>
        </div>
      `;

      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(infoWindowContent);
        infoWindow.open(map, marker);
      });
    }
    createInfoWindows();

    // Hover-Effekte: Ändere das Bild, wenn der Marker "gehovered" wird
    google.maps.event.addListener(marker, "mouseover", function () {
      markerIcon.src = fehMarkerActive; // Ändere das Bild beim Hover
    });

    google.maps.event.addListener(marker, "mouseout", function () {
      markerIcon.src = fehMarkerDefault; // Setze das Standardbild zurück
    });

    // Schließe das Infofenster und passe die Kartenausschnitte an
    infoWindow.addListener("closeclick", function () {
      map.fitBounds(bounds);
    });

    // Erweitere die Kartengrenzen basierend auf den Marker-Positionen
    bounds.extend(new google.maps.LatLng(markers[i]["lat"], markers[i]["lng"]));
    map.fitBounds(bounds);
  }
}

mo · 18. Okt. 2024

schau mal:

minWidht -> minWidth

The_C · 19. Okt. 2024

mo schrieb:
schau mal:

minWidht -> minWidth

@mo Ohh Danke!

Soweit ich das jetzt beurteilen kann, liegt es daran das ich keinen hover Effekt machen kann weil das AdvancedMarkerElement das HTML-Inhaltselement als content verwendet, was zu unerwartetem Verhalten führen kann, insbesondere bei der Änderung des Marker-Icons über die mouseover- und mouseout-Ereignisse.

Das AdvancedMarkerElement kann das nicht direkt unterstützt, also sollte man zu den standardmäßigen google.maps.Marker zurückzukehren, die das Ändern des Icons einfacher machen, aber dann habe ich wieder die Warnung.

Finde momentan keine andere Lösung und womöglich gibt es die auch nicht

The_C · 19. Okt. 2024

Habe den Cod noch einmal umgebaut aber keine Chance das Event wird nicht ausgeführt.
Wie vermutet mit dem AdvancedMarkerElement funktioniert das nicht.

Javascript:

async function initMap() {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  const markers = [
    {
      placeTo: "Wettbewerb",
      locationName: "Kirschenhalle",
      lat: 47.03356378798437,
      lng: 15.29594796797921,
      address: "Hitzendorf 176 <br> 8151 Hitzendorf <br> Österreich",
    },
    {
      placeTo: "Registrierung",
      locationName: "Arnold Schwarzenegger Museum",
      lat: 47.07214363603234,
      lng: 15.362710011247016,
      address: "Linakstraße 9 <br> 8051 Thal <br> Österreich",
    },
  ];

  const prefix = "/_assets/b7de12eb5e07b90434af16b51b24e2db/";
  const fehMarkerActive = `${prefix}/Images/gmap_marker_active.png`;
  const fehMarkerDefault = `${prefix}/Images/gmap_marker.png`;

  const centerMap = { lat: 47.0691891, lng: 15.2515881 };

  const mapOptions = {
    center: centerMap,
    zoom: 10,
    disableDefaultUI: false,
    mapId: "c7f25c57644b52b0",
  };

  const map = new google.maps.Map(document.getElementById("RCmap"), mapOptions);

  const infoWindow = new google.maps.InfoWindow({
    minWidht: 300,
    maxWidth: 300,
  });

  const bounds = new google.maps.LatLngBounds();

  for (let i = 0; i < markers.length; i++) {
    const markerElement = document.createElement("div");
    markerElement.classList.add("custom-marker");

    const markerImage = document.createElement("img");
    markerImage.src = fehMarkerDefault;
    markerElement.appendChild(markerImage);

    const marker = new AdvancedMarkerElement({
      position: { lat: markers[i]["lat"], lng: markers[i]["lng"] },
      map: map,
      content: markerElement,
    });

    // Infofenster erstellen
    function createInfoWindows() {
      const infoWindowContent = `
        <div class="feh-content">
          <h5 style="background-color: #2a93c9; color: white; border-radius: 10px; padding: 10px; text-align: center;">${markers[i]["placeTo"]}</h5>
          <h6>${markers[i]["locationName"]}</h6>
          <address>
            <p>${markers[i]["address"]}</p>
          </address>
        </div>
      `;

      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(infoWindowContent);
        infoWindow.open(map, marker);
      });
    }
    createInfoWindows();

    // Füge Mausereignisse direkt zum Marker-Element hinzu
    markerElement.addEventListener("mouseover", function () {
      console.log("Mouse over marker", i); // Debug-Ausgabe
      markerImage.src = fehMarkerActive; // Ändere das Bild beim Hover
    });

    markerElement.addEventListener("mouseout", function () {
      console.log("Mouse out marker", i); // Debug-Ausgabe
      markerImage.src = fehMarkerDefault; // Setze das Standardbild zurück
    });

    // Infofenster schließen und Kartengrenzen anpassen
    infoWindow.addListener("closeclick", function () {
      map.fitBounds(bounds);
    });

    // Kartenansicht erweitern
    bounds.extend(new google.maps.LatLng(markers[i]["lat"], markers[i]["lng"]));
    map.fitBounds(bounds);
  }
}

The_C · 19. Okt. 2024

So jetzt hab ich das ganze mit css gelöst wenn es schon nicht mit JS funktioniert.

CSS:

.yNHHyP-marker-view img {
    width: 42px;
    height: 60px;
    transition: transform 0.3s ease-in-out;
}

/* Hover-Effekt: Ändere das Bild bei hover */
.yNHHyP-marker-view:hover img {
    content: url("../Images/gmap_marker_active.png");
    transform: scale(
        1.1
    ); /* Vergrößere das Bild leicht als visuelles Feedback */
}

Google Map JS

The_C

Member

The_C

Member

The_C

Member

The_C

Member

mo

Administrator

The_C

Member

The_C

Member

The_C

Member