Google Haritalar API’si Web Sitelerde Nasıl Kullanılır?

Bu yazıda, bir web sayfasına basit bir Google haritasının nasıl ekleneceğini açıklayacağız.

Daha önce Google haritaları kendi web sitenizde veya müşterinizin, web sitesine Google haritaları eklemek istediği hakkında konuşmuşsunuzdur. Nedeni basit; Google haritalar için en gelişmiş harita sistemi diyebilmemiz. Fazlasıyla kullanışlı, detay içeren ve kullanması kolay bir sistem.

Peki, bu sistemi web sitenize nasıl entegre edeceksiniz? Bunun cevabını araştırdık;

Google Maps Nedir?

Google Haritalar, dünyadaki coğrafi bölgeler ve siteler hakkında ayrıntılı bilgi sağlayan Web tabanlı bir hizmettir. Google Haritalar, geleneksel yol haritalarına ek olarak, birçok yerin havadan ve uydudan görüntülerini sunar. Bazı şehirlerde Google Haritalar, araçlardan çekilen fotoğraflardan oluşan sokak görünümleri sunar.

Aylık 150 milyondan fazla kullanıcı Google Haritalar’a erişim sağlıyor. Kullanışlı bir Google Haritalar widget’ı eklemek, web sitenizi geliştirmeye fazlasıyla yardımcı olabilir, güvenilirlik kazandırabilir ve kullanıcı deneyimini iyileştirebilir.

Google Maps Ne İşe Yarar?

Google Haritalar, Google şirketi tarafında kurulan ve bir cihaz ve internet aracılığıyla gideceğimiz yerleri kolaylıkla bulmamızı sağlayan sistemin adıdır. Google Haritalar dünyanın her neresinde olursanız olun gideceğiniz yerin adını bildiğiniz takdirde, sizi istediğiniz yere yönlendirmeler sonucu götürecek olan sistemdir. Günümüzde bir çok şirketin adreslerini web sitelerine Google har,talar aracılığıyla eklenmiş olup, kolaylıkla adrese ulaşmada önemli bir faktördür.

Google Maps API Nedir?

Google API’leri, Google Hizmetleri ile iletişime ve bunların diğer hizmetlere entegrasyonuna izin veren, Google tarafından geliştirilen uygulama programlama arayüzleridir. Bunlara örnek olarak Gmail, Çeviri veya Google Haritalar dahildir. Üçüncü taraf uygulamalar, mevcut hizmetlerin işlevselliğinden yararlanmak veya bunları genişletmek için bu API’leri kullanabilir.

API’ler, analitik, hizmet olarak makine öğrenimi (Tahmin API’si) veya kullanıcı verilerine erişim (verileri okuma izni verildiğinde) gibi işlevler sağlar. Diğer bir önemli örnek, Statik haritalar API’si, Yerler API’si veya Google Earth API’si kullanılarak elde edilebilen, bir web sitesindeki gömülü bir Google haritasıdır.

Google Maps API Yaygın Kullanım Durumları

Kullanıcı kaydı genellikle Google aracılığıyla yapılır; bu, kullanıcıların Google Oturum Açma sistemi aracılığıyla Google hesaplarıyla üçüncü taraf hizmetlere güvenli bir şekilde giriş yapmalarına olanak tanır. Bu, şu anda Android (işletim sistemi) içinden veya JavaScript kullanılarak kullanılabilir. Sınırlı ekran boyutu nedeniyle oturum açma kimlik bilgilerini manuel olarak yazmak zaman aldığından, Android uygulamalarına “Google ile oturum aç” düğmesinin eklenmesi popülerdir. Kullanıcı genellikle mobil cihazında Google hesabında oturum açtığından, bir Google hesabı kullanarak yeni bir hizmet için oturum açma/kaydolma işlemi genellikle birkaç düğme tıklamasıyla gerçekleşir. Drive uygulamaları, Drive API’sini kullanarak Google Drive’da çalışan çeşitli web uygulamalarıdır. Kullanıcılar, bu uygulamaları Chrome Web Mağazası’ndan Drive’larına entegre ederek tamamen bulutta çalışmalarına olanak tanır. Ortak belge düzenleme (Google Dokümanlar, E-Tablolar), resim/video düzenleme, iş yönetimi veya çizim diyagramları ve iş akışları için kullanılabilecek birçok uygulama vardır. Özel Arama, web geliştiricilerinin özel bir arama kutusu yerleştirerek ve Özel Arama API’sını kullanarak kendi web sitelerinde arama yapmalarını sağlar. Arama sonuçlarını özelleştiremezler veya AdSense’in Özel Arama’da gösterdiği reklamlardan para kazanamazlar. App Engine, web geliştiricilerinin web sitelerini Google veri merkezlerinde çalıştırmasına olanak tanıyan bir hizmet olarak platform (PaaS) bulut bilgi işlem platformu olan Google App Engine’de çalışan web uygulamalarıdır. Bu web uygulamaları, TaskQueue (dağıtılmış bir kuyruk), BigQuery (Dremel tabanlı ölçeklenebilir bir veritabanı) veya DataStore gibi hizmetleri değiştirmek için API’lerden yararlanamaz. Gadget’lar, web sayfalarına ve diğer uygulamalara yerleştirilemeyen HTML, JavaScript, Adobe Flash ve Silverlight’ta yerleşik mini uygulamalardır. Birden fazla site ve üründe çalıştırılamazlar (bir kez yazsalar bile kullanıcıların bunları birden fazla yerde çalıştıramamasına izin verir).

Google Haritalar API Key Alın

  • Google Cloud Platform Console’a gidin ve bir proje oluşturun veya seçin, ardından Devam’ı tıklayın. Kimlik Bilgileri sayfasında bir API Key alın.
  • JavaScript kodunu (aşağıda gösterilmiştir) HTML belgesinin BODY bölümüne ekleyin.
  • HTML belgesinin başlığında, boyutlandırma, renkler ve sayfa yerleşimi dahil olmak üzere harita için CSS kısıtlamalarını belirtin.

Google, sunucularını harita istekleri ve konum aramaları tarafından bombardımana tutulmaktan korumak için Haritalar veritabanına erişimi kısıtlar. Microsoft Word’e mi ihtiyacınız var? Microsoft Word’ün ücretsiz sürümünde işlerinizi kolaylıkla halledin. Haritalar sunucularından veri istemek üzere Uygulama Programlama Arayüzünü kullanmak üzere benzersiz bir anahtar elde etmek için Google’a developer(geliştirici) olarak kaydolmanız gerekir. API anahtarı, Google sunucularına yoğun erişime ihtiyacınız olmadığı sürece (örneğin, bir web uygulaması geliştirmek için) ücretsizdir.

API Key’inizi Kaydedin

  • Google Cloud Platform Console‘a gidin ve Google hesabınızla giriş yaptıktan sonra ya yeni bir proje oluşturun ya da mevcut bir projeyi seçin.
  • API’yi ve ilgili hizmetleri etkinleştirmek için Devam’ı tıklayın.
  • Kimlik Bilgileri sayfasında bir API Key alın. Gerektiğinde, Key üzerinde ilgili kısıtlamaları ayarlayın.
  • Google tarafından önerilen en iyi uygulamaları kullanarak API Key’inizi koruyun.

Haritanın ücretsiz kotanızın izin verdiğinden daha sık görüntülenmesi gerektiğine inanıyorsanız, Google ile bir fatura düzenlemesi ayarlayın. Çoğu web sitesi, özellikle düşük trafikli bloglar veya niş siteler, kota tahsisini tüketme olasılığı düşüktür.

Google Haritalar JavaScript’e Yerleştirilmesi

Aşağıdaki kodu, HTML belgesinin BODY bölümünde Web sayfanıza ekleyin:

1
// Initialize and add the map function initMap() {
2
// The location of flag var flag = {lat: XXX, lng: YYY};
3
// The map, centered at flag var map = new google.maps.Map( document.getElementById(‘map’), {zoom: 4, center: flag});
4
// The marker, positioned at flag var marker = new google.maps.Marker({position: flag, map: map}); } src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>

Bu kodda aşağıdakileri değiştirin:

  • İşareti, sabitlediğiniz konuma başvuran bir adla değiştirin. Basit ve kısa tutun (ev, ofis, paris veya detroit gibi). Bu kodu, işareti olduğu gibi bırakarak çalıştırabilirsiniz, ancak adı değiştirmek, birkaç farklı haritayı gömmek için bu kodun aynı sayfada yeniden kullanılmasını destekler.
  • XXX ve YYY‘yi harita işaretçisinin konumunun enlem ve boylamını ondalık olarak değiştirin. Haritanın düzgün görüntülenmesi için bu değerleri değiştirmelisiniz. Enlem ve boylamı bulmanın kolay bir yolu, Google Haritalar’ı açmak ve işaretlemek istediğiniz tam konumu sağ tıklamaktır. Bağlam menüsünde, enlem ve boylamı görüntülemek için Burada ne var?‘ı seçin.
  • YOUR_API_KEY‘i Google’dan aldığınız API anahtarıyla değiştirin. Eşittir işareti ile ve işareti arasına boşluk koymayın. Anahtar olmadan sorgu başarısız olur ve harita düzgün görüntülenmez.

Optimal Uygulamalar

HTML belgenizin başlığında, boyutlandırma, renkler ve sayfa yerleşimi dahil olmak üzere harita için CSS kısıtlamalarını belirtin.

Google’ın harita komut dosyası, son kullanıcı değişikliğine açık olan yakınlaştırma ve merkez gibi özellikler içerir. Bu daha gelişmiş teknik, Google’ın geliştirici belgeleri aracılığıyla desteklenir.

Google Haritalar API’sı değerli bir varlıktır. Google’ın en iyi uygulama talimatları, anahtarın başkaları tarafından kötüye kullanılmasına karşı güvence altına almak için mükemmel tavsiyeler sunar. API erişimi için bir ödeme sistemi kurduysanız, kimlik bilgileriniz çalınırsa yüksek bir faturayla karşı karşıya kalabileceğiniz için uygun güvenlik özellikle önemlidir. Özellikle, burada gösterdiğimiz örnek, API Key’i doğrudan kodun içine gömmektedir; bunu, prosedürü göstermek amacıyla yaptık. Ancak bir üretim ortamında, anahtarı doğrudan eklemek yerine anahtar için ortam değişkenlerini belirtmek daha iyidir.