Google Maps API v3 Kullanımı-1

16 Ekim 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Google Maps API v3

Bir süredir Google Maps API ile önemli oranda bu API’ye dayalı bir proje için uygulamalar geliştiriyoruz. Haliyle bu konuda pek çok tecrübeye sahip oldum. Bunları da özellikle kullanmak isteyen web tasarımcıları / geliştiriciler için elimden geldiğince paylaşmaya çalışacağım. Google Maps’in ne olduğunu anlatmaya gerek yok. Hali hazırda sıklıkla kullanılan bu uygulamayı bir geliştirici gözü ile kullanmak istediğinizde Google Maps API’ın javascript kütüphanesine ciddi bir dalış yapmanız gerekiyor.

Başta hemen hatırlatayım daha önce v2 ile çalışma yapanlar varsa v3’te epey bir değişiklik olduğunu fark edeceklerdir. Özellikle yazım şekilleri bakımından ciddi farklılıklar var. Google Maps API sayfasına gittiğinizde “Deprecated”, yani kaldırılmıştır mesajı ile geliştiriciler bilgilendiriliyor. Bununla ilgili not düşelim. Google Maps API v2 19 Mayıs 2010 tarihi itibarı ile resmi olarak kaldırılmış fakat 19 Mayıs 2013’e kadar çalışmaya devam edecek. Şimdi konumuza geri dönelim..

Nasıl kullanacağız?

Google Maps API ile çalışacaksak “Google Maps Javascript API V3 Reference” sayfası her zaman elimizin altında bulunmalı. İlgili sayfaya aşağıdaki bağlantıdan ulaşabilirsiniz.

https://developers.google.com/maps/documentation/javascript/reference

İlk adım olarak haritayı kullanabilmek için web sayfamıza Google Maps API Javascript  kütüphanesini eklememiz gerekiyor. Bunun için web sayfamızın head etiketleri arasına aşağıdaki kütüphaneyi ekleyerek işe başlıyoruz.

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>

Dikkat ettiyseniz eklediğimiz kütüphanede “sensor=false” şekilden belirtilen bir parametre bulunuyor. true/false değerleri alabilen bu parametre, haritanızın GPS sensörü kullanıp kullanmayacağınızı harita kütüphanesine belirtmekte kullanılıyor.

Bir sonraki adım da haritamızın oluşacağı alanı oluşturmamız gerekiyor. Bunun için de aşağıdaki kodumuzu sayfamıza ekleyeceğiz.

<div id=”mapDiv”></div>

Haritanızın boyutlarını harici ve satıriçi CSS kullanarak belirleyebilirsiniz. Ben de örneğimiz için aşağıdaki kodu kullanacağım.

#mapDiv {width:450px;height:300px;}

Haritayı Başlatma ve Gerekli Ayarlar

Harita üzerinde belirli bir noktaya odaklanmak için Maps API üzerinde latitude ve longitude adı verilen enlem ve boylam değerleri kullanılır. Haritayı başlatmak için gerekli olan bu değerleri ise aşağıdaki kod örneğinde olduğu gibi kullanabiliriz.

var latlng = new google.maps.LatLng(‘latitude değeri’,’longitude değeri’);

Gerçek bir kod örneğini de şu şekilde oluşturabiliriz.

var konum = new google.maps.LatLng(41.033787, 28.649889);

Şimdi gelelim oluşturacağımız haritanın özelliklerini belirlemeye.. Bunun için de aşağıdaki kod parçasını kullanacağım.

var mapOptions = {
      zoom: 12,
      center: konum,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

İlgili Maps API Referansı:
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=en#MapOptions

zoom:” Haritanın yakınlaştırma ve uzaklaştırma değerleri bu bölümde ayarlanır. 0-19 arası değer alabilir. Ancak 18 ve 19 değerleri yalnızca MapTypeId.SATELLITE durumunda verilebilir.

center:” Haritanız başlatıldığında bulunacağı konumun belirtildiği bölümü oluşturur. Ben örneğimizde “konum” ismiyle tanımladığım koordinatları kullanacağım.

mapTypeId:” 4 farklı değer alır. Bunlar;

MapTypeId.ROADMAP – Varsayılan yol haritası görünümü görüntüler.
MapTypeId.SATELLITE – Google Earth uydu görüntülerini görüntüler.
MapTypeId.HYBRID – Normal ve uydu görüntülerinin bir karışımını görüntüler.
MapTypeId.TERRAIN – Arazi bilgilere dayalı fiziksel bir harita görüntüler.

İlgili Maps API Referansı:
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=en#MapTypeId

Oluşturacağımız harita, Google Maps API içerisindeki “map” classından bir map nesnesi türetilerek oluşturulur. Dolayısı ile new operatörünü kullanılarak bu sınıfın yeni bir örneğini kullanıma hazır hale getirebiliriz. Gerekli kodu ise şu şekilde oluşturabiliriz.

var map = new google.maps.Map(document.getElementById(“mapDiv”), mapOptions);

Bu kod bizlere, yukarıda tanımladığımız özelliklerde (Bkz. mapOptions), “mapDiv” üzerinde bir harita oluşturacaktır. Ancak yapacaklarımız bitmedi. Haritamızı web sayfamızın yüklenmesi sırasında initialize etmemiz yani oluşturup başlatmamız gerekiyor. Bunun için de kodumuzun son halini aşağıdaki gibi oluşturabiliriz.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Google Maps API v3 Örneği</title>
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>
<style type=”text/css”>
   #mapDiv {width:450px;height:300px;}
</style>
<script type=”text/javascript”>
   function baslat() {
       var konum = new google.maps.LatLng(41.033787, 28.649889);
       var mapOptions = {
           zoom: 12,
           center: konum,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById(“mapDiv”), mapOptions);
   }
</script>
</head>

<body onload=”baslat()”>
   <div id=”mapDiv”></div>
</body>
</html>

Google Maps API ile ilgili pek çok yazı ile daha devam edeceğim. Meraklıları için takip etmesini tavsiye ederim.

Örneğin çalışan haline buradan göz atabilirsiniz.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 17 Ekim 2012 - 06:32

    Hocam, çok iyi bir yazı olmuş. Bazı projelerimde v2 hâlen çalışır durumda, bu yazı ile bu projelerdeki ilgili kısımları rahatlıkla v3′ e güncelleyebilirim. Ellerine, klavyene sağlık.

  2. :DeliPenguen
    17 Ekim 2012 - 07:03

    Teşekkürler hocam. İmkan buldukça adım adım uzuuuun bir yazı dizisi olacak inşallah. Faydalı olduğuna çok sevindim.

  3. Kibarlı Panax
    7 Kasım 2012 - 10:39

    Güzel bilgilendirme olmuş teşekkürler.

  4. 11 Ocak 2013 - 11:11

    Teşekkürler güzel yazı.

  5. ibrahim
    7 Şubat 2013 - 10:19

    hocam merhaba. benim bir çalışmam var. maps altında kml çizim gösteriyor ve biraz kod ekleyerek çizimleri de tabakalandırdım ve istediğim kml leri gösterip istemediklerimi kapatabiliyorum. fakat bazı problemler yaşamaktayım. en basitinden api kod u bile çalıştıramadım. yardımcı olursanız özel mailinize site adresini ve dosyaları size gönderebilirim. inanın bu maps beni çok bunalttı. eğer projeyi beğenirseniz kendinize uyarlayıp blog sayfanızda da yayınlayabilirsiniz. şimdiden ilginiz için teşekkür eder iyi çalışmalar dilerim.

    • :DeliPenguen
      8 Şubat 2013 - 09:48

      Google Maps ile hiç KML layer’larını tecrübe etmedim. Ama öğrenmek ve yardımcı olmaya çalışmak için projene göz atmayı tabi ki isterim. E-posta adresimi mail adresine gönderiyorum.

  6. ibrahim
    8 Şubat 2013 - 13:55

    merhaba ilginiz için teşekkür ederim. mail gönderdim.

  7. 3 Ağustos 2013 - 02:37

    ben eğitim kampüslerini tanıtmak istiyorum diyelim. tanıtımın altında haritayı otomatik gösterme şansım var mıdır? bu çok kolay olmasa gerek. ya da ayrıca öneriniz var mıdır? teşekkürler

  8. Hikmet
    7 Haziran 2014 - 17:52

    Merhaba;
    Öncelikle faydalı bir anlatımınızdan dolayı teşekkürler. Ben amatör olarak evde ufak projeler yapmaya ve bu şekilde php yi kendimi geliştirmeye çalışıyorum. Aklıma şöyle bir fikir geldi ,olabilirmi diye sizden bilgi almak istiyorum . Diyelimki şirketimizin her ilde ve ilçede 1 den fazla şubesi olsun ve bunların lokasyonlarını sitemize login olanlara gösre bilirmiyiz. Şöyleki
    x bey istanbul , bakırköyde oturuyor sitemize login olduğunda sadece bakırköyde bulunan şubelerimizi görebilirmi ?
    yardımız için şimdiden teşekürler.