Google Maps üzerinden Kordinat alma
2631 görüntüleme

Merhaba arkadaşlar,

google maps harita üzerinden tıklayarak kordinatları alma işlemini yapacağız beraber. Bu aralar işime yarayan bir işlem umarım sizlerinde işine yarar

öncelikle jquery kütüphanesini sayfamıza yükleyelim

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

daha sonra google maps haritasını sayfaya yükleyelim bunun için şu koda ihtiyacımız var 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

şimdi sayfamıza iki tane text box ekleyeceğiz bunlar kordinatları tutacağımız textboxlar alınan değerleri bunlara yazdıracağız

<input id="lat" name="x_coor" value="39.965938">
<input id="long" name="y_coor" value="32.619095">

benim yazdığım kordinatlar ankara etimesgut u göstermektedir. tabiki bunlar ilk gösterim için girdim ben siz ne yazarsanız olur.

asıl kodumuzu şimdi yazıyoruz. 

<script type="text/javascript">
      var latlng = new google.maps.LatLng(39.949194, 32.660799);
      var options = {
          zoom: 12,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          draggableCursor: "crosshair",
		  scrollwheel: true,
          streetViewControl: false
        };
      var map = new google.maps.Map(document.getElementById("map"), options);
      $("#zoom").val(5);
		  google.maps.event.addListener(map,"click", function(location)
      {
        GetLocationInfo(location.latLng);
      });
      google.maps.event.addListener(map,'zoom_changed', function(oldLevel, newLevel)
      {
        $("#zoom").val(map.getZoom());
      });
     var initListener;
      var marker;
    function GetLocationInfo(latlng)
      {
        if (latlng != null)
        {
          ShowLatLong(latlng);
         UpdateStreetView(latlng);
       }
      }
      function GotoLatLong()
      {
        if ($("#lat").val() != "" && $("#long").val() != "") {
         var lat = $("#lat").val();
          var long = $("#long").val();
          var latLong = new google.maps.LatLng(lat, long);
          ShowLatLong(latLong);
          map.setCenter(latLong);
          UpdateStreetView(latLong);
        }
      }

      function ShowLink(){
        $("#mapLink").html('<a href="ShowMap.php?lat=' + $("#lat").val() +
          '&long=' + $("#long").val() + '&zoom=' + $("#zoom").html() + '">Link for this map</a>');
      }
      function ShowLatLong(latLong)
      {
        // show the lat/long
        if (marker != null) {
          marker.setMap(null);
        }
        marker = new google.maps.Marker({
          position: latLong,
          map: map});
        $("#lat").val(latLong.lat());
        $("#long").val(latLong.lng());
		$("#address").val((ReverseGeocode(latLong.lat(),latLong.lng(), '#address')));
		$("#adresX").val(ReverseGeocode(latLong.lat(),latLong.lng(), '#adresX'));
      }
</script>

yukarıda verdiğim kodla artık haritada işaretlediğiniz yeri eklediğimiz textboxlara aktaracaktır.

javascript kodundaki ilk satırdaki 

var latlng = new google.maps.LatLng(39.949194, 32.660799);

belirttiğim kordinatlar sizin haritanızda ilk açılmasını istediğiniz yer olarak belirlenir. onu siz nereyi ilk istiyorsanız oranın kordinatlarını yazarak başlatabilirsiniz.

bir sonraki yazıda görüşünceye dek hoşçakalın.

Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.