Google Maps API Kurulum ve Kullanımı

14 Yorum

Google Maps API ile ilgili bu yazıyı ne zamandır yazmayı düşünüyordum. Ama geçen gün Nettuts adlı sitede benden önce Google Maps API ile ilgili bir yazı yazmışlar. Yazının başlığını Google Reader’da gördüğümde “Tüh!” diyerek hayıflandım. E ne demişler: “Atamayana atarlar!”, pardon “Yazamassan yazarlar!”. xD

Yine de ben kendi blogumda Google Maps API hakkında yazı yazmak istedim. Ne de olsa herkes İngilizce’den anlamıyor. Hem Türkçe kaynak da az bu tür konularla ilgili. Yani bu yazı Nettuts’daki yazının çevirisi olmayacak.

Google Maps API’de Neyin Nesi?

Google’ın interaktif harita servisini yani Google Maps‘ı biliyorsunuzdur. İşte Google Maps API ile de kendi web sitemize veya web uygulamamıza Javascript aracılığıyla etkileşimli harita uygulamalarını yerleştirebiliyoruz.

Google Maps API‘nin o kadar gelişmiş özellikleri var ki insan Google Maps API Demo Galerisindeki örneklere bakınca aklı bitiyor. :) Kısacası Google Maps API ile basit haritaların yanısıra gelişmiş özelliklere sahip harita uygulamaları da oluşturabiliyoruz.

Google Maps API Kurulumu

Kurulum için ilk önce Google Maps API üyelik sayfasından haritayı kullanacağımız alan adına özgü anahtar almamız gerekiyor. Bu anahtar ile haritamız sadece üye olurkenki yazdığımız alan adında çalışacaktır. Aynı anahtar ile başka bir alan adında harita uygulamanız çalışmayacak. Farklı alan adlarında da Google Maps API’yi kullanmak istiyorsanız her farklı alan adı için yeni bir anahtar almanız gerekiyor.

Ben örnek için yukarıdaki ekran görüntüsündeki gibi kendi alan adıma ait bir API anahtarı aldım. Üye olduktan sonra aşağıdaki gibi anahtarınızı, hangi alan adı için aldığınızı ve bir de kullanımına dair küçük bir örnek veriyor.

Google Maps API Kullanımı

Anahtarımızı aldığımıza göre haritamızı sayfamıza entegre edebiliriz. Şimdi bunun için aşağıda bir örnek hazırladım. Eğer isterseniz örneği direkt olarak bilgisayarınızda indirip inceleyebilirsiniz. Örneği inceledikten sonra kodlara dair açıklamaları okuyabilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Google Maps API Örneği</title>
 
<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Google Maps API Örneği" />
<meta name="author" content="Fatih Turan" />
<meta name="robots" content="index,follow" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-language" content="tr-TR" />
<!--/META-->
 
<!--STYLES-->
<style type="text/css" media="screen">
	* { margin:0; padding:0 }
	div#map { width:500px; height:500px }
</style>
<!--/STYLES-->
 
<!--SCRIPTS-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAApJ4fZWusAp4s0nPrMcxM0xRWK7WhrfsCEgcYY7INOmv0f1t97hTy6mNriyUhaj8OkidWbtIeb_t6hA" type="text/javascript"></script>
<script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(41.02407481503792, 40.52083969116211), 14);
      }
    }
</script>
<!--/SCRIPTS-->
 
</head>
 
<body onload="load()" onunload="GUnload()">
<div id="map">
	<noscript><img src="rize.png" alt="Rize" /></noscript>
</div>
</body>
 
</html>

Örnek Açıklaması:

Satır 20′deki CSS kodu sayesinde haritanın yer aldığı div‘in boyutunu ayarladım.
Satır 25′de Google Maps API için Javascript dosyasının yolu (direkt Google sunucusundan çağırıyoruz) ve az önce aldığımız anahtarı key adlı değişkene giriyoruz.
Satır 29′da hangi div elementi üstünde haritayı göstermek istiyorsak onun id’sini yazıyoruz. Ben örnekte map olarak belirledim.
Satır 30′da haritanın nereyi göstereceğine dair koordinatları belirtiyoruz. Koordinatları belirlemek için birçok yol bulunmakta. Fakat ben size Get Lan Lon adlı aracı öneriyorum.
Satır 38′de haritanın sayfa yüklendiğinde çalışması için load() fonksiyonunu, sayfadan çıktığımızda bellek sızıntısı oluşmaması için de GUnload() adlı fonksiyonu çağırdım.
Satır 39′da sayfa üzerinde haritanın gösterileceği alanı div elementi olarak tanımladım.
Son olarak satır 40′da da tarayıcının Javascript özelliği kapalı olduğunda haritanın statik görselini göstermesi için noscript etiketinden yararlandım. Siz de bu görseli klavyenizden Print Screen tuşu ile alabilirsiniz.

Üstte yer alan maddelerdeki sonuncusunda dile getirdiğim tarayıcıdaki Javascript’in kapalı olma durumunda statik görsel yerleştirme yöntemi yerine yeni farkettiğim daha iyi bir yöntem olan Google Static Maps API‘yi kullanabilirsiniz. Bu konu ile ilgili ayrıntıları daha sonra ayrı bir yazı ile açıklamayı düşünüyorum.

Haritamız Hazır

Nihayet haritamız kullanım için hazır. Az önce tek tek açıklamasını yazdığım örneği şimdi canlı olarak görebilirsiniz.

Ayrıca Google Maps API ile ilgili bir tane daha yazı yazmayı düşünüyorum. Oluşturduğumuz haritayı nasıl daha fazla özelleştirebileceğimize dair bilgiler vereceğim. Şimdilik Google Maps API ile ilgili belgeleri, örnekleri ve uygulamaları incelemenizi tavsiye ediyorum.

Tarih: 21 Ekim 2008 17:07
Geri İzleme Yap
Kategori: Web Tasarım, İpuçları
Bu Yazıyı Paylaş

Yorumlar

Bu yazı hakkında 14 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?

Fatih API Key edindiğin ekranda senin Key gözüküyor açık olarak. Ne olur ne olmaz, bir piskopat çıkar, üşenmeyip Key’ini kopyalar, bir şeyler yapar, Google senden bilir. Ufak bir blur yap istersen.

Emre Erkan → http://www.karalamalar.net 21 Ekim 2008 17:25
@Emre: Ne yapabilirler ki? :) Bu key sadece benim alan adım üzerinde çalışıyor. Diğer türlü çalışmıyor.

fatihturan → http://www.fatihturan.com 21 Ekim 2008 17:28
Off off, on işi bir arada yapınca böyle oluyor. :) Çok düşünmeden yazdım. Mantıken saçma da olur zaten çünkü kodun içerisinde veriyosun KEY’i. İstedikten sonra ulaşılamayacak bir şey değil. Nasıl gizleyebilirsin ki. İstemci taraflı bir uygulama.

Ben hemen şimdi bir şekilde senin hesabı haklayıp bir şeyler yazayım, tezimi bir şekilde haklı çıkartayım :p

Emre Erkan → http://www.karalamalar.net 21 Ekim 2008 17:43
Google maps sayfasına girip haritada yerimizi seçtikten sonra sağ üst köşede Bağlantı bu şekildede oluyor. Fatih kardeş bunun ne artısı oluyor_? Bi aydınlatırmısın xD

Ergin KARAOSMAN → http://ergin53.tr.cx 22 Ekim 2008 00:21
@Emre: Olur böyle vakalar. :)

@Ergin: Abicim bahsettiğin yöntemle sadece haritayı eklersin. Herhangi bir etkileşim haritaya katamassın. Yukarıda bağlantısını verdiğim uygulama ve örneklere bi gözat, ne demek istediğimi anlayacaksın.

fatihturan → http://www.fatihturan.com 22 Ekim 2008 00:39
Fatih, ellerine sağlık, gayet açık ve net anlatmışsın, ayrıca kod satırlarında neler olduğunu açıklamanda doğru, Google Maps API ile ilgili ikinci paylaşımınıda bekliyorum.

Volkan Görgülü → http://www.webdeneyimleri.com 22 Ekim 2008 23:26
Cidden sade ve anlaşılır bir anlatım olmuş. Elinize sağlık.

Sedat Kumcu → http://www.sedat.web.tr 22 Ekim 2008 23:58
Merhaba, makale için çok teşekkürler gerçekten işime yaradı.Örnekleri biraz inceleyerek bir kaç yakınlaştırma fonksiyonuda ekledim. Ancakbir sorum var; yol tarifi konusunda bilgi verebilirmisin? Gerekirse ben tanımlarım tek tek yolları.

Eray Alakese → http://www.erayalakese.com 23 Ekim 2008 15:25
Yerli kaynaklar çoğaldıkça birşeylerin daha iyi olacağına inanıyorum. Google Map API gerçektende mükemmel, gelişmiş özellikleri sayesinde çok çok kaliteli uygulamalar ortaya çıkabiliyor.
Örneğin http://www.who-s-web.com/
Paylaşımların devamını merakla bekliyorum.

Yucel Eroglu → http://blog.yuceleroglu.com 23 Ekim 2008 16:22
@Eray: Yol tarifi konusunda buradaki yazıları okuyarak bilgi alabilirsin.

fatihturan → http://www.fatihturan.com 23 Ekim 2008 17:06
Tebrikler uzun bir zamandır Google Api Key hakkında geniş açıklamalı bir yazı arıyordum. Çok faydalandım…
Zeynel Eroglu

medyum → http://medyumca.com 06 Aralık 2008 18:44
Tebrikler…
Uzun bir zamandır Google Api Key le alakalı düzgün bir makale arıyordum. Çok faydalandım.

Medyum Zeynel Hoca → http://medyumca.com 06 Aralık 2008 18:47
Güzel bir anlatım olmuş. Oldukça işime yaradı. Teşekkür ederim…

hasan codek → http://www.hizliindir.com 08 Aralık 2008 03:00
Merhaba, siteye gelen üye ve ziyaretçilerin ip nosundan aşağıdaki linkteki gibi yer tespitini haritada gösteren kodu ekleyebilirmisiniz. Saygılar..

http://www.geoiptool.com/en/?IP=88.230.115.207

Muhammet → http://www.ozankoyu.net 05 Ocak 2009 22:09

Reaksiyonlar

Bu yazı hakkında 2 pingback ve 1 trackback yapıldı.

Yorum Yaz

Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.

Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.