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.
|
1 2 3 4 5 6 7 8 |
<html> <head> </head> <body> </body> <footer> </footer> </html> |
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.
|
1 2 3 4 5 6 7 8 9 |
<html> <head> </head> <body> <div id="map"></div> </body> <footer> </footer> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> </body> <footer> </footer> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script> </body> <footer> </footer> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> <script> function initMap() { } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script> </body> <footer> </footer> </html> |
Kalan son işlemimiz ise bu oluştrduğumuz function içerisinde map apimizi kullanarak oluşturduğumuz div içierisine eklemek olacaktır.
|
1 |
var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }}); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }}); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script> </body> <footer> </footer> </html> |
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.
İlk Yorumu Siz Yapın