Sarı ilan sitesindeki gibi ilan eklerken il, ilçe, semt girdiğimizde haritanın oraya gitmesi

1. Google Maps API Anahtarını Al

İlk olarak, Google Maps API kullanacaksan bir API anahtarı alman gerekecek. Google Cloud hesabı açarak bu anahtarı edinebilirsin.

• Google Cloud Console'a git
• Yeni bir proje oluştur
• API & Services bölümünden "Google Maps JavaScript API" ve "Geocoding API" servislerini etkinleştir
• API anahtarını oluştur ve kaydet.

2. Google Maps Kütüphanesini Projeye Dahil Et

Harita işlevselliği için Google Maps JavaScript API'yi projene eklemelisin. Bunun için public dizininde bulunan bir JavaScript dosyasına veya direkt view'ına aşağıdaki script tagini ekleyebilirsin.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places"></script>

Bu kodda YOUR_GOOGLE_MAPS_API_KEY kısmını aldığın API anahtarı ile değiştirmelisin.

3. Harita Alanı Oluştur

Bir view dosyasında haritayı gösterecek bir HTML elementine ihtiyacın olacak. Örneğin, div tagi kullanarak şu şekilde yapabilirsin:

<div id="map" style="width: 100%; height: 400px;"></div>

4. Laravel Tarafında Adres Bilgisi Alma

Emlak ilan formundan il, ilçe ve semt gibi bilgileri alarak bu bilgileri haritaya yönlendirecek bir JavaScript kodu yazman gerekiyor. İşlem şu şekilde ilerleyecek:

• Kullanıcı, formdan ili, ilçeyi ve semti girdiğinde bu veriler backend tarafına gönderilecek.
• Backend'de (Laravel tarafında) bu bilgileri aldıktan sonra JavaScript'e gönderip, Google Maps Geocoding API ile koordinatlarını alacaksın.

Örnek bir form kodu şu şekilde olabilir:

<form id="locationForm">
    <input type="text" id="city" placeholder="İl">
    <input type="text" id="district" placeholder="İlçe">
    <input type="text" id="neighborhood" placeholder="Semt">
    <button type="submit">Haritayı Güncelle</button>
</form>

5. Haritayı ve Geocode İşlemini Yap

Kullanıcı formu doldurduğunda, bu bilgileri kullanarak harita üzerinde o konuma gitmek için Google Maps Geocoding API kullanabilirsin. Aşağıda basit bir JavaScript örneği mevcut:
javascript

<script>
    let map;
    let geocoder;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 39.9334, lng: 32.8597 }, // Başlangıç olarak Türkiye'nin merkezi
            zoom: 8
        });

        geocoder = new google.maps.Geocoder();

        document.getElementById('locationForm').addEventListener('submit', function(event) {
            event.preventDefault();
            geocodeAddress();
        });
    }

    function geocodeAddress() {
        const city = document.getElementById('city').value;
        const district = document.getElementById('district').value;
        const neighborhood = document.getElementById('neighborhood').value;
        const address = `${neighborhood}, ${district}, ${city}, Türkiye`;

        geocoder.geocode({ address: address }, function(results, status) {
            if (status === 'OK') {
                map.setCenter(results[0].geometry.location);
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode işlemi başarısız oldu: ' + status);
            }
        });
    }
</script>

Yukarıdaki kodda birkaç önemli noktayı açıklayayım:

1. initMap fonksiyonu: Sayfa yüklendiğinde haritayı başlatan fonksiyon. Harita başlangıçta Türkiye'nin ortasında (Ankara civarında) gösteriliyor. Ama formu doldurup gönderdiğinde bu merkez değişiyor.
2. geocodeAddress fonksiyonu: Kullanıcının girdiği il, ilçe ve semt bilgilerini birleştirip Google Maps Geocoding API'ye gönderiyor. Eğer API başarılı şekilde bir sonuç dönerse, haritanın merkezini bu sonuca göre güncelliyor ve işaretçi ekliyor.
3. Event Listener: Form gönderildiğinde (submit edildiğinde) haritayı güncelleyen fonksiyon çalışıyor.

6. Bu Yapıyı Laravel'e Entegre Et

JavaScript tarafını tamamladıktan sonra, bu kodu bir view dosyasına entegre edebilirsin. Laravel’de, bu kodu bir blade dosyasına koymak yeterli olacaktır.
Örneğin, resources/views/map.blade.php dosyasına şöyle bir içerik ekleyebilirsin:

@extends('layouts.app')

@section('content')
    <form id="locationForm">
        <input type="text" id="city" placeholder="İl">
        <input type="text" id="district" placeholder="İlçe">
        <input type="text" id="neighborhood" placeholder="Semt">
        <button type="submit">Haritayı Güncelle</button>
    </form>

    <div id="map" style="width: 100%; height: 400px;"></div>
@endsection

@section('scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap&libraries=places" async defer></script>
    <script>
        // Yukarıda verdiğim initMap ve geocodeAddress fonksiyonlarını buraya ekle
    </script>
@endsection

7. Geocoding API Kullanımına Dikkat Et

Geocoding API ile koordinatları almak için API çağrıları yapıyorsun. Bu API'yi çok fazla kullanırsan Google, belirli bir limitin üstüne çıktığında ücretlendirme yapabilir. Kullanım sınırlarına ve maliyet planına dikkat etmekte fayda var.

Alternatif: OpenStreetMap ve Leaflet.js

Eğer Google Maps yerine ücretsiz ve açık kaynak bir çözüm istersen, Leaflet.js ve OpenStreetMap kullanabilirsin. Leaflet, oldukça popüler ve hafif bir harita kütüphanesi. Aynı mantığı bu kütüphanelerle de uygulayabilirsin.