Merhaba arkadaşlar bugün sizlere sayfamıza eklediğimiz google maps haritasında zoom özelliğinin kontrollünü nasıl özelleştirebileceğinizden bahsedeceğim. Daha önceki yazılarımda JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi ve JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme işlemlerinden bahsetmiştim.
Daha önce son güncel kodumuzda harita da gelen özellikleri kapatarak bu özelliklerden harita görünümünü değiştirme işlemini kendimiz eklemiştik. Şimdi de bu özelliğimize ek olarak zoom yapma özelliğini ekleyeceğiz.
İlk olarak ben sayfama range html kodunu ekliyorum ve bunu kullanarak haritamın yakınlaştırma uzaklaştırma özelliğini kontrol etmek istiyorum.
1 2 3 |
<div> <input type="range" min="1" max="12" value="6" id="zoomRange"> </div> |
Burada input “type” olarak “range” veriyoruz ve “min” değerini “1”, “max” değerinin “12” ve tabiki ilk haritam yüklendiğinde default zoom değerini 6 olarak belirlediğim için “value” değerini de “6” olarak belirliyorum. Bu değerler tamamen sizin isteiğinize göre değişiklik gösterebilir.
Daha sonra javascript tarafında bu range değerinin değişimini kontrol ederek değişen değerimizi algılayıp google maps api fonksiyonlarından biri olan ve zoom parametresini güncellememizi sağlayan “setZoom” fonksiyonuna bu parametreyi göndermemiz gerekmektedir.
1 2 3 4 5 |
var zoomRange = document.getElementById("zoomRange"); zoomRange.oninput = function() { map.setZoom(parseInt(this.value)); } |
Yukarıda da gördüğünüz gibi “zoomRange” id li elementimizi alıyorum ve bu elementin “oninput” parametresine bir fonsiyon tanımlayarak burada haritamızın zoom parametresini güncelliyoruz.
“this.value” diyerek belirlenen güncel değeri alıyoruz ama bu değer bize string tipinde geldiği için ve fonksiyonumuz int değer kabul ettiği için aldığımız değeri “parseInt” kullanarak int çeviriyoruz.
Son durumda güncel kodumuzun tamamı 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 38 39 40 41 42 43 44 45 |
<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> <input type="range" min="1" max="12" value="6" id="zoomRange"> </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); } var zoomRange = document.getElementById("zoomRange"); zoomRange.oninput = function() { map.setZoom(parseInt(this.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 kodu sorunsuz bir şekilde çalıştırdığımızda ve range değerimizi değiştirdiğimiz zaman aşağıdaki gibi haritamızın zoom özelliği de değişecektir.
İlk Yorumu Siz Yapın