Migracja do zaawansowanych znaczników

21 lutego 2024 r. (wersja 3.56) wycofaliśmy znacznik google.maps.Marker. Zachęcamy do przejścia na nową google.maps.marker.AdvancedMarkerElement klasę. Zaawansowane markery zapewniają znaczne ulepszenia w porównaniu z klasą starszego typugoogle.maps.Marker.

Więcej informacji o tym wycofaniu

Aby zaktualizować starszy znacznik do zaawansowanego, wykonaj te czynności:

  1. Dodaj kod, aby zaimportować bibliotekę znaczników. Pamiętaj, że poprzednia wersja znaczników (google.maps.Marker) nie ma tego wymagania.
  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' na potrzeby testowania, jeśli nie masz jeszcze identyfikatora mapy.

Dodawanie biblioteki zaawansowanych znaczników

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

  • Jeśli strona internetowa używa dynamicznego wczytywania skryptów, dodaj bibliotekę znaczników i zaimportuj AdvancedMarkerElement (a opcjonalnie PinElement) w czasie działania, jak pokazano tutaj.

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

  • Jeśli Twoja strona korzysta ze starszego tagu bezpośredniego wczytywania skryptu, dodaj do skryptu wczytywania wartość libraries=marker, jak pokazano w tym fragmencie kodu.

    <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ą, jak dodać starszy znacznik, a następnie jak to samo zrobić za pomocą 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

Znaczniki zaawansowane można dostosowywać w sposób, który wcześniej nie był możliwy. Możesz teraz dostosowywać rozmiar (skalę) znaczników oraz zmieniać kolory tła, obramowania i glifu. Praca z niestandardowymi obrazami graficznymi jest prostsza, a niestandardowe znaczniki można teraz tworzyć za pomocą kodu HTML i CSS. Dowiedz się więcej o wszystkich możliwościach zaawansowanych znaczników: