Google Maps JavaScript API V3'e Giriş

Google Maps Api'yi Tanıyalım

Google Maps Api, dünyaca ünlü Google maps uygulamasının bize sunduğu özellikleri kullanarak web, ios, android platformlarında harita etkileşimli uygulamalar geliştirmemizi sağlayan bir api hizmetidir. Görüldüğü gibi Google maps api'si mobil ve web platformlarındaki desteğiyle yazılım geliştirenler için tercih edilen güncel bir api hizmeti sunmaktadır.

google-maps

Bu makalede Google maps api'lerinden web tarayıcıları için sunulan javascript api'sine değineceğiz. Tabi bundan önce bahsedilmesi gereken bazı durumlar var. Google maps daha önceden api key olmadan api desteği vermiyordu.

Google Maps JavaScript API V3 ile beraber bu zorunluluk ortadan kalktı. Ancak Google Maps JavaScript API' si sadece günde 25000 harita yüklenmesine olanak sağladığından kullanım limiti koymaktadır. Bu nedenle limit aşıldığında web sitenize ait api erişimi kapatılmakta veya hata mesajı gönderilmektedir. 25000 gösterime kadar ücretsiz kullanıma izin vermektedir.

Ancak makalede örnek üzerinde göstereceğimizden api key konusu değinilmeyecektir. Api key ile ilgili bilgi almak için https://developers.google.com/maps/documentation/javascript/get-api-key sayfasındaki adımları takip etmek yeterlidir.

Google Maps JavaScript API ile Temel Harita Ekleme

gmjsapi

Google Map JavaScript Api ile web sayfamıza Google map eklemek için basit birkaç işlem yapmamız gereklidir. Bunu html ile basit bir web sayfası hazırlayarak gösterelim. Öncelikli olarak html etiket içersinde temel haritamızı ekleyeceğimiz bir div nesnesi oluşturmamız gerekiyor. Aşağıdaki kodu text editörümüze ekleyelim.

<!DOCTYPE html> <html> <head> <title>Google Maps JS API Örnek</title> <style> #map { width: 1080px; height: 900px; margin: auto; } </style> </head> <body> <div id="map"></div> </body> </html>

Bu kısımda haritamızı hangi html elemanı içine yerleştireceğimizi belirttik. Burada görüldüğü gibi sayfamıza şu ana kadar harita nesnesini eklemedik. Bunu sağlamak için ilk olarak Google Maps Javascript Api'yi sayfamıza yüklememiz gerekli, ikinci olarak harita katmanı oluşturup oluşturduğumuz harita nesnesini yapılandırmamız gereklidir.

Aşağıdaki kod html sayfamıza api'nin yüklenmesini sağlayacaktır.

Burada html <script > etiketi içerisinde görüldüğü gibi async ve defer özellikleri birlikte kullanılmış. Bunun anlamı script kodumuzun sayfa yüklemesinden önce hemen yürütülmesini sağlamak ve daha sonra sayfamızın yüklenmesini sağlamak içindir. Buraya kadar haritamızı sayfamıza eklemek için gerekli kodları belirttik.

Şimdi sayfamızda haritamızı oluşturmak ve yapılandırmak için çalışma yapacağız. İlk olarak bunu sağlayacak script fonksiyonu oluşturup html dokümanına ekliyoruz. <script> function haritaYukle() {} </script> Görüldüğü gibi haritaYukle() fonksiyonu oluşturuldu.

Şimdi fonksiyonumuzun yapacağı işlemi belirtmeye geldi. Bunu yapmak için Google Maps Javascript Api referansında bulunan Map() metodunu kullanarak google maps'i yükleyelim. <script> function haritaYukle() { var mapDiv= document.getElementById('map'); var map= new google.maps.Map(mapDiv, { center: {lat: 41.15, lng: 29}, zoom: 10 }); } </script>

Burada Map() metodu mapDiv ve MapOptions olarak iki parametre almaktadır. Birinci parametre harita hangi html elemanının içinde ise onun kimliği verilmeli, ikinci parametrede oluşturulan haritanın özellikleri verilmelidir. Burada önemli kısım haritamızı yapılandırırken boylam ve enlem değerleri vererek haritamızın konumlanacağı bölgeye ortalamasını sağlıyoruz. zoom özelliği 0-22 arasında bir değer 0 en uzak değeri ifade eder. Bu nedenle 22'ye kadar uygun bir değer vermemiz gereklidir.

Fonksiyonumuzu oluşturduktan sonra bu fonksiyonu çağırarak haritamızın yüklenmesini sağlayacağız. Aşağıdaki kodda fonksiyonun çağrılma şekli gösterilmiştir. <script src="https://maps.googleapis.com/maps/api/js?callback=haritaYukle" async defer></script>

Örnek kodda görüldüğü gibi Google Maps Javascript Api yüklendikten sonra fonksiyonumuz çağrılacaktır. Bunu yapmamızın nedeni fonksiyon çağrıldığında eğer api yüklenmemişse hata vereceğinden bu gibi hatalarla karşılaşmamak için uyguluyoruz. Sırada bunu tek bir html dokümanı olarak kaydederek sayfamızı görüntülemek kalıyor.

Aşağıdaki örnek kodu html olarak kaydedip web tarayıcısında çalıştırıyoruz.

<!DOCTYPE html> <html> <head> <title>Google Maps JS API Örnek</title> <script src="https://maps.googleapis.com/maps/api/js?callback=haritaYukle" async defer></script> <style> #map { width:1280px; height:960px; margin: auto; } </style> </head> <body> <div id="map"></div> <script> function haritaYukle() { var mapDiv= document.getElementById('map'); var map= new google.maps.Map(mapDiv, { center: {lat: 41.15, lng: 29}, zoom: 10 }); } </script> </body> </html>

harita JavaScript Api ile Sayfamıza Eklenen Google Maps

Burada görüleceği gibi js api kullanarak Google maps'i haritamıza ekledik. Bundan sonra haritamıza bir marker verisi ekleyerek makalemizi bitirelim.

Google Maps JavaScript API ile Marker Gösterimi

Marker bilgisini kod üzerinde gerçekleştireceğimizden harita da işaretleme yapmayacağız. Sadece kod tarafında herhangi bir yere JS API'de bulunan Marker sınıfına, marker bilgisi göndererek bunu haritada göstereceğiz.

Js Api'de kullanacağımız marker sınıfını kullanarak gerçekleştireceğiz. Aşağıda marker eklemek için kullandığımız kod ektedir. function haritaYukle () { var LatLng = {lat: 41.012, lng: 28.955}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: LatLng }); var marker = new google.maps.Marker({ position: LatLng, map: map, title: 'Merhaba' }); }

Burada görüldüğü gibi marker sınıfımızın özelliklerini set ettik. Marker'ın konumlanacağı yere konum bilgisi girerek işaretleme yaptık ve haritamızı da bu konum bilgisine ortaladık. Böylelikle marker sembolü harita üzerinde gösterilmiş olacak. Şimdi bu kısmı html dokümanında güncelleyerek aşağıdaki kodu çalıştıralım.

<!DOCTYPE html> <html> <head> <title>Google Maps JS API Marker Örnek</title> <script src="https://maps.googleapis.com/maps/api/js?callback=haritaYukle" async defer></script> <style> #map { width:1280px; height:960px; margin: auto; } </style> </head> <body> <div id="map"></div> <script> function haritaYukle() { var LatLng = {lat: 41.013, lng: 28.955}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: LatLng }); var marker = new google.maps.Marker({ position: LatLng, map: map, title: 'Merhaba' }); } </script> </body> </html>

marker JavaScript Api ile Marker Gösterimi

Marker sınıfını kullanarak haritamıza marker işaretlemesini kod tarafından gerçekleştirdik. Bunun gibi birçok marker gösterebiliriz. Ayrıca marker'ımızı harita üzerinden işaretleyerek te gösterebiliriz. Ancak Google Maps Api ile geliştirilen uygulamalarda çok tercih edilen bir durum olduğu için kod tarafında ekleme yaptık.

Google Maps JavaScript API kullanarak zengin farklı görsel uygulamalar geliştirmek mümkündür.