Pop-up'lar

popover, belirli bir konumda haritanın üzerinde bir iletişim kutusunda 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.

Açılır pencere ekleme

The PopoverElement constructor, popover'ı görüntülemek için başlangıç parametrelerini belirten bir PopoverElementOptions object literal 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 pop-up'ı gösterilebilir.
  • open: Pop-up'ın açık olup olmayacağını belirler. Varsayılan olarak false değerine ayarlanır.

PopoverElement öğesinin içeriği bir metin dizesi, HTML snippet'i veya DOM öğesi içerebilir. İçeriği, header veya default yuvasına PopoverElement 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 stilize edebilirsiniz. Pop-over'lar varsayılan olarak kaydırılabilir ve önceden tanımlanmış bir maksimum yüksekliğe sahiptir.

Bir popover'ı LatLngAltitude koordinatına sabitleme

Bir pop-up oluşturduğunuzda bu pop-up haritada otomatik olarak gösterilmez. Açılır pencerenin 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 örnek oluşturulduktan sonra gerçekleştirebilirsiniz.

async function init() {
    const { AltitudeMode, Map3DElement, MapMode, 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: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: 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);
}
init();
index.js

Pop-up'ı işaretçiye sabitleme

Pop-up pencereleri 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 { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, 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: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 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', (event) => {
        // 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);
}
init();
index.js

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 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();