Maps JavaScript API'deki Web Bileşenleri (Önizleme)

Web Bileşenleri; özel ve yeniden kullanılabilir HTML öğelerinde HTML, CSS ve JS'yi kapsayan popüler bir W3C standardıdır. Yeniden kullanılabilir bu bileşenler, atom işlevlerinden (bir yerin yıldız puanını görüntülemek gibi) daha karmaşık iş mantığına kadar çeşitlilik gösterebilir. Bu kılavuzda, Maps JavaScript API'de bulunan Web Bileşenleri açıklanmaktadır.

Standardın kendisi hakkında daha fazla bilgi için Web Bileşenleri konusuna bakın.

Kitle

Bu belge, Web Bileşenleri ile uygulamaları hızlı bir şekilde keşfetmeye ve geliştirmeye başlamanıza yardımcı olmak için tasarlanmıştır. HTML ve CSS programlama kavramlarına aşina olmalısınız.

Harita Görüntüleme

Web Bileşenleri hakkında bilgi edinmeye başlamanın en kolay yolu bir örnek görmektir. Aşağıdaki örnekte, San Jose bölgesinin bir haritası gösterilmektedir.

San Jose bölgesinin haritası

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Bu örnekte dikkat edilmesi gereken birkaç nokta var:

  1. Haritalar JavaScript API'si eşzamansız olarak adlandırılır. Geri çağırma işlevi, API'nin ne zaman yüklendiğini bilmek için kullanılır.
  2. Haritanın sunumu, <gmp-map> özel öğesiyle tanımlanır.
  3. Harita özellikleri, <gmp-map> özel öğesinde özellikler belirtilerek tanımlanır.
  4. Stil, özel öğelere satır içi olarak uygulanabilir veya ayrı bir CSS dosyasında tanımlanabilir.

Temel haritanın stilini ayarlama

Harita kimliği, belirli bir harita stili veya özelliğiyle ilişkilendirilen bir tanımlayıcıdır. İsteğe bağlı bulut yapılandırma özelliklerinden yararlanmak için DEMO_MAP_ID bulut tabanlı harita stilini kendi harita kimliğinizle değiştirin. Nasıl harita kimliği oluşturacağınızı ve özel stil yapılandıracağınızı öğrenmek için Bulut Tabanlı Haritalar Stili sayfasını ziyaret edin.

Haritaya işaretçi ekleme

Karmaşık içerik hiyerarşileri oluşturmak için yerleşik HTML etiketlerinin iç içe yerleştirilmesi gibi, bir veya daha fazla harita işaretçisini görüntülemek için <gmp-advanced-marker> öğeleri de öğenin içine yerleştirilebilir.

işaretçili harita

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
      <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Burada <gmp-map> özel öğesinin içine iki <gmp-advanced-marker> öğesi ekledik. title metni, belirtilen öğe için ek bir fareyle üzerine gelme metni ve erişilebilirlik etiketi sağlar.

JavaScript Etkinlikleri

Web Bileşenleri'nin en önemli avantajlarından biri kullanım kolaylığıdır. Birkaç satır kod kullanarak, JavaScript veya gelişmiş programlama konusunda sınırlı bilgiyle bir Harita görüntülenebilir. Uygulandıktan sonra, kod diğer HTML öğelerinin bildik kalıplarını izler. Örneğin, harita veya işaretçi tıklaması gibi Gelişmiş İşaretçi işlemlerine tepki vermek için yerel tarayıcı etkinlik sistemi kullanılabilir.

İşaretçi tıklama etkinliği

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
</gmp-map>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Bu örnekte, Maps JavaScript API tamamen yüklendikten sonra initMap, gerekli geri çağırma işlevini temsil etmektedir. Kod, her işaretçi için işleyiciler oluşturur ve her işaretçi tıklandığında bir bilgi penceresi sunar.

Sırada ne var?