Google Maps API Kurulum ve Kullanımı

Tarih: Salı, Ekim 21, 2008 Kategori: Hersey

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.

Bu yazı Fatih Turan tarafından 21 Ekim 2008 17:07 tarihinde yazıldı. 23 yorum var.

İlgili Yazılar:

Google Maps API Kurulum ve Kullanımı Google Maps API ile ilgili bu yazy ne zamandr yazmay...
Google Maps de Önermeye Başladı Özellikle Amerikalı kullanıcıların günlük yaşamlarında sıkça kullandıkları Google Maps *,...
Google Maps ile Yol Tarifleri Alın Bilmiyorum Google Maps ile ne kadar haşır-neşirsiniz fakat ben fazlasıyla...
Web Tasarımlarında Desenlerin Kullanımı Desenin bulunduu katmann(layer) bir altnda bulunan BACKGROUND adl katmann PAINT...
Google Maps’de göremeyeceğiniz 51 yer Web’de yeni bir “çağ” başlatan Google’ın onlarca hizmetinden biri olan...

Tags: ads, galeri, gallery, google, görüntü

Yorumlar

Henuz yorum yok.

Yorum Yaz

Translator



By N2H

Kategoriler

Last searched terms

Online Ziyaretciler

04 visitor(s) online
powered by WassUp

Son Yazılar