Gelişmiş işaretçilere taşı

google.maps.Marker'ın desteği 21 Şubat 2024 (3.56 sürümü) itibarıyla sonlandırılmıştır. Yeni google.maps.marker.AdvancedMarkerElement sınıfına geçiş yapmanızı öneririz. Gelişmiş işaretçiler, eski google.maps.Marker sınıfına göre önemli iyileştirmeler sağlar.

Desteğin sonlandırılması hakkında daha fazla bilgi

Eski bir işaretçiyi gelişmiş bir 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 kodu ekleyin. İşaretçilerin önceki sürümünde (google.maps.Marker) bu şartın bulunmadığını unutmayın.
  2. google.maps.Marker değerini google.maps.marker.AdvancedMarkerElement olarak değiştirin
  3. Harita başlatma kodunuza harita kimliği ekleyin. Örneğin, mapId: 'DEMO_MAP_ID'. Henüz harita kimliğiniz yoksa "DEMO_MAP_ID" kullanılabilir.

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 burada gösterildiği gibi çalışma zamanında AdvancedMarkerElement (ve isteğe bağlı olarak PinElement) verilerini içe aktarın.

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

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

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

Haritalar JavaScript API'sini yükleme hakkında daha fazla bilgi

Örnekler

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

Taşıma işleminden ö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şfedin

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