04 sie, 2023
admin2023

Mapa oddziałów z danymi kontaktowymi z wykorzystaniem ACF (WordPress) i Google Maps

Mapa poszczególnych oddziałów firmy ze wskazaniem przypisanych danych kontaktowych to przydatna funkcja, która w szególności w większych firmach z pewnością będzie oczekiwanym rozwiązaniem. Oczywiście na rynku znajdziemy bardziej lub mniej udane wtyczki, które pozwalają na osiągnięcie podobnego efektu. Niemniej, wiele wtyczek obciąża naszą instalację WordPress, a tego chcemy unikać.

Spis treści

Z tego też względu postanowiłem podzielić się z Wami swoim rozwiązaniem, które oparłem, a jakże, na ACF oraz API od Google Maps.

Rozwiązanie te jest oczywiście dostosowane do moich potrzeb, można je edytować na wszelkie sposoby.

Powiem, jak zrobiłem to u siebie.

Zaczynamy:

Część 1: Tworzenie niestandardowego typu posta i dodawanie pól ACF

  1. Rozpoczynamy od stworzenia nowego typu posta. W tym celu możemy skorzystać z pluginu Custom Post Type UI. Po instalacji pluginu tworzymy nowy typ posta, np. "kontakty". WAŻNE! Od jakiegoś czasu tworzenie nowego typu posta możliwe jest także przez ACF! To rozwiązanie jest polecane ze względu na brak konieczności instalacji kolejnej wtyczki.
  2. Następnie, chcemy dodać do naszych postów niestandardowe pola. Do tego skorzystamy z pluginu Advanced Custom Fields. Po instalacji, tworzymy nową grupę pól i dodajemy do niej pola, które chcemy wykorzystać w naszych postach, np. "adres", "numer telefonu", "e-mail".

Część 2: Stworzenie interaktywnej mapy Google

  1. Do stworzenia mapy skorzystamy z Google Maps API. Pierwszym krokiem jest zarejestrowanie klucza API. Klucz ten dodajemy do naszego pliku JavaScript lub HTML, który będzie odpowiadał za wyświetlanie mapy.
  2. Następnie, korzystając z JavaScript, inicjalizujemy naszą mapę i ustawiamy jej domyślną lokalizację.
  3. Pod mapą umieszczamy formularz wyszukiwania
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Ustawiamy odpowiednią wysokość dla diva #map. */
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- W tym miejscu zostanie wyrenderowana mapa. -->
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=TWÓJ_KLUCZ_API&callback=initMap">
    </script>
</body>
</html>

Część 3: Integracja z Google Maps Geocoding API

Teraz chcemy zintegrować naszą mapę z Google Maps Geocoding API. W tym celu stworzymy skrypt PHP, który będzie dla każdego posta typu 'kontakty' pobierał informację o adresie, a następnie za pomocą Google Geocoding API zamienił tę informację na współrzędne geograficzne. Te dane zostaną następnie zapisane do odpowiedniego pola w bazie danych.

require_once('wp-load.php');
function geocode_counties() {
    $posts = get_posts(['post_type' => 'your_post_type', 'posts_per_page' => -1]);

    foreach ($posts as $post) {
        // Pobieramy nazwę powiatu
        $county = get_field('powiat_-_jaki', $post->ID);

        // Pobieramy współrzędne dla powiatu z Google Geocoding API
        $response = file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($county) . '&key=YOUR_API_KEY');
        $data = json_decode($response);

        if (isset($data->results[0])) {
            // Zapisujemy współrzędne do pola
            update_field('coordinates_field', [
                'lat' => $data->results[0]->geometry->location->lat,
                'lng' => $data->results[0]->geometry->location->lng,
            ], $post->ID);
        } else {
            // Jeśli Google nie zwrócił żadnych wyników, zapisujemy błąd do logów
            error_log('Nie można zgeokodować powiatu: ' . $county);
        }

        // Przerwa między żądaniami, aby uniknąć przekroczenia limitu API
        sleep(1);
    }
}
add_action('init', 'geocode_counties');

Następnie dodamy skrypt, który będzie obsługiwał ten formularz. Po naciśnięciu przycisku "Szukaj", skrypt wykona zapytanie do API Google Geocoding, aby uzyskać współrzędne geograficzne wprowadzonej miejscowości. Te współrzędne następnie wykorzystamy do centrowania mapy na tym miejscu.

document.getElementById('location-search').addEventListener('submit', function(e) {
    e.preventDefault();
    var location = document.getElementById('location-input').value;
    fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + location + '&key=TWÓJ_KLUCZ_API')
        .then(response => response.json())
        .then(data => {
            var coords = data.results[0].geometry.location;
            map.setCenter(coords);
        })
        .catch(error => console.error(error));
});

W tym momencie użytkownicy powinni być już w stanie wyszukiwać miejscowości na mapie. Jednak na razie nie wyświetlamy żadnych dodatkowych informacji o wyszukiwanych miejscowościach. Przygotujemy na to kolejny krok.

Część 4: Użycie AJAX do pobierania danych

Następnie, chcemy na podstawie wprowadzonego przez użytkownika adresu wyświetlić najbliższy kontakt. Do tego skorzystamy z technologii AJAX. W naszym skrypcie JavaScript dodamy funkcję, która będzie przesyłać zapytanie do serwera z lokalizacją wprowadzoną przez użytkownika. Serwer zwróci nam informacje o najbliższym kontakcie, które wykorzystamy do uaktualnienia danych w formularzu.

function get_closest_contact($location) {
    $args = array(
        'post_type' => 'contact',
        'posts_per_page' => -1,
    );
    $contacts = get_posts($args);
    $closest_contact = null;
    $closest_distance = PHP_INT_MAX;
    foreach ($contacts as $contact) {
        $contact_lat = get_field('latitude', $contact->ID);
        $contact_lng = get_field('longitude', $contact->ID);
        $distance = haversine_distance($location['lat'], $location['lng'], $contact_lat, $contact_lng);
        if ($distance < $closest_distance) {
            $closest_distance = $distance;
            $closest_contact = $contact;
        }
    }
    return $closest_contact;
}

Następnie, potrzebujesz funkcji obsługi żądań AJAX, która przyjmie współrzędne geograficzne wysłane przez użytkownika, znajdzie najbliższy kontakt i zwróci jego dane:

function get_closest_contact($location) {
    $args = array(
        'post_type' => 'contact',
        'posts_per_page' => -1,
    );
    $contacts = get_posts($args);
    $closest_contact = null;
    $closest_distance = PHP_INT_MAX;
    foreach ($contacts as $contact) {
        $contact_lat = get_field('latitude', $contact->ID);
        $contact_lng = get_field('longitude', $contact->ID);
        $distance = haversine_distance($location['lat'], $location['lng'], $contact_lat, $contact_lng);
        if ($distance < $closest_distance) {
            $closest_distance = $distance;
            $closest_contact = $contact;
        }
    }
    return $closest_contact;
}

Następnie, potrzebujesz funkcji obsługi żądań AJAX, która przyjmie współrzędne geograficzne wysłane przez użytkownika, znajdzie najbliższy kontakt i zwróci jego dane:

function ajax_get_closest_contact() {
    $location = $_POST['location'];
    $closest_contact = get_closest_contact($location);
    $response = array(
        'name' => get_the_title($closest_contact->ID),
        'phone' => get_field('phone', $closest_contact->ID),
        'email' => get_field('email', $closest_contact->ID),
    );
    echo json_encode($response);
    die();
}
add_action('wp_ajax_get_closest_contact', 'ajax_get_closest_contact');
add_action('wp_ajax_nopriv_get_closest_contact', 'ajax_get_closest_contact');

Teraz, po stronie klienta, możemy zaktualizować nasz skrypt, aby po otrzymaniu współrzędnych od API Google Geocoding, wysłał je do serwera i otrzymał dane o najbliższym kontakcie. Dane te następnie wyświetlimy w divie #contact-info.

document.getElementById('location-search').addEventListener('submit', function(e) {
    e.preventDefault();
    var location = document.getElementById('location-input').value;
    fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + location + '&key=TWÓJ_KLUCZ_API')
        .then(response => response.json())
        .then(data => {
            var coords = data.results[0].geometry.location;
            map.setCenter(coords);

            jQuery.post(ajaxurl, {action: 'get_closest_contact', location: coords}, function(response) {
                var contact = JSON.parse(response);
                document.getElementById('contact-info').innerText = 'Najbliższy kontakt: ' + contact.name + ', ' + contact.phone + ', ' + contact.email;
            });
        })
        .catch(error => console.error(error));
});

Część 5: Dodawanie ikon do formularzy

Na koniec chcemy, aby nasze formularze wyglądały atrakcyjnie. W tym celu dodamy do nich ikony za pomocą Font Awesome. Po dodaniu linku do biblioteki Font Awesome do naszej strony, możemy zacząć dodawać ikony do naszych formularzy. W naszym przypadku, dodamy ikonę użytkownika przed imieniem, ikonę telefonu przed numerem telefonu, i ikonę koperty przed adresem email.

#location-search {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 4px;
}

#location-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#location-search-button {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

#location-search-button:hover {
    background-color: #0056b3;
}

#contact-info {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

#contact-name:before,
#contact-phone:before,
#contact-email:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

#contact-name:before {
    content: url('ścieżka_do_ikony_użytkownika');
}

#contact-phone:before {
    content: url('ścieżka_do_ikony_telefonu');
}

#contact-email:before {
    content: url('ścieżka_do_ikony_email');
}

.has-content {
    display: block !important;
}

I to jest to! Teraz powinieneś mieć kompletną, działającą wyszukiwarkę najbliższego kontaktu z interaktywną mapą. Użytkownicy mogą wprowadzić dowolną lokalizację, a twoja strona pokaże im najbliższy kontakt, wraz z jego imieniem, numerem telefonu i adresem e-mail, na interaktywnej mapie Google.

Zachęcam do eksperymentowania i dostosowywania kodu do swoich potrzeb. Pamiętaj jednak, aby zawsze testować wszystko dokładnie, zanim wdrożysz zmiany na stronę produkcyjną.

Przeczytaj także:

Należymy do IT AGENCJA

Uwaga! Korzystamy z ciasteczek „Cookies”! Jeśli Ci to nie odpowiada, opuść naszą stronę.

POLECAMY:
  • Klimatyzacja Kraków
  • Wentylacja Krakówrekuperacja Kraków
Wszystkie prawa zastrzeżone  ©WDesign 2024
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram