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

google.maps.Marker'ın desteği 21 Şubat 2024 itibarıyla (v3.56) 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.

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

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çinin önceki sürümünde (google.maps.Marker) bu şartın olmadığını unutmayın.
  2. google.maps.Marker için kullanılan google.maps.marker.AdvancedMarkerElement türünü google.maps.marker.AdvancedMarkerElement olarak değiştirin
  3. Harita ilk başlatma kodunuza bir harita kimliği ekleyin. Örneğin, 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 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>

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

Ö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şı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, arka planın, kenarlığın ve simgenin renklerini değiştirebilirsiniz. Özel grafik resimlerle çalışmak artık daha kolay. HTML ve CSS kullanarak özel işaretçiler oluşturabilirsiniz. Gelişmiş işaretçilerle yapabileceğiniz her şey hakkında daha fazla bilgi edinin: