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

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

Kullanımdan kaldırma süreci 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 kod ekleyin. İşaretçilerin (google.maps.Marker) önceki sürümünde bu gereksinimin olmadığını unutmayın.
  2. google.maps.Marker kelimesini google.maps.marker.AdvancedMarkerElement olarak değiştirin
  3. Harita başlatma kodunuza harita kimliği ekleyin. Örneğin mapId: 'DEMO_MAP_ID'. Harita kimliğiniz yoksa "DEMO_MAP_ID" kullanabilirsiniz.

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

Kitaplıkları yüklemek için kullanacağı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çiler kitaplığını ekleyin ve çalışma zamanında burada gösterildiği gibi AdvancedMarkerElement (ve isteğe bağlı olarak PinElement) öğesini 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 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 edinin.

Örnekler

Aşağıdaki kod örneklerinde, eski bir işaretçinin eklenmesine ilişkin kod ve ardından aynı örnek için gelişmiş işaretçiler kullanılarak 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ç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 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: