Google Maps API Kurulum ve Kullanımı

40 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 40 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
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
Google API leri kullanım şartlarıyla ilgili bilginiz var mı acaba? Ben sitemden para kazanıyor olsamda yani ticari bir sitem olsada API leri kullanabilir miyim? sorun olur mu?

Yasar Yavuz 23 Ocak 2009 19:05
@Yaşar: Bildiğim kadarıyla Google tarafından herhangi bir ticari kısıtlama getirilmemiş bu apiye. Dilediğin gibi kullanabilirsin. ;)

fatihturan → http://www.fatihturan.com 23 Ocak 2009 19:21
Merhabalar Çok güzel bir paylaşım olmuş yanlız bir sorum olacak, emlak sitelerindeki gibi herhangi bir yeri sayfamıza ekluyecek bir eklenti mevcut mu farklı sayfalarda farklı yerleri göstermek istiyorum ne yapabilirim .teşekkürler..

Avşa adası → http://www.avsaadasi.web.tr 31 Ocak 2009 14:45
@Avşa Adası: Bahsettiğiniz tarzda herhangi bir eklenti bilmiyorum. Ama bahsettiğiniz şeyi bir programcıya yaptırabilirsiniz.

fatihturan → http://www.fatihturan.com 31 Ocak 2009 15:05
Merhabalar,

Şöyle bir sorum olacak size;

Bu web sitesinde kullanılan Google Haritalar API anahtarı farklı bir web sitesi için kayıtlı. http://code.google.com/apis/maps/ adresinde bu web sitesi için yeni bir anahtar oluşturabilirsiniz.

diye bir hata oluyorum ne yapabilirim?

Şimdiden teşekkürler..

kadir 27 Şubat 2009 13:59
@Kadir: Ben de en son bir web sitesinde Google Maps’i kurarken böyle bir sorunla karşılaştım. Sorunun çözümü aslında basit. Hemen üye olduktan sonraki verilen Javascript kodundaki sensor parametresini true ya da false belirtmek gerekiyor.

Zaten bu sayfada da gerekli açıklama yapılmış.

fatihturan → http://www.fatihturan.com 27 Şubat 2009 14:22
merhaba,
bende de aynı hatayı veriyor.

Sorunun çözümü aslında basit. Hemen üye olduktan sonraki verilen Javascript kodundaki sensor parametresini true ya da false belirtmek gerekiyor.

demişsiniz. verilen kod içerisinde zaten o şekilde yazılmış..

“<script src=”http://maps.google.com/maps?file=api&v=2&sensor=true_or_false…..”

burayı değştirmek mi gerekiyo, anlayamadım.

Abdullah → http://www.izmitten.com 04 Nisan 2009 16:35
@Abdullah: sensor parametresini sensor=false olarak ayarlaman yeterli. Sonrasında çalışması gerekiyor.

fatihturan → http://www.fatihturan.com 04 Nisan 2009 16:40
“sensor parametresini sensor=false olarak ayarlaman yeterli. Sonrasında çalışması gerekiyor.”

Allah razı olsun.. Halletim, çok teşekkürler.

Abdullah → http://www.izmitten.com 04 Nisan 2009 17:07
Merhaba,
birden fazla nokta gösterimini acaba nasıl saglarım?

Nurettin → http://www.tasarimrehberi.net 24 Kasım 2009 14:37
harika bir anlatım sayenizde ilk denememde haritayı ekleyebildim sayfama.
Çok teşekkürler devamını bekliyoruz:)

kardelen 07 Aralık 2009 01:40
Merhaba yazınız için teşekkür ederim.
Ben google mapsi kullanarak ülkeler ve şehirler arası mesafeyi hesaplatmak istiyorum.
Bunu da kendi veri tabanımdan çekip combo listeme aktarıyorum. Birinciden seçilen ülkeye göre ikincisinde o ülkenin şehirleri çıkıyor. Oradan da bir şehir seçiliyor. Bu seçilen ülke ve şehri google maps te gösterip aralarındaki mesafeyi hesaplatmak istiyorum.
Bunu nasıl yapabilirim ve şu location kısmına neye göre değer veriyoruz.
Bunları PHP de yapacağım.
Cevabınız için şimdiden teşekkürler.

Ugur → http://www.jooweb.net 02 Ocak 2010 23:02
@Uğur: Google’ın vermiş olduğu dökümantasyonda Directions başlığı altındaki bilgileri incelemeni öneririm.

fatihturan → http://www.fatihturan.com 03 Ocak 2010 13:45
İlk denememde haritayı ekleyebildim sayfama.
Çok teşekkürler.

Silver → http://www.spitall.com/ 18 Ocak 2010 17:21
merhabalar Fatih bey benim otopazarci.net oto ilan sitem var ilan detaylarında ilanı giren kişinin otomatik adresten çekerek aşağıda haritada gösterimini yapıyor yani bunun için
Longitude
Latitude
ölçeklerini girmem gerekiyor bana bu bilgiler lazım yada sizin yukarda verdiğiniz işlem bunumu anlatmak istiyor bu konuda yardımcı olursanız sevinirim kolay gelsin

Fatih Taşkın → http://otopazarci.net 26 Ocak 2010 17:18
Merhabalar Fatih
Şöyle bir sorum olacaktı .com uzantılı site için aldığım api com.tr de çalışmıyor benim com.tr de .com a yönlendirilmiş durumda yani aynı site açılıyor farklı bir sayfa yapmam söz konusu değil.
Yani Tek haritada iki api birden kullanmak mümkünmüdür ?

Süleyman Yılmaz → http://www.syilmaz.net 28 Ocak 2010 11:44
Fatih hocam bunu windows formsda nasıl yaparız

Ulas Ergun 18 Şubat 2010 12:31
benim yapmak istediğim veri tabanından koordinatları çekip haritada yerini göstermek. Buraya kadar yaptım. Fakat istediğim webbrowserda googlenin shearc ısmı (beyaz zeminli kısım) görünmesin sadece harita görünsün istiyorum . Nasıl yaparım.

Ulas Ergun 18 Şubat 2010 13:35
@Fatih Taşkın: Yazımda latitude (enlem) ve longitude (boylam) bilgilerini elle girerek, Google Maps ile basit bir harita yapmayı anlattım. Anladığım kadarıyla enlem ve boylamı bulmayı, ilan veren kişinin girdiği adrese göre yapmanız gerekiyor. Buradaki dökümanda yer alan Geocoding başlığı altındaki bilgilere bakmanızı öneririm. Hatta burada bir örnek bile var bu konuyla ilgili.

@Süleyman Yılmaz: .com.tr uzantılı alan adını nasıl yönlendirdin bilmiyorum ama eğer .com domainine doğru yönlendirme yapabildiysen ve .com için Google Maps API anahtarı almışsan sorunsuz düzgün çalışması gerekir diye düşünüyorum. Ayrıca burada API anahtarı hakkında birtakım bilgiler var. Umarım işine yarar.

@Ulaş: Bir ekran görüntüsünü benimle paylaşırsan belki daha rahat anlayabilirim sorununu. Şu an için pek birşey anlayamadım açıkcası.

fatihturan → http://www.fatihturan.com 18 Şubat 2010 15:31
http://i48.tinypic.com/34nptmu.jpg Link bu. istediğim şey webbrowserda sadece harita olucak ve webbrowserı doldurucak. Beyaz zeminli kısım görünmeyecek.

Ulas Ergun 18 Şubat 2010 15:56
@Ulaş: Şimdi anladım. Sen direkt maps.google.com adresinden harita ekletiyorsun. Ben bu yazımda kendi alan adında özel olarak oluşturabileceğin haritalardan bahsettim.

Bana kalırsa senin yapman gereken bir alan adı alman ve ardından yukarıda yazdığım şekilde bir harita oluşturman.

Sonra da bu gösterdiğin özel uygulamanda o haritanı kullanabilirsin. Böylece sadece haritayı gösterebileceksin.

fatihturan → http://www.fatihturan.com 18 Şubat 2010 16:04
Merhaba, anlatımınız için teşekkür ederim. kendi oluşturduğum bir haritam var. Üzerinde yüz kadar nokta işaretlemiş ve genelin görmesine açmışım.
Bazen forumumdaki bir konu hakkında bir nokta işaretlemem lazım geliyor. javalar ve html açık olmadığı için, static map kullanıyorum. marker bir noktaya yerleşiyor ve tıklandığında haritamada gidiyor.
Buraya kadar herşey güzel fakat ben istiyorumki staticmap kendi haritam üzerindeki önceden işaretlediğim noktalarıda getirsin.
Sadece marker olarak işaretlediğim noktayı gösteriyor, önceki ve yanındaki işaretlemiş olduklarımı göstermiyor.
Çözüm varmı acaba ?

mehmet akpek → http://www.nizip.com 03 Mart 2010 22:28
fatih kardeş ben daha yenıyım de bu o sıte yı tanıtma yanı harıtanın yuklenecegı sıte adresını nereye yazacagımı bulamadım nasıl oluyor yardımcı olur musun?

umut dudak → http://umutdudak.tr.gg 16 Mart 2010 19:52
Dersiniz için teşekkür ederim.

Benim bir sorum vardı. Örneğin aldığımız bu api ile haritada bir kaç yeri gösterebiliyor muyuz.
Yoksa sadece tek bir yer göstermek için mi alınıyor?

Fatih Kızıltoprak → http://www.google.com 06 Mayıs 2010 16:23
iyi günler fatih hocam bi sorum olucaktı.Öncelikle paylaşım için çok teşekürler.Fakat ekledığimiz bu haritaya zoom+ , zoom-,şağ,sol,yukarı,aşağı tuşları nasıl ekleyebiliriz.Birde bu harita üzerinde istediğimiz bir noktaya naıl işaret koyabiliriz.Cevabınız için şimdiden teşekürler.

şahin kurt 15 Mayıs 2010 23:50
Fatih Abi,
Google MAPS için bir de şu mark mevzuları falan var, yani yeri işaretleyip kodunu alma falan var ya… Onları da anlatmanız mümkün mü?
Bunun dışında canı sıkılan API yapmış, bu gidişle Ahiret API da çıkacak ve Ahiretle ilgili verileri çekeceğiz:)
Mesela Zoho.com da API yapmış, rememberthemlik.com da, bunların kullanımları hakkında da bilgi verirmisiniz?
Bir de API’lari ne zaman kullanmak iyi, ne zaman kötüdür önerilerinizi okumak isterük.
Saygılarımla…

Suat ATAN → http://www.suatatan.com 12 Temmuz 2010 23:51
Merhaba,

Benim sorunum google maps ‘ı LAN da kullanamamak. Kendi bilgisayarımda herşey düzgün çalışıyor ama LAN daki başka bir bilgisayara benim bilgisayarımdaki siteye girdiğinde “başka bir API key gerektiriyor” uyarısı ile karşılaşıyorlar. İnternetimizin sabit IP si için (Tabiiki eksternal IP için, lokal IP için değil.) bir API key alıp denedim yine durum değişmedi. Bunun bir çözümü var mı acaba?

Yardımınız için şimdiden Teşekkür ederim. .

Adem kızıldağ → http://www.bayraktargroup.com.tr 06 Ağustos 2010 18:11
qıblelacator.com gibi siteler kıbleyi gösterebiliyorlar. bunu nasıl yaptıkları hakkında bilgi verebilirmisiniz ? Cep telefonları için benzer bir sistem üzerinde çalışıyorumda

behcet 07 Ağustos 2010 10:01

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.