KML görüntüleniyor

Genel bakış

Bu eğitim, bir KML dosyasına ait bilgilerin Google haritasında ve kenar çubuğunda nasıl görüntüleneceğini gösterir. Haritalarda KML dosyalarını kullanma konusunda daha fazla bilgi için KML Katmanları kılavuzunu okuyun. Kenar çubuğundaki verileri görmek için aşağıdaki haritada bir işaretçiyi tıklamayı deneyin.

Aşağıdaki bölümde, haritayı ve kenar çubuğunu oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Kendiniz deneyin

Kod penceresinin sağ üst köşesindeki <> simgesini tıklayarak JSFiddle'da bu kodla deneme yapabilirsiniz.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Başlarken

Bu eğitim için harita ve kenar çubuğu oluşturma aşamaları şunlardır:

  1. KML dosyasını ayarlama
  2. KMLlayer'ı görüntüleme
  3. Verileri kenar çubuğunda görüntüleme

KML dosyasının içe aktarılmak üzere ayarlanması

KML dosyanız KML standardına uygun olmalıdır. Bu standartla ilgili ayrıntılar için Open Geospatial Consortium web sitesine bakın. Google'ın KML belgelerinde de dil açıklanmakta ve hem referans hem de kavramsal geliştirici belgeleri sunulmaktadır.

Yeni bir şeyler öğrenme aşamasındaysanız ve bir KML dosyanız yoksa:

  • Bu eğitim için aşağıdaki KML dosyasını kullanın:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Web'de bir KML dosyası bulun. Google'ın filetype arama operatörünü kullanabilirsiniz.

    Tüm KML dosyalarını bulmak için velodromes yerine istediğiniz arama terimini kullanabilir veya terimin tamamını çıkarabilirsiniz.

Kendi dosyanızı oluşturuyorsanız bu örnekteki kodda aşağıdaki varsayılır:

  • Dosyayı internette herkese açık olarak barındırmışsınızdır. Bu, KML'yi bir KMLLayer dosyasına yükleyen tüm uygulamalar için bir gerekliliktir. Böylece Google'ın sunucuları, içeriği harita üzerinde görüntülemek üzere bulup getirebilir.
  • Dosya şifre korumalı bir sayfada değil.
  • Özelliklerinizde bilgi penceresi içeriği var. Bu içeriği bir description öğesinde barındırabilir veya ExtendedData öğesi ve varlık değişimi kullanarak ekleyebilirsiniz (daha fazla bilgi için aşağıdaki bilgileri okuyun). Her ikisine de özelliğin infoWindowHtml özelliği olarak erişilebilir.

ExtendedData öğeleri

Bu eğitimdeki KML dosyası, bir ExtendedData öğesindeki özellik bilgilerini içerir. Bu bilgileri özelliğin açıklamasına eklemek için BalloonStyle etiketindeki bir değişken olan varlık değişimini kullanın.

Aşağıdaki tabloda bu bölüme yönelik kod açıklanmaktadır.

Kod ve açıklama 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

KML dosyasında tüm yer işaretlerine uygulanan tek bir Style öğesi vardır.
Bu Style öğesi, BalloonStyle öğesinin metin öğesine #[video] değeri atar.
$[x] biçimi, KML ayrıştırıcısına video adlı Data öğesini aramasını ve bunu balon metni olarak kullanmasını bildirir.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Her Placemark, Data öğesini barındıran bir ExtendedData öğesi içerir. Her Placemark öğesinin, video name özelliğine sahip tek bir Data öğesine sahip olduğuna dikkat edin.
Bu eğiticinin dosyasında, her bir Yer İşareti'nin balon metninin değeri olarak yerleştirilmiş YouTube videosu kullanılmıştır.

Varlık değiştirme hakkında daha fazla bilgiyi KML belgelerinin Özel Veri Ekleme bölümünde bulabilirsiniz.

KMLKatman'ı görüntüleme

Harita başlatılıyor

Bu tabloda, bu bölüme ilişkin kod açıklanmaktadır.

Kod ve açıklama 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

KML'yi haritada görüntülemek için önce haritayı oluşturmanız gerekir.
Bu kod yeni bir Google Harita nesnesi oluşturur, nereye ortalayıp yakınlaştırma yapılacağını bildirir ve haritayı div öğesine ekler.
Google Haritası oluşturmayla ilgili temel bilgiler hakkında daha fazla bilgi edinmek için Web sitenize Google Haritası ekleme başlıklı eğiticiyi okuyun.

KMLKatman Oluşturma

Bu tabloda, KMLKatman'ı oluşturan kod açıklanmaktadır.

Kod ve açıklama 
var kmlLayer = new google.maps.KmlLayer();

KML'nizi görüntülemek için yeni bir KMLLayer nesnesi oluşturur.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

KMLKatman oluşturucu, KML dosyanızın URL'sini ayarlar. Ayrıca, aşağıdakileri yapan KMLKatman nesnesinin özelliklerini de tanımlar:
  • Katmana, tıklandığında bir bilgi penceresi göstermemesini bildirir.
  • Haritaya, katman içeriğinin sınırlayıcı kutusunu ortalamasını ve yakınlaştırmasını sağlar.
  • Haritayı daha önce oluşturulan Harita nesnesine ayarlar.
Haritalar JavaScript API başvuru kılavuzu, bu katman için kullanılabilecek tüm seçenekleri listeler.
KML dosyası içeriğini temel haritanın üzerinde bir katman olarak görüntülemek için HTML dosyanızı yükleyin. Ancak herhangi bir özelliğin tıklanması henüz bir işlemle sonuçlanmaz.

Kenar çubuğunda veriler görüntüleniyor

Bu bölümde, haritadaki bir özelliği tıkladığınızda kenar çubuğunda bilgi penceresi içeriğini görüntüleyen ayarlar açıklanmaktadır. Bunu yapan:

  • KMLKatman'ın özelliklerinden herhangi birinde tıklama etkinliği dinleniyor.
  • Tıklanan özelliğin verilerini alma.
  • Veriler kenar çubuğuna yazılıyor.

Etkinlik işleyici ekleme

Google Haritalar, haritadaki tıklamalar veya klavye tuşlarına basma gibi kullanıcı etkinliklerini dinlemek ve yanıtlamak için bir işlev sunar. Bu tür click etkinlikleri için bir işleyici ekler.

Aşağıdaki tabloda bu bölüme yönelik kod açıklanmaktadır.

Kod ve açıklama 
kmlLayer.addListener('click', function(event) {});

kmlLayer.addListener etkinlik işleyici aşağıdakilere odaklanır:
  • Dinlenecek etkinlik türü. Bu eğiticide, bu etkinlik click etkinliğindedir.
  • Etkinlik gerçekleştiğinde çağrılacak bir işlev.
Geliştirici Kılavuzu'nda etkinlikler hakkında daha fazla bilgi edinebilirsiniz.

Kenar çubuğuna KML özelliği verilerini yazma

Eğiticinin bu aşamasında, katmanın özelliklerindeki tıklama etkinliklerini yakaladınız. Artık uygulamayı kenar çubuğuna özelliğin verilerini ve bilgi penceresi içeriğini yazacak şekilde ayarlayabilirsiniz.

Aşağıdaki tabloda bu bölüme yönelik kod açıklanmaktadır.

Kod ve açıklama 
var content = event.featureData.infoWindowHtml;

Bilgi penceresi içeriğini bir değişkene yazar. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Yazılacak div öğesini tanımlar ve içindeki HTML'yi özelliğin içeriğiyle değiştirir. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Bu kod satırları, addListener oluşturucusu içinde işlev haline gelir.

Şimdi haritadaki bir KML özelliğini her tıkladığınızda, kenar çubuğu bilgi penceresi içeriğini görüntüleyecek şekilde güncellenir.

Daha fazla bilgi

KML dosyalarının kullanımı hakkında daha fazla bilgi edinin.