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>

Uygulama Örnek Sayfası

Google Maps ile İl,İlçe Konum Uygulamasını İndir

Paylaş: