Przenieś do znaczników zaawansowanych

21 lutego 2024 r. (wersja 3.56) znacznik google.maps.Marker został wycofany. Zachęcamy do przejścia na nową klasę google.maps.marker.AdvancedMarkerElement. Zaawansowane znaczniki zapewniają istotne ulepszenia w porównaniu ze starszą klasą google.maps.Marker.

Więcej informacji o wycofaniu tej funkcji

Aby zaktualizować znacznik starszego typu w znacznik zaawansowany, wykonaj te czynności:

  1. Dodaj kod, aby zaimportować bibliotekę znaczników. Pamiętaj, że poprzednia wersja znaczników (google.maps.Marker) nie spełnia tego wymogu.
  2. Zmień google.maps.Marker na google.maps.marker.AdvancedMarkerElement
  3. Dodaj identyfikator mapy do kodu inicjowania mapy. na przykład mapId: 'DEMO_MAP_ID'. Możesz użyć atrybutu „DEMO_MAP_ID”, jeśli nie masz jeszcze identyfikatora mapy.

Dodawanie biblioteki znaczników zaawansowanych

Metoda wczytywania bibliotek zależy od tego, jak strona internetowa wczytuje interfejs Maps JavaScript API.

  • Jeśli Twoja strona korzysta z dynamicznego wczytywania skryptów, dodaj bibliotekę znaczników i zaimportuj AdvancedMarkerElement (oraz opcjonalnie PinElement) w czasie działania, jak pokazano tutaj.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Jeśli Twoja strona internetowa korzysta ze starszego tagu wczytywania skryptu bezpośredniego, dodaj do skryptu wczytywania libraries=marker w sposób pokazany w tym fragmencie.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Więcej informacji o wczytywaniu interfejsu Maps JavaScript API

Przykłady

Poniższe przykłady kodu pokazują kod dodawania znacznika starszego typu, a po nim kod z tego samego przykładu z zastosowaniem zaawansowanych znaczników:

Przed migracją

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Po migracji

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

Poznaj zaawansowane funkcje znaczników

Zaawansowane znaczniki można dostosowywać w sposób, który wcześniej nie był możliwy. Teraz możesz dostosować rozmiar (skalę) znaczników oraz zmienić kolor tła, obramowania i glifu. Łatwiejsze korzystanie z niestandardowych obrazów graficznych, a teraz można też tworzyć niestandardowe znaczniki za pomocą HTML i CSS. Dowiedz się więcej o tym, co możesz zrobić z zaawansowanymi znacznikami: