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. İşaretçilerin (google.maps.Marker) önceki sürümünde bu şartın geçerli olmadığını unutmayın.
  2. google.maps.Marker değerini google.maps.marker.AdvancedMarkerElement olarak değiştirme
  3. Harita ilk kullanıma hazırlama 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 komut dosyası yükleme kullanılıyorsa işaretçi 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

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

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şaretlerle yapabilecekleriniz hakkında daha fazla bilgi edinin: