Gmap3 ile LatLng Konum Yazdırma

logo-gmap-3-vecto

Harita işlerinde en çok kullandığım google map’ın jquery eklentisi olan gMap3’ün bazı metodlarından örnekler ;

Örnek olarak markup ile tutup bıraktığımız yerin lat ve lng değerlerini inputlara yazalım, jsleri dahil ettiğimi var sayıyorum

<label> Lat : <input type="text" id="lat" /> </label>
<label> Lng : <input type="text" id="lng" /> </label>
<div id="test1"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="assets/js/gmap3.min.js"></script>	
   $(function(){
		$('#test1').gmap3({
		 map:{
			options:{ // bildiğimiz google map ayarları
			 center:[39.929445, 32.741780], // konumlama diyelim
			 zoom:8,
			 mapTypeId: google.maps.MapTypeId.ROADMAP,
			 mapTypeControl: true,
			 navigationControl: true,
			 scrollwheel: true,
			 streetViewControl: true
			}
		 },
		 marker:{
			latLng:[39.929445,32.741780], // ilk görüntülenen kordinatlar diyelim
			options:{
				draggable:true // markeri tut bırak özelliği
			},
			events:{
			  dragend: function(marker,event){ // marker bırakıldığında
				$('input#lat').html("");  //  #lat inputunu temizle
				$('input#lng').html(""); //   #lng inputunu temizle
				$('input#lat').val( marker.position.lat()); // yeni lat kordinatını yaz
				$('input#lng').val( marker.position.lng()); // yeni lat kordinatını yaz
			  }
			}
		 }
		});
      });
    </script> 

Adsız

Kaynak : http://gmap3.net/

Yorum Bırak.