JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi

1+

Merhaba arkadaşlar bugün sizlere javascript ile google maps api servisini kullanarak html sayfamıza nasıl google harıtaları ekleyeceğimizden bahsedeceğim.

İlk olarak Google Cloud Platform Console sitesine giderek buradan google maps api key almanız gerekmektedir.  Api keyimizi aldıktan sonra bir tane “.html” uzantılı bir sayfa oluşturuyoruz ve bu html sayfasının içine default html taglarımızı ekliyoruz.

Bu kısımda sırası ile kodlarımızı eklememiz gerekmektedir. İlk olarak body tagı içerisine bir “map” id li bir div ekliyoruz. Bu div tagına harıtamızı yükleyeceğiz.

Daha sonraki aşamamızda bu map divi için head tagı içerisine yükseklik ve genişliği belirleyeceğimiz css kodlarının yer alacağı style tagını ve kodlarını ekliyoruz.

Bu css kodlarını eklemediğimiz zaman haritamız yüklenecektir ama herhangi bir yükseklik ve genişlik olmayacağından dolayı sayfa da görünmeyecektir. Bundan sonra js ile sayfamıza google maps apimizi eklememiz gerekmektedir.

Burada scriptimizi body tagının kapanışının hemen üstüne eklememiz gerekiyor. Google maps api url sinde yer alan “key” parametresinin değeri olan “GoogleMapsApiKey” yazan yere aldığımız google maps api keyini yazıyoruz. “callback” parametresinin karşısında yer alan değer “initMap” ise bu api çaprıldığında tetiklenecek olan javascript functionın ismi gelmesi gerekmektedir. Ben function ismini değiştirmiyorum ve hemen üstüne bu isimde bir function oluşturuyorum.

Kalan son işlemimiz ise bu oluştrduğumuz function içerisinde map apimizi kullanarak oluşturduğumuz div içierisine eklemek olacaktır.

Yukarıdaki kodumuzu functionımızın içerisine ekliyoruz. Burada google.maps.Map fonksiyonuna hangi elemente import edeceğini ve özelliklerini belirttik. İlk özellik haritanın zoom oranı diğer özellik ise ilk yüklenmede hangi konumu merkez olacak şekilde haritayı açmasını belirttiğimiz özelliklerdir.

Tüm bu işlemlerden sonra kodumuzun son çalışır hali aşağıdaki gibi olacaktır.

Bu kodu tarayıcı üzerinde açtığımız zaman haritamız aşağıdaki gibi gelecektir.

Gördüğünüz gibi sorunsuz bir şekilde belirlediğimiz özellikler ile haritamız yüklenmiş oldu.

1+

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir