Pop-up'lar

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

Genellikle popover'ı etkileşimli bir işaretçiye eklersiniz ancak popover'ı belirli bir LatLngAltitude koordinatına ekleyebilir veya bir işaretçiden kaydırabilirsiniz.

Pop-up ekleme

PopoverElement oluşturucusu, popover'ı görüntülemek için ilk parametreleri 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ğını belirler. Bu seçenek true olarak ayarlandığında haritada aynı anda birden fazla lightDismissDisabled pop-up'ı gösterilebilir.
  • open: Popover'ın açık olup olmayacağını belirler. Varsayılan değer: false.

PopoverElement içeriği bir 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ği açıkça boyutlandırmak istiyorsanız <div> öğesine yerleştirebilir ve <div> öğesini CSS ile stilize edebilirsiniz. Pop-over'lar varsayılan olarak kaydırılabilir ve önceden tanımlanmış bir maksimum yüksekliğe sahiptir.

LatLngAltitude koordinatına popover ekleme

Oluşturduğunuz popover'lar haritada otomatik olarak gösterilmez. Popover'ın görünür olması için open seçeneğini PopoverElement içinde true olarak ayarlamanız gerekir. Bu işlemi, oluşturma sırasında veya örneklendirmeden 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',
    });

    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'ı bir işaretçiye sabitleme

Pop-over'ları işaretçilere sabitleyebilirsiniz. Bir işaretçiye sabitlenmiş popover 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',
    });

    // 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 da popover'ları işaretçilere 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 pop-up'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();