OpenStreetMap ile Sitede Adres G├Âsterme

Merhaba canlar,

Bir adresi, bir konumu sitenizde g├Âstermek i├žin Google Maps yerine farkl─▒ bir harita sistemi kullanaca─č─▒z.

Google maps bildi─činiz ├╝zere 2018 den sonra ├╝cretli oldu.

Baz─▒ ├Âzellikleri k─▒s─▒tl─▒ olsa da bedava veriyor fakat biz bug├╝n tamamen bedava olan a├ž─▒k kaynak kodlu bir sistem kullanaca─č─▒z.

ADRES─░ S─░TEDE HAR─░TA OLARAK G├ľSTERME

Openstreetmaps da bunu yapmak i├žin haz─▒rlad─▒─č─▒m kodu inceleyiniz.

Bu kod i├žinde gerekli de─či┼čiklikleri yaparak bir ka├ž hamlede sitenize adresi yerle┼čtirebileceksiniz.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<div id="mapDiv" style="width: 100%; height: 500px"></div>
<script>
 // koordinatlar
 var lat = 39.965867;
 var lon = 32.804205;
 // harita ├Âzellikleri zoom vs.
 map = L.map('mapDiv').setView([lat, lon], 13);
 // harita d├Â┼čemeleri kayna─č─▒n─▒ ayarla
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> 100numaraliadam.com',
maxZoom: 18,
}).addTo(map);
// G├Âsterilecek Koordinat.
marker = L.marker([lat, lon]).addTo(map);
// G├Âsterilecek Koordinat─▒n adresi. (popuplu)
marker.bindPopup("<b>Bilgisayar D├╝kkan─▒m─▒z.</b><br />Herkesi bekleriz<br />Adresimiz Budur.").openPopup();
  </script>

Burada belli parametreleri de─či┼čtirerek bunu kendinize g├Âre uyarlayabilirsiniz.

Koordinatlar k─▒sm─▒ belirtece─činiz adresi belirtirken ayn─▒ zamanda haritan─▒n orta k─▒sm─▒n─▒ belirtir.

Zoom ayar─▒n─▒ 13 den daha farkl─▒ ┼čekilde ayarlayabilirsiniz. 1-18 aras─▒nda de─čerler girerek deneyin.

.openPopup() k─▒sm─▒n─▒ silerseniz sadece koordinat g├Âsterir ├╝zerinde adres ile birlikte g├Âstermez.

Tek Haritada ─░ki Koordinat G├Âsterelim

Haritada bir veya birden ├žok marker g├Âsterebilirsiniz.

Burada ├Ârnek olarak 2 marker yani iki koordinat noktas─▒ g├Âsteriyorum siz bunu inceleyerek 3 4 5 ├žo─čalabilirsiniz.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<div id="mapDiv" style="width: 100%; height: 500px"></div>
<script>
 // Koordinatlar
 var lat = 39.965867;
 var lon = 32.804205;
 // harita ├Âzellikleri zoom vs.
 map = L.map('mapDiv').setView([lat, lon], 15);
 // harita d├Â┼čemeleri kayna─č─▒n─▒ ayarla
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> 100numaraliadam.com',
maxZoom: 18,
}).addTo(map);
// G├Âsterilecek Koordinat.
marker = L.marker([lat, lon]).addTo(map);
marker2 = L.marker([39.967667, 32.802387]).addTo(map);

// G├Âsterilecek Koordinat─▒n adresi. (popup olmadan)
marker.bindPopup("Kasap D├╝kkan─▒, Cami ├ľn├╝. 100numara, Esentepe");
marker2.bindPopup("<b>Bilgisayar D├╝kkan─▒m─▒z.</b><br />Herkesi bekleriz<br />Adresimiz Budur.");
</script>

G├Ârece─činiz ├╝zere marker var marker2 var buralar─▒ ├žo─čaltarak marker3 yapabilir ve daha fazla koordinat girebilirsiniz.

Girdi─činiz koordinatlardan sadece bir tanesinde veya birden ├žo─čunda adres g├Âsterebilirsiniz. Bunu .openPopup() ekleyerek yapacaks─▒n─▒z. ─░lk ├Ârnekte eklidir inceleyiniz.


Son olarak kod i├žinde 100% ve 500px gibi en boy g├Âsteren yerleri kendinize g├Âre d├╝zenleyebilirsiniz.

Yatay─▒ 100% yapman─▒z─▒ tavsiye ederim.


100numaral─▒adam ile hep daha ileriye… Ho┼č├žakal─▒n─▒z efemm.

Yazar: utquick

Merhaba, Bu site 2017 senesinde kurulmu┼čtur: Kemal SUNAL '─▒n 100 Numaral─▒ Adam filminden feyz al─▒narak kurulan sitemiz, filmdeki Halk Kahraman─▒ rol├╝n├╝ de b├╝nyesine katarak d├╝r├╝st payla┼č─▒mlarda bulunmaktad─▒r. Bizi takip ediniz. B├╝y├╝k bir aile oluyoruz. Tek g├╝vencemiz payla┼č─▒mlar─▒m─▒z─▒n samimili─čidir.

Bunlar da ho┼čunuza gidebilir...

Bir cevap yaz─▒n

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir

css.php