Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Laravel google map sistemi

Kevin-Mitnick

selamlar herkese bir sistem üzerinde çalışıyorumda şuan daha veri tabanı aşamasındayım . şimdi firmalar var ve anasayfada google map düşünün üzerinde en çok teklif alan 10 firma gözüküyor harita üzerinde buraya kadar sorun yok ama gelin görün ki adam sisteme kendi firmasını eklerken kordinat girmesi gerekecek çünkü laravel googlemapper paketini kullanıcam x ve y kordinatları olucak tablo=> sirket_id , il , ilçe ,semt,googlex,googley aslında sorunum yapı siz olsaydınız bu kordinat işine nasıl çözüm bulurdunuz acaba ? Teşekkürler.

mgsmus

Google Maps Javascript Api ile bir şeyler yapılabilir. Harita üzerinde işaretçi sürüklenir, öyle koordinatlar alınabilir. Hızlıca size bir örnek hazırladım. İşaretçiyi fare ile harita üzerinde sürükleyin. Buradan yola çıkabilirsiniz.

Buradan test edebilirsiniz:
https://jsfiddle.net/38c8ej1f/

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Simple markers</title>
 <style>
 /* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
 #map {
 height: 100%;
 }
 /* Optional: Makes the sample page fill the window. */
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
 </head>
 <body>
 <div style="padding:10px;">
 <input id="lat" name="lat" placeholder="Enlem">
 <input id="lng" name="lng" placeholder="Boylam">
 </div>
 <div id="map"></div>
 <script>

 function initMap() {
 
 // İlk yüklenen konum
 var myLatLng = {lat: 41.028325, lng: 28.913060};
 
 // Enlem giriş alanı
 var latInput = document.getElementById("lat");
 
 // Boylam giriş alanı
 var lngInput = document.getElementById("lng");

 // Google haritası
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 14,
 center: myLatLng
 });
 
 // Harita üzerindeki kırmızı işaretçi
 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map,
 draggable:true // Taşınabilir
 });
 
 // İşaretçi harita üzerinde taşınırken
 google.maps.event.addListener(marker, 'drag', function (event) {
 latInput.value = event.latLng.lat();
 lngInput.value = event.latLng.lng();
 });
 
 }
 </script>
 <script async defer
 src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
 </script>
 </body>
</html>

Ekrem

Arkadaşın verdiği örnek işinizi görecektir. Sorunuzda veri tabanı yapısından bahsetmişsiniz

sirket_id , il , ilçe ,semt

buradan yola çıkarak size kısa bir fikir verebilirim. İlerleyen zamanlarda İl, İlçe ve Semt bazında kayıtlarınız arttığında tüm kayıtları ekrana dökmek yerine haritada gösterilen alanları dökmek isteyebilirsiniz. Harita konusunda Openlayers çok detaylı bir yazılım olduğu için ve sorunuzdan yola çıkarak bu sistemi öneremem. Fakat https://github.com/grimzy/laravel-mysql-spatial buradaki kütüphaneyi kontrol etmenizi öneririm. Bu kütüphane sayesinde Spatial sorgu ile çok çeşitli ve verimli işler yapabilirsiniz.
Örnek olarak standart harita kullanacaksanız;

İl : 81
İlçe : 919

Semt'i baz almasanız ve sadece ilçe bazına en çok teklif alan 10 firmayı dökeceğim deseniz en az 9.190 tane kaydı haritaya yüklemek demektir.

Yukarıdaki kütüphane şu işe yarar.
Örnek olarak zoom yapılan alan
Şehir ve İstanbul
İstanbul Genelinde En Çok Teklif Alan 10 Firmayı dökersiniz.
İstanbuldan Bakırköy'e zoomlandı Bakırköy için koordinatları eşleşen en çok teklif alan 10 firmayı dökebilirsiniz.

Bu kütüphane size,

Mesafe hesabı,
Koordinatlar ile kesişen veya kesişmeyen kayıtlar
Koordinatlar içerisinde olan veya olmayan kayıtlar

gibi bir çok alanda veri verir.

Kevin-Mitnick

@mgsmus ve @ekrem hocam teşekkürler ama burda demek istediğim adam kendi firma bilgilerini girerken bu map kordinatlarını nasıl girebilir acaba ? mgsmus hocamın verdiği gibi yapsam değerleri bir inputa atıp vt ye kayıt etsem kullanıcı çok oyalanır mı acaba ?

deathisonitsway

adam kaydını girdiğinde sende arkada bu değerleri kaydet gitsin işte;

Ekrem

Kevin-Mitnick yazdı@mgsmus ve @ekrem hocam teşekkürler ama burda demek istediğim adam kendi firma bilgilerini girerken bu map kordinatlarını nasıl girebilir acaba ? mgsmus hocamın verdiği gibi yapsam değerleri bir inputa atıp vt ye kayıt etsem kullanıcı çok oyalanır mı acaba ?

Koordinat alma konusunda @mgsmus arkadaşımızın verdiği örnekten daha pratiğini bulamazsın. Buna ek olarak Google Maps'in Adres ile koordinat bulma seçenekleri var. Fakat çok sağlıklı olmaz. En iyisi @mgsmus 'un örneğini kullanarak kullanıcının seçimine bırakmak olacaktır.

Not : Benim verdiğim fikir kayıtları tamamladıktan sonra Son Kullanıcı tarafında ekrana dökme kısmındaydı.

mgsmus

Bunu zamanında ben yapmıştım. Burayı kontrol edebilirsin. Burada ayrıca geocode ve places özelliklerini de kullanmışım:
https://www.rehberfx.com/yeni-kayit

Ayrıca enlem ve boylam bilgilerini kullanıcının görmesine gerek yok, inputları hidden yapıp arka planda alabilirsin.

Bunlara ek olarak geolocation ile kullanıcın giriş yaptığı yeri (tam doğru olmasa da) haritada otomatik işaretleterek işleri hızlandırabilirsin:
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

Kevin-Mitnick

@mgsmus hocam tam aradığım şey işte benim form sizinkinin aynısı olucak diyebilirim bunun için google apisi mi kullandınız yoksa laravel için paket var mı ? geocode ve places özelliği için

mgsmus

Google Maps Javascript API ile hazırlamıştım, paket değil, kodlara kaynak kodundan bakabilirsiniz.

Places özelliği için ise, şu adresi yazınca otomatik tamamlıyor vs şu plugini kullanmışım:
https://ubilabs.github.io/geocomplete/

Javascript olduğu için size verdiğim linkte kodlar html içerisinde mevcut. Oradan bakın, takıldığınız yer olursa buraya yazarsınız bakarız. Unuttum ben de çok zaman oldu bakmayalı ama Google dökümanlarından kolayca halledilir gibime geliyor.

Kevin-Mitnick

@mgsmus hocam sağolun

sineld

Teşekkürler @mgsmus, çok temiz bir iş çıkarmışsın, tebrik ederim.

Kevin-Mitnick

https://paste.laravel.io/afe71f1a-29e0-405e-bf68-7f0e318d4e88

kolay gelsin @mgmus abi bugun dediklerini yaptım ama haritayı göremiyorum consolda da hata gözükmüyor sorunu bulamadım bir türlü.

mgsmus

#map divine px olarak yükseklik verin.

Kevin-Mitnick

@mgsmus çözdüm abi js dosyası yüzündenmiş

sineld

 #map {
 height: 600px;
 }

torpilahmet

Google maps için enlem ve boylamı veritabanında saklamak istersem veri türü ne olmalıdır.

mgsmus

Sadece saklamak için kullanacaksanız enlem için DECIMAL(10, 8); boylam için DECIMAL(11, 8).

Enlemin payının 10; boylamın payının 11 olmasının sebebi enlemin ±90 derece; boylamın ±180 derece olması.
Paydanın 8 olmasının sebebi ise 8 den sonrasının işimize yaramıyor olması diyebiliriz. 8 paydalı hesaplamalarda milimetrik sonuçlar elde ediyorsunuz, 9 ve sonrasında ise milimetrenin altına inmiş oluyorsunuz.

Veritabanı düzeyinde bazı işlemler yaptırmak isterseniz POINT veri tipinde tutabilirsiniz.
https://dev.mysql.com/doc/refman/5.7/en/spatial-types.html

Bu şekilde tutarsanız ST_* yöntemlerini kullanabiliyorsunuz. Örneğin

SELECT ST_Distance_Sphere(POINT(lng, lat), POINT(lng, lat)) AS distance

size iki nokta asarındaki mesafeyi (metre olarak) verir. Ayrıca POINT veri tipine dikkat edin, önce boylam sonra enlem yazılıyor. Genellikle lat,lng şeklinde olur, point oluştururken lng, lat şeklinde oluyor. Yani POINT(lat, lng) şeklinde oluşturursanız yanlış olmuş olacak.