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ş 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 ö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) 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 aşağıdaki snippet'te gösterildiği gibi yükleme komut dosyasına 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 örnekleri, eski bir işaretçi ekleme kodunu ve ardından gelişmiş işaretçileri kullanan aynı örnek için kodu gösterir:

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: