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.