Javascript kodunu url adresiyle kontrol etme konusunda yardım

13 yıl

Teğmen

Konu Sahibi

Arkadaşlar merhaba
kısaca derdimi anlatmaya çalışayım
bitirme projem için gps modülünde konum bilgilerini alıp bilgisayarda işlemem gerekiyor
ben bu koordinatları google maps üzerinde kullanmak istiyorum
aldığım koordinatları google developerdan aldığım kod ve api key ile html üzerinde görebiliyorum ancak ben html koddaki koordinat bilgilerini dışarıdan kontrol etmek istiyorum.siteye yazacağım bir program aracılığıyla girecem ve url adresinde koordinat bilgilerini de gönderecem
örnek vermek gerekirse

quote:

www.siteadi.com/map.html&11.11111&22.22222

şeklinde
böyle birşeyin yapılabilir olduğunu da google maps deki bir url adresinden gördüm o da şöyle

quote:

https://maps.google.com/maps?q=11.11111,+22.22222&iwloc=A&hl=en

ben bu şekilde koordinat bilgilerini url den alıp koddaki değişkene dinamik bir şekilde ekleyebilir miyim?eğer ekleyebilirsem nasıl eklerim?
koddaki koordinat bilgierlni saklayan değişken şu şekilde;

quote:

var myLatlng = new google.maps.LatLng(11.11111,22.22222);

bu konuda bana yardım edebilecek arkadaşlara tüm kodu yollayabilirm konuyu daha fazla uzatmak istemiyorum
yardımcı olup yol gösterebilecek arkadaşlardan yardım bekliyorum
şimdiden çok teşekkürler

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

A

Aykut_K

13 yıl

Teğmen

Konu Sahibi

Güncel...
Görülebilmesi için yukarı taşıyorum

Bu mesaja 1 cevap geldi.

W

wait4it

13 yıl

Çavuş

Öncelikle linkini şöyle yaparsın(haritayla uğraşacağını varsayarak 'la'titude,'lo'ngtitude olarak düşündüm) :

http://siteniz.com/?la=11.2222&lo=22.11111

Javascript kodunun içine şu fonksiyonu yerleştirirsin :

 
  function getURLParameter(name) { 
      return decodeURI( 
          (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
      ); 
  }

ardından harita fonksiyonunu çağırdığın yerde de şöyle çağırırsın

 
  var myLatlng = new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo'));

Bu kadar, kolay gelsin :)

Bir sıkıntı, anlamadığın nokta varsa çekinmeden sorabilirsin...

Bu mesaja 1 cevap geldi.

A

Aykut_K

13 yıl

Teğmen

Konu Sahibi

öncelikle hayırlı bayramlar
ne kadar teşekkür etsem azdır :)
dediklerini yaptım cuk diye oturdu :)
tekrar çok teşekkür ederim

Bu mesaja 1 cevap geldi.

W

wait4it

13 yıl

Çavuş

Size de hayırlı bayramlar, belli ki yardımcı olabilmişim, çok sevindim, rica ederim :)

Bu mesaja 1 cevap geldi.

A

Aykut_K

13 yıl

Teğmen

Konu Sahibi

wait4it tekrar merhaba ben bu kodu kendime göre düzenleyebilirmiyim?
meselahttp://siteniz.com/?la=11.2222&lo=22.11111&zo=5&t=1
gibi değerler ekleyebilirmiyim
zo zoom değeri için
t de harita türü için

Bu mesaja 1 cevap geldi.

W

wait4it

13 yıl

Çavuş

quote:

Orijinalden alıntı: Aykut_K

wait4it tekrar merhaba ben bu kodu kendime göre düzenleyebilirmiyim?
meselahttp://siteniz.com/?la=11.2222&lo=22.11111&zo=5&t=1
gibi değerler ekleyebilirmiyim
zo zoom değeri için
t de harita türü için

Tabii ki. Ama aldığın o değerleri Google kodunu çağırırken ne olacaklarını belirtmelisin.

Örneğin şu sayfaya bak : https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple

Arkadaki kodu da şöyle : [link]view-source:https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple[/link]

Sende bu tarz mı yazılmış bilmiyorum ama dikkat edersen options içinde

 
       var mapOptions = { 
            zoom: getURLParameter('zo'), 
            center: new google.maps.LatLng(getURLParameter('la'), getURLParameter('lo')), 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
       };

şu an vaktim yok type'a bakamayacağım ama zoom içeren hali böyle olur o kodun..

Kolay gelsin tekrar

Bu mesaja 1 cevap geldi.

A

Aykut_K

13 yıl

Teğmen

Konu Sahibi

bendeki kod şu şekilde

<!DOCTYPE html> 
  <html> 
    <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
      <style type="text/css"> 
        html { height: 100% } 
        body { height: 100%; margin: 0; padding: 0 } 
        #map_canvas { height: 100% } 
      </style> 
      <script type="text/javascript" 
        src="http://maps.googleapis.com/maps/api/js?key=??"> 
      </script> 
      <script type="text/javascript"> 
        function getURLParameter(name) { 
      return decodeURI( 
          (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
      ); 
  } 
  function initialize() { 
  var myLatlng = new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo'));        
  	   var mapOptions = { 
            center: new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo')), 
            zoom: 20, 
            mapTypeId: google.maps.MapTypeId.HYBRID  
          }; 
          var map = new google.maps.Map(document.getElementById("map_canvas"), 
              mapOptions); 
  			 
  		var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h2 id="firstHeading" class="firstHeading">You are here!</h2>'+ 
      '<div id="bodyContent">'+ 
      'You are here : '+ myLatlng + 
      '</div>'+ 
      '</div>'; 
   
   
  var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
  }); 
   
        var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title:"Hello World!" 
  	   
    }); 
    
    google.maps.event.addListener(marker, 'mouseover', function() { 
    infowindow.open(map,marker); 
  }); 
    } 
      </script> 
    </head> 
    <body onload="initialize()"> 
      <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
  </html>

ben senin söylediğin gibi getURLParameter('zo'), bunu denedim ama kod çalışmadı
kodda hello world yazan yere getURLParameter('zo'), bunu yazdım zo değerini orda gördüm ama sanırım type conversionda bir sıkıntı oluyor kod işlemiyor

< Bu mesaj bu kişi tarafından değiştirildi Aykut_K -- 20 Kasım 2012; 0:10:16 >
Bu mesaja 1 cevap geldi.

W

wait4it

13 yıl

Çavuş

quote:

Orijinalden alıntı: Aykut_K

bendeki kod şu şekilde

<!DOCTYPE html> 
  <html> 
    <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
      <style type="text/css"> 
        html { height: 100% } 
        body { height: 100%; margin: 0; padding: 0 } 
        #map_canvas { height: 100% } 
      </style> 
      <script type="text/javascript" 
        src="http://maps.googleapis.com/maps/api/js?key=??"> 
      </script> 
      <script type="text/javascript"> 
        function getURLParameter(name) { 
      return decodeURI( 
          (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
      ); 
  } 
  function initialize() { 
  var myLatlng = new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo'));        
  	   var mapOptions = { 
            center: new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo')), 
            zoom: 20, 
            mapTypeId: google.maps.MapTypeId.HYBRID  
          }; 
          var map = new google.maps.Map(document.getElementById("map_canvas"), 
              mapOptions); 
  			 
  		var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h2 id="firstHeading" class="firstHeading">You are here!</h2>'+ 
      '<div id="bodyContent">'+ 
      'You are here : '+ myLatlng + 
      '</div>'+ 
      '</div>'; 
   
   
  var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
  }); 
   
        var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title:"Hello World!" 
  	   
    }); 
    
    google.maps.event.addListener(marker, 'mouseover', function() { 
    infowindow.open(map,marker); 
  }); 
    } 
      </script> 
    </head> 
    <body onload="initialize()"> 
      <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
  </html>

ben senin söylediğin gibi getURLParameter('zo'), bunu denedim ama kod çalışmadı
kodda hello world yazan yere getURLParameter('zo'), bunu yazdım zo değerini orda gördüm ama sanırım type conversionda bir sıkıntı oluyor kod işlemiyor

O zaman biz de şöyle yaparız Aykut:

 
  <!DOCTYPE html> 
  <html> 
    <head> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
      <style type="text/css"> 
        html { height: 100% } 
        body { height: 100%; margin: 0; padding: 0 } 
        #map_canvas { height: 100% } 
      </style> 
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=???&sensor=true"></script> 
      <script type="text/javascript"> 
  		mapTypes = { 
  			1 : google.maps.MapTypeId.ROADMAP, 
  			2 : google.maps.MapTypeId.SATELLITE, 
  			3 : google.maps.MapTypeId.HYBRID, 
  			4 : google.maps.MapTypeId.TERRAIN 
  		} 
   
  		function getURLParameter(name) { 
  		    return decodeURI( 
  		        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] 
  		    ); 
  		} 
   
  		function initialize() { 
  		 
  			var myLatlng = new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo'));        
  			var mapOptions = { 
  				center: new google.maps.LatLng(getURLParameter('la'),getURLParameter('lo')), 
  				zoom: parseInt(getURLParameter('zo')), 
  				mapTypeId: mapTypes[getURLParameter('t')]  
  			}; 
  		 
  			var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
  			 
  			var contentString = '<div id="content">'+ 
  			'<div id="siteNotice">'+ 
  			'</div>'+ 
  			'<h2 id="firstHeading" class="firstHeading">You are here!</h2>'+ 
  			'<div id="bodyContent">'+ 
  			'You are here : '+ myLatlng + 
  			'</div>'+ 
  			'</div>'; 
  			 
  			var infowindow = new google.maps.InfoWindow({ 
  				content: contentString 
  			}); 
  			 
  			var marker = new google.maps.Marker({ 
  				position: myLatlng, 
  				map: map, 
  				title:"Hello World!"	 
  			}); 
  			 
  			google.maps.event.addListener(marker, 'mouseover', function() { 
  				infowindow.open(map,marker); 
  			}); 
  		} 
  	</script> 
    </head> 
   
  <body onload="initialize()"> 
   
  	<div id="map_canvas" style="width:100%; height:100%"></div> 
   
  </body> 
  </html>

type meselesini de yaptım.

http:://siteniz.com/harita.html?la=11.2222&lo=22.11111&zo=5&t=4

tarzında kullanabilirsin artık. Sıkıntıyı da söyleyeyim boş yazmış olmayayım, url'den aldığı şeyi string olarak dönüyordu ve Google API'si de bunu integer olarak bekliyordu hata o yüzden kaynaklanıyordu. Zoom'u Google API'ye yolladığımız yerde parseInt kullanarak string gelen veriyi int'e çevirdim. Budur.

Type meselesinde de, Google API'sinde Map Types olarak birden fazla seçenek mevcut(https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions) ama bunların hepsinin bir ismi var. Url'de isim geçirmek güzel gözükmeyeceğinden 1-2-3-4 adında karşılıklar verdim array sayesinde. Kodun başında görürsün hangi numara hangi tipe denk geliyor diye.

Tekrar kolay gelsin :)

Bu mesaja 1 cevap geldi.

A

Aykut_K

13 yıl

Teğmen

Konu Sahibi

işin aslı hello world yazan yerde değeri görünce string to int kısmında sıkıntı olduğunu anlamıştım ama javascript bilgim yok
unit conversion nasıl yapılır baktım yine çözememiştim hata veriyordu eline emeğine sağlık
artık bi sıkıntı olmaz proje de çok işime yarayacak bu
böyle böyle javascripte de giriş yapmış oldum Allah muhaffak eylesin.
tekrar teşekkür ederim

Bu mesaja 1 cevap geldi.

C

ChipKamyonu

12 yıl

Onbaşı

googlede ariyordum buraya girdim.. işime yaradı saolun arkadaslar..