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ą klasę google.maps.marker.AdvancedMarkerElement. Zaawansowane znaczniki oferują znaczne ulepszenia w porównaniu ze starszą klasą google.maps.Marker. Więcej informacji o tym wycofaniu

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

  1. Dodaj kod, aby zaimportować bibliotekę znaczników (patrz instrukcje poniżej).
  2. Zmień google.maps.Marker na google.maps.marker.AdvancedMarkerElement. Jeśli instrukcja importu deklaruje AdvancedMarker, możesz pominąć ścieżkę kwalifikowaną.
  3. Dodaj identyfikator mapy do kodu inicjowania mapy. Na przykład mapId: 'DEMO_MAP_ID' do celów testowych, 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 internetowa korzysta z dynamicznego importowania biblioteki, 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 bezpośredniego wczytywania skryptu, dodaj libraries=marker do skryptu wczytywania, jak pokazano w poniższym 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 dodać ten sam znacznik za pomocą 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 przeprowadzeniu migracji

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

Poznaj zaawansowane funkcje znaczników

Znaczniki zaawansowane można dostosowywać w sposób, który wcześniej nie był możliwy. Możesz teraz dostosować rozmiar (skalę) znaczników oraz zmienić 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 znaczników zaawansowanych: