Przenieś do znaczników zaawansowanych

21 lutego 2024 r. (wersja 3.56) usługa google.maps.Marker została wycofana. Zachęcamy do przejścia na nową klasę google.maps.marker.AdvancedMarkerElement. Zaawansowane znaczniki zapewniają znaczną poprawę w porównaniu ze starszą klasą google.maps.Marker.

Więcej informacji o tym wycofaniu

Aby zaktualizować starszy znacznik 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 ma tego wymogu.
  2. Zmień google.maps.Marker na google.maps.marker.AdvancedMarkerElement
  3. Dodaj identyfikator mapy do kodu inicjowania mapy. Przykład: mapId: 'DEMO_MAP_ID'. Jeśli nie masz jeszcze identyfikatora mapy, możesz użyć atrybutu „DEMO_MAP_ID”.

Dodawanie biblioteki zaawansowanych znaczników

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

  • Jeśli Twoja strona internetowa korzysta z dynamicznego wczytywania skryptów, dodaj bibliotekę znaczników i zaimportuj plik 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 bezpośredniego skryptu, dodaj do skryptu wczytywania libraries=marker w sposób podany poniżej.

    <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 starszego znacznika, a po nim kod z tego samego przykładu z użyciem znaczników zaawansowanych:

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 znacznika

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ć kolory tła, obramowania i glifu. Obsługa niestandardowych obrazów graficznych jest łatwiejsza, a teraz można tworzyć niestandardowe znaczniki za pomocą kodu HTML i CSS. Dowiedz się więcej o wszystkich możliwościach znaczników zaawansowanych: