Google Maps ile İl İlçe Konum Seçimi
Google Maps ile sitemizi kullananların konum belirtmede il, ilçe seçerek ilgili alana gitmesini
sağlayarak bu şekilde sitemizde işlem yapanların daha kısa süre zarfında bunu yapmalarını sağlayabiliriz.
Google Maps APIsinde Geocoder() servisini kullanarak bu işlemi yapacağız.
Sayfadaki işlemin mantığı genel olarak;
Ajax ile İl ve İlçe seçimiyle alakalı işlemi daha sonradan anlatacağım ama bildiğiniz varsayarak bir il ilçe formu oluşturduk.
İl ve ilçe seçimiyle oluşturduğumuz fonksiyonla Geocoder() servisini kullanarak seçilen verileri aratarak Google Maps hizmetinde göstereceğiz.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Google Maps ile İl, İlçe Seçiminde Konum</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> </head> <body> <div> <select id="selectIl" name="selectIl"> <option value="">Seçiniz</option> <option value="34">İstanbul</option> <option value="29">Gümüşhane</option> </select> <select id="selectIlce" name="selectIlce"> <option value="">Seçiniz</option> </select> </div> <br /> <div id="map-canvas"></div> <script type="text/javascript"> var mapOptions = { center: new google.maps.LatLng(38.9573415,35.2415759), zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); $('#selectIl').change(function(){ if ( !$(this).val() ){ $('#selectIlce').empty().append('<option value="">Seçiniz</option>'); return false; } else if ( $(this).val() == 34 ){ $('#selectIlce').empty().append('<option value="">Seçiniz</option>').append('<option value="1">Kağıthane</option>').append('<option value="2">Ümraniye</option>'); } else if ( $(this).val() == 29 ){ $('#selectIlce').empty().append('<option value="">Seçiniz</option>').append('<option value="1">Şiran</option>'); } haritaIslem(); }); $('#selectIlce').change(function(){ haritaIslem(); }); function haritaIslem(){ var str = ''; if ( $('#selectIl').text() ){ str += $('#selectIl :selected').text() + ' '; } if ( $('#selectIlce').val() ){ str += $('#selectIlce :selected').text() + ' '; } if ( !str ){ return true; } str = str.replace(/\(.+\)/g, "").replace(' ', ' '); var geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': str},function(results, status){ if (status == google.maps.GeocoderStatus.OK) { var searchLoc = results[0].geometry.location; var lat = results[0].geometry.location.lat(); var lng = results[0].geometry.location.lng(); var latlng = new google.maps.LatLng(lat, lng); var bounds = results[0].geometry.bounds; mapOptions = { center: new google.maps.LatLng(lat,lng), zoom: 12, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } }); } </script> </body> </html>
Merhaba paylaşımınız çok güzel öncelikle teşekkür etmek isterim,
size sormak istediğim bu uygulamayı sahibinden.com da ilan verirken olduğu gibi ilk veya ilçe seçildiğinde o bölgenin sınırlarının çizildiği ve sadece seçili alanda bir noktanın marker ile işaretlenebileceği bir biçime nasıl çevire biliriz ?
Sahibinden sitedeki harita işlemi için gördüğünüz tüm bölge sınırları, Google Maps Apideki aşağıdaki bağlantıdan yola çıkarak yapılmaktadır.
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
sizin örneğinize nasıl uygulayabiliriz bunu, linkteki varsayılan noktaları düz çizgiler olarak alıyor, bir şehrin girintili çıkıntılı bir çok noktası mevcut.
Düz çigziler gözükse yakınlaştırdığınızda piksel piksel düz çizgilerin oluşturduğu girinti ve çıkıntıları göreceksiniz. Konuyla alakalı Türkiye haritasıyla yapılmış bir örnek yakın zamanda paylaşmaya çalışacağım.
Örnekli açıklama ve yardımlarınız için teşekkür ederim.
Peki Bu gösterilen ilçelerde yerleri nasıl işaretleyebiliriz ?
Bununla alakalı bir örnek yapmaya çalışacağım. Bilginiz açısından aşağıdaki adresteki Google Marker kısmını incelemeniz gerek.
https://developers.google.com/maps/documentation/javascript/examples/marker-simple