Web sitenizde Google haritaları kullanın
Web sitenizde Google haritaları kullanın
Google’ın ücretsiz olarak tüm webmaster’ların kullanımına sunduğu Google Maps API, web sitenize interaktif haritalar eklemenize olanak sunuyor.
Google Maps ya da Türkçe adıyla Google Haritalar, oldukça ayrıntılı haritaları online ortamda interaktif şekilde kullanmamızı sağlıyor. http://maps.google.com adresinden ulaşılan bu servis, dünyanın hemen her yerini uydu ya da harita görünümüyle incelemenizi sağlıyor. Google dendiğinde akla ilk gelen şey olan arama, online harita servisinde de önemli bir yere sahip. Bulmak istediğiniz yerin adını, örneğin bir ilin, ilçenin ya da caddenin adını arama formuna girmeniz yeterli. Google’ın sağladığı ücretsiz online haritalarla tüm cadde ve sokaklar elinizin altında.
Google Maps ya da Türkçe adıyla Google Haritalar, oldukça ayrıntılı haritaları online ortamda interaktif şekilde kullanmamızı sağlıyor. http://maps.google.com adresinden ulaşılan bu servis, dünyanın hemen her yerini uydu ya da harita görünümüyle incelemenizi sağlıyor. Google dendiğinde akla ilk gelen şey olan arama, online harita servisinde de önemli bir yere sahip. Bulmak istediğiniz yerin adını, örneğin bir ilin, ilçenin ya da caddenin adını arama formuna girmeniz yeterli. Google’ın sağladığı ücretsiz online haritalarla tüm cadde ve sokaklar elinizin altında.
Gelelim yazımızın asıl konusuna. Google, harita hizmetinin webmaster’lar tarafından istenen web sitesine entegre edilmesine ve ücretsiz olarak kullanılmasına izin veriyor. Google Maps API (uygulama programlama arayüzü) sayesinde web sitenize haritalar eklemek elinizde. İlk bakışta karmaşık görünse de aslında Google haritalarını web sitenizde görmek için yapmanız gereken şey, birkaç parça kodu kopyalayıp yapıştırmaktan ibaret. Elbette bu konu üzerinde daha fazla zaman geçirerek esaslı uygulamalara da imza atabilirsiniz. Sitenizin veritabanındaki bilgileri haritaların üzerinde konumlandırmak, verilerinize göre haritaların çizilmesini sağlamak da elinizde. Örneğin www.kaybolduk.biz adresindeki online servis Google Maps API temelli ilgi çekici bir uygulama içeriyor. Bu yazıda Google haritalarını en sade haliyle web sitenize eklemenin yollarından bahsedeceğiz ve ayrıntılı uygulamalar geliştirmek isteyenler için bazı ipuçları vermeye çalışacağız.
Google Maps API Key
Google haritalarını web sitenizde kullanmak için öncelikle bir API anahtarı edinmeniz gerekiyor. Google, bu anahtarı API’ın hangi web sitelerinde kullanılmakta olduğunun kaydını tutmak ve istatistikî bilgiler edinmek için zorunlu tutuyor. Bu noktada akla şöyle bir soru gelebilir: “Google, haritalarla birlikte kullanacağım verileri de ele geçirebilir mi?” Yanıt ise hayır. Çünkü Google Maps API ile hazırladığınız uygulamalarda haritaların üzerinde görüntülenen veriler yalnızca tarayıcı tarafından yorumlanmak üzere sizin tarafınızdan sayfaya yazılabilir. Başka bir deyişle web sitenizin veritabanıyla Google Maps API birbirinden bağımsız çalışabiliyor. Öte yandan Google’ın sıradan bir şirket olmadığını, gizlilik prensiplerine sıkıca bağlı kalarak yıllardır milyonlarca kullanıcının güvenini elde etmeyi başardığını unutmamak gerek. Google Maps API’ınızı edinmek için öncelikle http://git.pcnet.com.tr/140 adresini ziyaret etmelisiniz. Bu sayfada servisin kullanım şartları ayrıntılı şekilde yer alıyor ve sizden API’ı kullanacağınız web sitesinin adresi soruluyor.
Bu noktada küçük bir hatırlatma yapalım: Bir site için almış olduğunuz API anahtarıyla başka bir sitede Google haritaları yayınlayamıyorsunuz.
İlk haritanız
Google Maps API anahtarınızın gösterildiği sayfada, ilk haritanızı hazırlamanızda yardımcı olacak birkaç kod da veriliyor. JavaScript, Flash ve HTTP servisi için farklı örnek kodlar görüntüleniyor. Hemen bir deneme yapmak için buradaki kodlardan birini kullanmak yerine yalnızca API anahtarınızı bir yere not ettikten sonra http://git.pcnet.com.tr/141 adresini ziyaret etmenizde fayda var. Bu adresteki sayfada Google Maps API için bir “Hello World” örneği gösterilmiş.
İlk denemenizi yapmak için sayfada bulunan kodları kopyalayarak boş bir HTML dosyasına yapıştırmanız, sonrasında da bu kodlar üzerinde birkaç küçük değişiklik yapmanız gerekiyor. Kodları boş bir sayfaya kopyaladıktan sonra ilk iş olarak aşağıdaki satırı bulun:
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
Uygulamanın çalışması için yukarıdaki satırda “abcdefg” yerine kendi API anahtarınızı girmeniz gerekiyor. Ayrıca yine aynı satırda bulunan “sensor” parametresini belirlemek durumundasınız. Bu parametre, yaptığınız uygulamada kullanıcının yerinin belirlenip belirlenmeyeceğini belirtiyor. İlk denemenizde “sensor= true_or_false” bölümünü “sensor=false” yaparak devam edebilirsiniz. Bu değişiklikleri yaptıktan sonra belgenizi kaydedin ve tarayıcınızda açın. İlk haritanız Google’ın ana kampüsünün yer aldığı Mountain View çevresini görüntülüyor olacak.
Haritanızı isteğinize göre düzenleyin
Uygulamayı yaparken amacımız elbette ziyaretçilerimize Mountain View’ü göstermek değil. Bu yüzden sıra haritanın doğru yeri göstermesini sağlamaya geliyor. Hazırladığınız belgede aşağıdaki satırı bulun:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Bu satırda haritanın merkez noktasının koordinatları ve yakınlaştırma düzeyi belirleniyor. Göstermek istediğiniz noktanın koordinatlarını bulmak için Wikipedia’yı kullanabilirsiniz. Örneğin bu haritanın İstanbul’u göstermesi için kod satırında geçen koordinatların aşağıdaki gibi değiştirilmesi gerekiyor:
map.setCenter(new GLatLng(41.01224, -28.976018), 13);
Yine bu satırda 13 rakamı ile ifade edilen değer, haritanın yakınlaştırma düzeyi. Bu değeri isteğinize göre 0 ile 19 arasında belirleyebiliyorsunuz. 0 en uzak görünümü sağlarken, 19 mümkün olan en çok yakınlaştırmayı (büyütmeyi) sağlıyor. Google haritalarının kimi yerlerde 16’dan fazla yakınlaştırmaya olanak tanımadığını hatırlamakta yarar var.
Haritanızda bir yeri işaretleyin
Google Maps API’ı kullanarak web sitenizin “bize ulaşın” bölümünü renklendirmek istediğinizi varsayalım. Diyelim ki, bu sayfaya ekleyeceğimiz bir haritada şirketimizin ya da evimizin bulunduğu noktayı göstermek ve ziyaretçilerin bizi bulmasını kolaylaştırmak istiyoruz. Bunun için yukarıdaki yönergeleri izleyerek sayfamıza haritamızı ekledikten sonra harita üzerinde bir noktayı işaretlememiz gerekiyor. Google Maps API, bu konuda güzel olanaklar sunuyor.
Koordinatları bulunduğunuz yere göre girdiyseniz, geriye kalan tek şey “İşte buradayız!” diyen bir bilgi balonu hazırlamak. Sayfanızın kodlarında “map.setUIToDefault();” satırının öncesine aşağıdaki satırları yapıştın:
map.openInfoWindowHtml(map.getCenter(),
document.createTextNode("iste buradayiz!"));
Bu satırlar kolayca anlaşılacağı üzere, haritanın ortasında bir HTML bilgi penceresi açılmasını sağlıyor ve “iste buradayiz!” ifadesinin bu pencerenin içine yazılmasını sağlıyor. Bir bilgi balonu şeklinde görünen bu yapının içinde istediğimiz HTML etiketlerini kullanmak, istersek resim yüklemek gibi olanaklarımız da bulunuyor.
Durmayın, geliştirin
Bu yazıda çok basit bir örnekle Google haritalarını web sayfalarınızda nasıl kullanacağınıza değinmeye çalıştık. Siz işi daha ileri götürerek Google Maps API’nın sunduğu diğer olanakları kullanan başarılı uygulamalara imza atabilirsiniz. Veritabanınızdaki bilgileri haritanın üzerine dökmek, kullanıcılarınızın harita üzerinden size veri ulaştırmasını sağlamak gibi yöntemlerle birçok farklı uygulama yapmak mümkün. İşin bundan sonrası biraz da sizin hayal gücünüze kalıyor.
