2

Web siteniz için Yandex.Haritalar API

Yandex Haritalar’ı sadece iletişim sayfalarınızda kullanıyorsanız, onunla gerçekte neler yapabileceğinizi bilmiyorsunuz demektir. Yandex Haritalar’ın sahip olduğu yetenekler sayesinde dahiyane web servisleri geliştirebilirsiniz.

Bu günlerde hizmet odaklı web siteleri, içerik odaklı web sitelerinden daha çok ilgi görüyor. Eğer siz de kısa yoldan zengin olma hayalleri kuruyor ve bunu gerçekleştirmek için web fikirleri bulmaya çalışıyorsanız, güçlü ve yetenekli API’lere ihtiyacınız var demektir. Çünkü yapıları gereği API’ler, web fikirlerinizi çok daha kısa sürede hayata geçirmenizi sağlayan başarılı araçlardır. API’ların bir başka güzel tarafı da profesyonel programcı olmasanız bile birçok profesyonel özelliği kolayca sitenizde kullanıma açabilmenizi sağlamaları diyebiliriz.

Ancak bu noktada işin zor kısmı programlama tarafından ziyade parlak bir fikir bulmakta yatıyor. Pazarda hangi servislere ihtiyaç olduğunu, hangi servislerin yükselişte olduğunu ya da hangi API’nin daha doğru bir seçim olduğunu belirlemek çok daha fazla zamanınızı alacak emin olun. Bu birkaç sorudan yola çıkarak piyasamızı gözden geçirirsek harita tabanlı servislerin ya da uygulamaların yükselişte olduğunu görebiliriz. Örneğin, ziyaretçilerin bulundukları noktadan bir başka noktaya (mesela bir metro durağına, okula ya da bir mağazaya) nasıl gidebileceklerini anlık trafik bilgisi ile veren bir servis düşleyin. Gerçekten faydalı olmaz mıydı?

O halde ülkemizi her noktasına kadar içeren bir harita API’si bulmamız gerekiyor: Yandex Haritalar.

Neden Yandex Haritalar?

Yandex’in harita servisi ülkemizde yerelleştirme çalışmaları yaptığından dolayı, hemen her cadde ve sokağa ait detaylı verilere sahip. Bunun yanı sıra anlık trafik verisi paylaşımına sahip olduğundan dolayı diğer harita API’lerinin bir adım önünde yer alıyor. Üstelik kullanımı bir hayli kolay. Gelin, API’nin özelliklerine bir örnek uygulama ile göz atalım.

Yandex.Haritalar’ı projenize nasıl eklersiniz?

Öncelikle işe bir metin editörü açarak başlıyoruz. Eğer halihazırda kullandığınız bir HTML editörü varsa (mesela Adobe Dw ya da Aptana gibi) onu da kullanabilirsiniz. Ama notepad rahatlıkla işimizi görecektir.

Oluşturduğumuz boş HTML dosyasında yer alan <head></head> etiketleri arasına API’mizin yolunu ekliyoruz.

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=tr-TR" type="text/javascript"></script>

Bu satır sayesinde web projemizde Yandex.Haritalar’ın tüm özelliklerini kullanabileceğiz. Eğer farklı bir dilde çalışmanız gerekiyorsa “lang=tr-TR” kısmını değiştirmeniz gerekiyor.

Haritanızın bir merkezi olmalı!

Bir noktayı haritanız için merkez seçmeniz gerekiyor. Bu nokta bir şehir, kasaba ya da köy bile olabilir. Evet, yanlış okumadınız ülkemizdeki tüm şehir, kasaba ve köyler Yandex haritalarda yerini almış durumda. Hem de trafik bilgisiyle!

Bu aşamada <head></head> etiketi arasında çalışmaya devam ediyoruz. Biz, güzide turistik ilçelerimizden olan Bodrum’u merkez aldık. Siz merkez koordinatlarını dilediğiniz bir başka yerle değiştirebilirsiniz.

<script type="text/javascript">
ymaps.ready(init);

function init () {
   var myMap = new ymaps.Map('map', {
           center: [37.03887524420808, 27.40575893347539],
           zoom: 12
       });
</script>

1

Placemark ekleyelim

Haritalarla çalışırken olmazsa olmazların başını kuşkusuz POI’ler çekiyor. Servisinizi daha kullanışlı ve ziyaretçileriniz için daha çekici hale getirmek adına bazı genel POI’lere yer verebilirsiniz. Mesela metro durakları, benzinciler ya da okullar gibi. Bunların haricinde şirketinize ait bayiileri veya ilgi çekeceğini düşündüğünüz diğer verileri de rahatlıkla haritanız üzerinde gösterebilirsiniz. Bunun için koordinatlarını bildiğiniz (koordinatlarını bilmediğiniz verileri Yandex’in kendi harita servisinden elde edebilirsiniz) noktaları haritanıza kolayca ekleyebilirsiniz.

<script type="text/javascript">
ymaps.ready(init);

function init () {
   var myMap = new ymaps.Map('map', {
           center: [37.0388, 27.4057],
           zoom: 12
       }),
myPlacemark = new ymaps.Placemark([37.0388, 27.4057], {
           content: 'Bodrum!',
           balloonContent: '7th Wonder of World is here!'
       });
</script>

 

Haritanıza kontroller ekleyerek onu daha çekici hale getirebilirsiniz

Servisinizi daha kullanışlı hale getirmek adına Yandex Haritalar API’sinin sunduğu kullanıcı taraflı kontrolleri görünür yapabilirsiniz. Kontrollerin detaylarına http://api.yandex.com.tr/maps/doc/jsapi/2.x/dg/concepts/controls.xml adresinden ulaşabilirsiniz. Biz “arama” ve “zum kontrol” gibi en çok kullanılan özellikleri ekleyeceğiz. Siz dilediğiniz kontrolleri ekleyebilirsiniz.

<script type="text/javascript">
ymaps.ready(init);

function init () {
   var myMap = new ymaps.Map('map', {
           center: [37.0388, 27.4057],
           zoom: 12
       }),
       myPlacemark = new ymaps.Placemark([37.0388, 27.4057], {
           content: 'Bodrum!',
           balloonContent: '7th Wonder of World is here!'
       });

   myMap.controls
       .add('searchControl', { left:5, top: 5 })
       .add('smallZoomControl', { left: 5, top: 165 })
       .add('typeSelector')
       .add('mapTools', { left: 5, top: 460 })
       .add('trafficControl', { left: 270, top: 5 });

   myMap.geoObjects.add(myPlacemark);
}

2

Gösteri zamanı!

Örnek uygulamamızdaki servisimizin JavaScript kodlama tarafını tamamladık. Şimdi ziyaretçilerimizi karşılayacak HTML kodlarını yazma zamanı. Bu kısım sizin tasarım yeteneğinizle yakından ilişkili olduğundan hayal gücünüzü kullanmanızı tavsiye ederek, basit bir harita alanı açmakla yetiniyoruz.

Bu aşamada artık <head></head> etiketleriyle işimizi bitirdiğimizi hatırlatarak <body></body> etiketi arasına kod yazmaya başlıyoruz.

<body>
<center>
   <h3>Bodrum's Traffic Jam</h3>
   <div id="map" style="width:600px; height:500px"></div>
</center>
</body>

Kodumuzun tamamını görme zamanı

Bu aşamada artık servisimizi oluşturan Javascript ve HTML kodlarının tamamına sahip olmuş oluyoruz. Yani örnek uygulamamız tamamlanmış oluyor. Elinizdeki kod tam olarak şuna benziyor olmalı:

<!DOCTYPE html>

<html>

<head>
   <title>Bodrum's Traffic Jam</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=tr-TR" type="text/javascript"></script>

<script type="text/javascript">
ymaps.ready(init);

function init () {
   var myMap = new ymaps.Map('map', {
           center: [37.0388, 27.4057],
           zoom: 12
       }),
       myPlacemark = new ymaps.Placemark([37.03887524420808, 27.40575893347539], {
           content: 'Bodrum!',
           balloonContent: '7th Wonder of World is here!'
       });

   myMap.controls
       .add('searchControl', { left:5, top: 5 })
       .add('smallZoomControl', { left: 5, top: 165 })
       .add('typeSelector')
       .add('mapTools', { left: 5, top: 460 })
       .add('trafficControl', { left: 270, top: 5 });

               myMap.geoObjects.add(myPlacemark);
}
</script>
</head>
<body>
   <h3>Bodrum's Traffic Jam</h3>
   <div id="map" style="width:600px; height:500px"></div>
</body>
</html>

3

Artık yapının iskeleti elinizde bulunuyor. Bundan sonrası hayal gücünüze ve servisinizin yapısına bağlı olarak size kalıyor.

İyi fikir!

Uygulamaya başlamadan önce http://api.yandex.com.tr/maps/doc/jsapi/2.x/dg/concepts/load.xml adresini ziyaret etmenizde fayda var. Bu adres, API kullanımı hakkında birçok ipucu ve yazımızda bahsetmediğimiz özelliğe ev sahipliği yapıyor. Sayfada yer alan parametre tablosunu incelemeniz size oldukça fayda sağlayacak.

İyi fikir!

Yandex haritaları sitenize ya da projelerinize eklemenin bir diğer basit yolu da http://api.yandex.com.tr/maps/ adresindeki harita sihirbazını kullanmak diyebiliriz. Sadece bir kaç basit adımda kolayca kendinize özel haritalar oluşturabilirsiniz.

2 yorum

  1. alper

    bu olayı sitemizde yayınladığımızda aynı zamanda Chrome ve I.Explorer’da ve mobil’lerde görüntülenme durumu nedir ? Konu hak. yardımcı olabileceklerin kaydedilen(at)gmail.com ‘a iletmesini özellikle rica ediyor ve teşekkürler ediyorum.

  2. jangadeiro

    Yandex Maps API, Javascript’in aktif edildiği tüm tarayıcılarda (platform bağımsız; mobil ya da masaüstü) sorunsuz görüntüleniyor.

Yorum yazın