Pop-up'lar

popover, belirli bir konumda haritanın üzerinde bir iletişim penceresinde içerik (genellikle metin veya resim) gösterir. Pop-over'da içerik alanı ve daralan bir gövde bulunur. Sapın ucu, haritada belirtilen bir konuma bağlıdır. Pop-over'lar, ekran okuyuculara iletişim kutusu olarak görünür.

Genellikle bir popover'ı etkileşimli bir işaretçiye eklersiniz ancak popover'ı belirli bir LatLngAltitude koordinata da ekleyebilir veya işaretçiden uzaklaştırabilirsiniz.

Popover ekleme

The PopoverElement oluşturucusu, popover'ı görüntülemek için başlangıç parametrelerini belirten bir PopoverElementOptions nesne değişmez değeri alır.

PopoverElementOptions nesne değişmez değeri aşağıdaki alanları içerir:

  • positionAnchor: İşaretçinin gösterileceği LatLngAltitude konumu. İşaretçi kullanılıyorsa bunun yerine işaretçinin konumu kullanılır.
  • altitudeMode: Popover'ın yüksekliğinin nasıl yorumlandığı.
  • lightDismissDisabled: Kullanıcı popover'ın dışını tıkladığında veya Esc tuşuna bastığında popover'ın açık kalıp kalmayacağı. Bu seçenek true olarak ayarlandığında haritada aynı anda birden fazla lightDismissDisabled popover gösterilebilir.
  • open: Pop-over'ın açık olup olmayacağını belirler. Varsayılan olarak false değerine ayarlanır.

PopoverElement öğesinin içeriği; metin dizesi, HTML snippet'i veya DOM öğesi içerebilir. İçeriği, header veya default yuvasında PopoverElement öğesine açıkça ekleyerek ayarlarsınız.

İçeriğin boyutunu açıkça belirtmek istiyorsanız içeriği bir <div> öğesine yerleştirebilir ve <div> öğesini CSS ile stilize edebilirsiniz. Popover'lar varsayılan olarak kaydırılabilir ve önceden tanımlanmış bir maksimum yüksekliğe sahiptir.

Bir popover'ı LatLngAltitude koordinatına sabitleme

Oluşturduğunuz popover, haritada otomatik olarak gösterilmez. Açılır pencerenin görünür olması için PopoverElement bölümünde open seçeneğini true olarak ayarlamanız gerekir. Bu işlemi inşaat sırasında veya örnek oluşturulduktan sonra gerçekleştirebilirsiniz.

async function init() {
    const { Map3DElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const popover = new PopoverElement({
        altitudeMode: 'ABSOLUTE',
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });

    popover.append('Golden Gate Bridge');

    map.append(popover);

    document.body.append(map);
}

void init();

Pop-up'ı işaretçiye sabitleme

Pop-up'ları işaretçilere sabitleyebilirsiniz. İşaretçiye sabitlenmiş bir pop-up eklerken PopoverElement.positionAnchor seçeneğini işaretçiyi kullanacak şekilde ayarlarsınız.

async function init() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 'ABSOLUTE',
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 },
    });

    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });

    popover.append('Golden Gate Bridge');

    interactiveMarker.addEventListener('gmp-click', () => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });

    map.append(interactiveMarker);
    map.append(popover);

    document.body.append(map);
}

void init();

HTML kullanarak bir popover'ı işaretçiye sabitleme

Aşağıda gösterildiği gibi, herhangi bir JavaScript kodu yazmadan popover'ları işaretçilere de sabitleyebilirsiniz:

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

Bir popover'a özel içerik ekleme

header ve content seçeneklerini ayarlayarak popover'lara özel içerik ekleyebilirsiniz:

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();