İşaretçilere genel bakış

Platform seçin: Android iOS JavaScript

Haritada tek bir konumu göstermek için işaretçileri kullanın. Bu kılavuzda, gelişmiş işaretçileri nasıl kullanacağınız gösterilmektedir. Gelişmiş işaretçilerle yüksek performanslı işaretçiler oluşturup özelleştirebilir, gmp-click etkinliklerine ve klavye girişine yanıt veren erişilebilir işaretçiler oluşturabilirsiniz. Daha da ayrıntılı özelleştirme için gelişmiş işaretçiler, tamamen özel işaretçiler oluşturma özelliği de dahil olmak üzere özel HTML ve CSS kullanımını destekler. 3D uygulamalarda, işaretçinin görüneceği rakımı kontrol edebilirsiniz. Gelişmiş işaretçiler hem raster hem de vektör haritalarda desteklenir (ancak bazı özellikler raster haritalarda kullanılamaz). Gelişmiş işaretçileri kullanmak için harita kimliği gerekir (DEMO_MAP_ID kullanılabilir).

Gelişmiş işaretçileri kullanmaya başlama

Rengi, ölçeği ve simge resmini özelleştirme

Varsayılan işaretçinin arka planını, glifini ve kenarlık rengini özelleştirip işaretçi boyutunu ayarlayın.

Özelleştirilmiş bazı işaretçileri gösteren ekran görüntüsü.

Varsayılan işaretçi simgesini özel bir SVG veya PNG resmiyle değiştirin.

Özel SVG işaretçilerini gösteren ekran görüntüsü.

Özel HTML işaretçileri oluşturma

Görsel olarak ayırt edici etkileşimli işaretçiler ve animasyonlar oluşturmak için özel HTML ve CSS kullanın.

Özel HTML işaretçisini gösteren ekran görüntüsü.

İşaretçilerin tıklama ve klavye etkinliklerine yanıt vermesini sağlama

gmp-click etkinlik işleyici ekleyerek işaretçinin tıklama ve klavye etkinliklerine yanıt vermesini sağlayın.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

İşaretçi yüksekliğini ve çarpışma davranışını ayarlama

Bir işaretçinin yüksekliğini ayarlayarak 3D harita öğeleriyle doğru şekilde görünmesini sağlayın ve başka bir işaretçi veya harita etiketiyle çakıştığında nasıl davranması gerektiğini belirtin. İşaretçi yüksekliği yalnızca vektör haritalarda desteklenir.

Yüksekliğe göre ayarlanmış bir işaretçiyi gösteren ekran görüntüsü.

Sonraki adım