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. Biz yeni google.maps.marker.AdvancedMarkerElement ürününe geçmenizi öneririz sınıfını kullanır. Gelişmiş işaretçiler, eski sürümle karşılaştırıldığında önemli iyileştirmeler sağlar google.maps.Marker sınıf.

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. Önceki sürümün işaretçiler (google.maps.Marker) için bu koşul bulunmamaktadır.
  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: Haritanız yoksa test amaçlı mapId: 'DEMO_MAP_ID' Kimlik zaten.

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.

  • Web sayfanızda dinamik komut dosyası yükleme kullanılıyorsa işaretçi kitaplığını ekleyin ve çalışma zamanında AdvancedMarkerElement (ve isteğe bağlı olarak PinElement) verilerini içe aktarabilirsiniz. burada gösterilir.

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

  • Web sayfanız eski doğrudan komut dosyası yükleme etiketini kullanıyorsa libraries=marker komut dosyasını 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 ve ardından aynı örnek için gelişmiş işaretçileri kullanarak kodu:

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) ve işaretçilerin boyutunu (ölçeklendirmesi) ayarlayabilirsiniz arka plan, kenarlık ve glif. Özel grafik resimlerle çalışmak daha kolaydır, Artık HTML ve CSS kullanarak özel işaretçiler oluşturulabilir. Daha fazla bilgi edinin konu alan makalemizi inceleyin: