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:
- İş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. google.maps.Marker
kelimesinigoogle.maps.marker.AdvancedMarkerElement
olarak değiştirin- 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ı olarakPinElement
) öğ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: