Pop-up'lar

popover, haritanın üstündeki bir iletişim penceresinde, belirli bir konumda içerik (genellikle metin veya resim) gösterir. Pop-over'da bir 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'ları etkileşimli işaretçilere eklersiniz ancak popover'ları belirli bir LatLngAltitude koordinatına ekleyebilir veya 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 popover 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 alanında açıkça PopoverElement öğesine ekleyerek ayarlarsınız.

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

LatLngAltitude koordinatına popover sabitleme

Oluşturduğunuz popover'lar haritada otomatik olarak gösterilmez. Pop-over'ı görünür hale getirmek için PopoverElement içinde open seçeneğini 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 işaretçiyi kullanmak için PopoverElement.positionAnchor seçeneğini 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, 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>

Pop-up'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();