Öncelikle Gmaps.js Dosyasını github üzerinden indiriyoruz.
Şimdi sıra geldi istediğimiz noktanın kordinantını bulmaya.
Ben istediğim noktaya ait kordinant bulmak için gmaps.js içinde bulunan outside parametresinden yararlandım arkadaşlar daha farklı basit çözümü olan arkadaşlar olursa benimle de paylaşırlarsa sevinirim.
Kullandığımız methodlardan bahsedeyim.
Marker
marker harita işaretlemek için kullandığımız kırmızı işaretçi.
outside methodu
Çizilen bir alan içerisinden işaretçiyi çıkardığımızda çalışan fonskiyon.
İki parametre alıyor (marker,fences).
Artık Kodlarımızı yazmaya başlayabiliriz.
Githubdan indirdiğimiz dosya içinden gmaps.js dosyasını alyoruz. diğerleri bizi ilgilendirmiyor şimdilik.
Daha sonra standart bir html sayfası açıp jQuery dosyamızı ve gmaps.js dosyamızı sayfamıza dahil ediyoruz.
Ayrıca google maps ın vermiş olduğu api dosyasınıda dahil ediyoruz.
google maps api dosyasını BURADAN indirebilirsiniz.
Şimdi sayfa yapımız aşağıdaki gibi oldu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vehbi Akdoğan | gmaps.js kullanımı </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
</head>
<body>
<div class="ortala">
</div>
</body>
</html>
Daha sonra sayfamıza haritayı göstermek için #map idli bir div ve alacağımız kordinantlar için de iki adet (x,y) input ekliyorum.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vehbi Akdoğan | gmaps.js kullanımı </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
<style type="text/css">
#map {
width:500px;
height: 500px;
overflow: hidden;
}
.ortala {
width:500px;
margin:0 auto;
}
input {
margin-right:5px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="ortala">
<div id="map"></div>
<input type="text" disabled="" name="lat" value="0" />
<input type="text" disabled="" name="lng" value="0" />
</div>
</body>
</html>
Şimdi sıra geldi harita ile ilgili dosyamıza.
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: 39.908611,
lng: 41.27694399999996
});
// haritamızı oluşturduk lat,lng koordinantları gösteriyor.
// şuan da erzurum koordinantları na göre açtık
var circle = map.drawCircle({
lat: 39.908611,
lng: 41.27694399999996,
radius: 5,
strokeColor: '#fff',
strokeOpacity: 0,
strokeWeight: 3,
fillColor: '#fff',
fillOpacity: 0
});
// haritada bir adet circle oluşturduk ama opasitesini 0 yaptığım için haritada görünmeyecek
// koordinantları almamız için gerekli
// bir adet marker yani işaretçi ekledik haritaya gene erzurum merkezi işaretlettim ben
map.addMarker({
lat: 39.908611,
lng: 41.27694399999996,
draggable: true, // marker in sürüklenebilme özelliğini açtık
fences: [circle], // bu içinde bulunacağı alanı gösteriyor işaretlediğim alan circle nin içinde şuan
outside: function(m, f){ // circlenin dışına çıkınca çalışacak fonksiyonum
$("input[name=lat]").val(m.getPosition().lat()); // x kordinantını inputa yazdırdım
$("input[name=lng]").val(m.getPosition().lng()); // y kordinantını inputa yazdırdım
}
});
});
</script>
Sayfamızın Son Hali
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vehbi Akdoğan | gmaps.js kullanımı </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
<style type="text/css">
#map {
width:500px;
height: 500px;
overflow: hidden;
}
.ortala {
width:500px;
margin:0 auto;
}
input {
margin-right:5px;
margin-top:5px;
}
</style>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: 39.908611,
lng: 41.27694399999996
});
// haritamızı oluşturduk lat,lng koordinantları gösteriyor.
// şuan da erzurum koordinantları na göre açtık
var circle = map.drawCircle({
lat: 39.908611,
lng: 41.27694399999996,
radius: 5,
strokeColor: '#fff',
strokeOpacity: 0,
strokeWeight: 3,
fillColor: '#fff',
fillOpacity: 0
});
// haritada bir adet circle oluşturduk ama opasitesini 0 yaptığım için haritada görünmeyecek
// koordinantları almamız için gerekli
// bir adet marker yani işaretçi ekledik haritaya gene erzurum merkezi işaretlettim ben
map.addMarker({
lat: 39.908611,
lng: 41.27694399999996,
draggable: true, // marker in sürüklenebilme özelliğini açtık
fences: [circle], // bu içinde bulunacağı alanı gösteriyor işaretlediğim alan circle nin içinde şuan
outside: function(m, f){ // circlenin dışına çıkınca çalışacak fonksiyonum
$("input[name=lat]").val(m.getPosition().lat()); // x kordinantını inputa yazdırdım
$("input[name=lng]").val(m.getPosition().lng()); // y kordinantını inputa yazdırdım
}
});
});
</script>
</head>
<body>
<div class="ortala">
<div id="map"></div>
<input type="text" disabled="" name="lat" value="0" />
<input type="text" disabled="" name="lng" value="0" />
</div>
</body>
</html>
Şeklinde Oldu.
Daha farklı basit çözümleri olan arkadaşlar olursa benimle paylaşırlarsa çok memnun olurum.
DEMO / DWONLOAD
