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ć.
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
Część 2: Stworzenie interaktywnej mapy Google
<!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ą.
Współpracujemy z CODEXO
Uwaga! Korzystamy z ciasteczek „Cookies”! Jeśli Ci to nie odpowiada, opuść naszą stronę.
