Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim “JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi” sonrası yüklenen haritadaki özellikleri nasıl custom şekilde yönetilebilir bir yapıya getirebileceğinizden bahsedeceğim.
Bu yazıda yapacağımız işlem ilk olarak ilk yüklenişteki haritada gelen tüm kontrollerin haritada görünmesini kapatarak harita görünümünü kendi kontrolümüzü ekleyip onun üzerinden değiştirme işlemini yapacağız.
Google bize toplamda 4 tane görünüm sunmaktadır. Bunlar “ROAD MAP”, “SATELLITE”, “HYBRID” ve “TERRAIN” isimleri ile geçmektedir. Bu görünümleri önceki yazımızdaki haritada da ya da görünümden kaldırılmamış herhangi bir google haritasında sol üst tarafında da görebilirsiniz.
Daha önceki yazıdaki süreçten devam edersek ilk yükleme işlemini aşağıdaki “initMap” functionu ile yapmıştık.
1 2 3 |
function initMap() { var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }}); } |
İlk olarak bu harita yüklendiği sırada verdiğimiz özelliklere default görünüm için “mapTypeId” parametresini ve değerini de ilk görünümüm “ROAD MAP” olması için “roadmap” olarak tanımlıyorum. Haritadaki tüm kontrolleri gizlemek için ise “disableDefaultUI” parametresini “true” olarak işaretliyoruz.
Bu değişikliklerin yanı sıra tekrar özellik güncelleme işlemi yapabilmem için “map” tanımlamamı fonksiyonumun dışına çıkarmam gerekmektedir. Tüm bu değişiklikler yapıldığı zaman tüm kodum 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 24 25 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }, mapTypeId: 'roadmap', disableDefaultUI: true}); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script> </body> <footer> </footer> </html> |
Daha sonra html tarafımızda bir tane select ekliyoruz. Bu select için tanımlanacak optionlara viewler için aşağıdaki şekilde value tanımlaması yapılması gerekmektedir. Bu tanımlama ile seçilenin value değerini kullanarak tanımlama yapabiliriz.
- ROAD MAP –> roadmap
- SATELLITE –> satellite
- HYBRID –> hybrid
- TERRAIN –> terrain
Bunun yanı sıra select tagımızda dropdown değiştiğinde değişikliği algılayıp işlem yapabilmemiz için selecte “onchange” ekleyip “changeMapType” fonksiyonunu tanımlıyorum. Bu sayede dropdown her değiştiğinde bu fonksiyon tetiklenmesi ile yakalayabileceğim.
İlk yüklenmede default görünümü road map yaptığım için select optionlarında ilk sıraya onu ekliyorum. Tüm bu değişiklikler sonucu kodlarımızın son 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div> <select id="mapViewType" onchange="changeMapType();"> <option value="roadmap">ROAD MAP</option> <option value="satellite">SATELLITE</option> <option value="hybrid">HYBRID</option> <option value="terrain">TERRAIN</option> </select> </div> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }, mapTypeId: 'roadmap', disableDefaultUI: true}); } function changeMapType() { } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script> </body> <footer> </footer> </html> |
Burada “changeMapType” fonksiyonu içerinde seçilen harita görünümüne göre harita görünümünü güncellememiz gerekecek.
Google maps api üzerinde oluşturulan harita üzerinde “setMapTypeId” adında bir fonksiyon ile var olan haritanın görünümü bu fonksiyona verilen görünüm ismi ile güncellenebilir. Bu parametre değerleri ise ropdown içerisindeki seçeneklerimize verdiğimiz value değerleri ile aynıdır. Bu sayede sadece seçilen seçeneğin value değerini bu fonksiyona göndermemiz yeterli olacaktır.
Dışarıdanda da erişebilmemiş için map değerimizi fonsiyon dışına almıştık. Şimdi bunun içerisinde yer alan parametreye aşağıdaki gibi seçilen değeri setleyebiliriz.
1 |
map.setMapTypeId(document.getElementById("mapViewType").value); |
Yukarıdaki harita görünüm değiştirme kodumuzu “changeMapType” fonksiyonumuzun içerisine yazıyoruz ve kodumuz tamamlanıyor.
Son durumda tüm proje kodumuz 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <div> <select id="mapViewType" onchange="changeMapType();"> <option value="roadmap">ROAD MAP</option> <option value="satellite">SATELLITE</option> <option value="hybrid">HYBRID</option> <option value="terrain">TERRAIN</option> </select> </div> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }, mapTypeId: 'roadmap', disableDefaultUI: true}); } function changeMapType() { map.setMapTypeId(document.getElementById("mapViewType").value); } </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 kodumuzu çalıştırıp dropdownda değişiklik yaptığımız zaman aşağıdaki görseldeki gibi haritamızın da görünümünün değişeceğini göreceksiniz.
Bu sayede haritamızın görünüm kontrolünü kendi isteğimize göre yönetebilir hale getirmiş olduk.
İlk Yorumu Siz Yapın