Gelişmiş işaretçilere geçme

google.maps.Marker'ın desteği 21 Şubat 2024 (v3.56) itibarıyla sonlandırılmıştır. Yeni google.maps.marker.AdvancedMarkerElement sınıfa geçmenizi öneririz. Gelişmiş işaretçiler, eski google.maps.Marker sınıfına göre önemli ölçüde iyileştirme sağlar. Bu desteği sonlandırma hakkında daha fazla bilgi edinin.

Eski bir işaretçiyi gelişmiş işaretçi olarak güncellemek için aşağıdaki adımları uygulayın:

  1. İşaretçi kitaplığını içe aktarmak için kod ekleyin (aşağıdaki adımlara bakın).
  2. google.maps.Marker ifadesini google.maps.marker.AdvancedMarkerElement olarak değiştirin; İçe aktarma ifadenizde AdvancedMarker ifadesi varsa nitelikli yolu atlayabilirsiniz.
  3. Harita başlatma kodunuza bir harita kimliği ekleyin. Örneğin, henüz bir harita kimliğiniz yoksa test amacıyla mapId: 'DEMO_MAP_ID'.

Gelişmiş İşaretçi kitaplığını ekleme

Kitaplıkları yüklemek için kullandığınız yöntem, web sayfanızın Maps JavaScript API'yi nasıl yüklediğine bağlıdır.

  • Web sayfanızda dinamik kitaplık içe aktarma kullanılıyorsa işaretçiler kitaplığını ekleyin ve AdvancedMarkerElement (isteğe bağlı olarak PinElement) öğesini çalışma zamanında içe aktarın.

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

  • Web sayfanızda eski doğrudan komut dosyası yükleme etiketi kullanılıyorsa yükleme komut dosyasına aşağıdaki snippet'te gösterildiği gibi libraries=marker ekleyin.

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

Maps JavaScript API'yi yükleme hakkında daha fazla bilgi edinin.

Örnekler

Aşağıdaki kod örneklerinde, eski işaretçi eklemeye yönelik kod ve ardından aynı örnek için gelişmiş işaretçiler kullanan kod gösterilmektedir:

Taşımadan önce

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

Taşıma işleminden sonra

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

Gelişmiş işaretçi özelliklerini keşfetme

Gelişmiş işaretçiler, daha önce mümkün olmayan şekillerde özelleştirilebilir. Artık işaretçilerin boyutunu (ölçek) ayarlayabilir ve arka planın, kenarlığın ve glifin renklerini değiştirebilirsiniz. Özel grafik resimlerle çalışmak daha kolaydır ve artık HTML ile CSS kullanarak özel işaretçiler oluşturmak mümkündür. Gelişmiş işaretçilerle yapabilecekleriniz hakkında daha fazla bilgi edinin: