5. データベースから最新の位置情報を表示し続ける
functions.php
単に$wpdb->get_row() すると、ページを更新しない限り情報が更新されないので、Ajaxで取得する必要があります。
// AJAX: 最新の位置情報を取得する
function get_latest_location() {
$driver_id = isset($_GET['driver_id']) ? intval($_GET['driver_id']) : 0;
if ($driver_id) {
global $wpdb;
$table_name = $wpdb->prefix . 'driver_location';
$latest_location = $wpdb->get_row(
$wpdb->prepare("SELECT * FROM $table_name WHERE driver_id = %d ORDER BY timestamp DESC LIMIT 1", $driver_id),
ARRAY_A
);
if ($latest_location) {
wp_send_json_success($latest_location);
} else {
wp_send_json_error('位置情報が見つかりません。');
}
} else {
wp_send_json_error('ドライバーIDが不正です。');
}
}
add_action('wp_ajax_get_latest_location', 'get_latest_location');
add_action('wp_ajax_nopriv_get_latest_location', 'get_latest_location');
page-viewlocation.php
<?php get_header(); ?>
<main>
<div id='map' style='height: 500px; width: 100%; margin: 20px 0;'></div>
<script>
let map;
let marker;
const DRIVE_ID = '<?php echo wp_get_current_user()->ID; ?>';
// Google Mapの読み込み
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: { lat: 35.6812, lng: 139.7671 },
mapTypeId: google.maps.MapTypeId.ROADMAP
});
fetchLatestLocation();
}
// 最新の位置情報を取得して地図に反映
function fetchLatestLocation() {
//fetch(`<php echo admin_url('admin-ajax.php'); ?>?action=get_latest_location&driver_id=${DRIVER_ID}`)
fetch(`<?php echo admin_url('admin-ajax.php'); ?>?action=get_latest_location&driver_id=1`)
.then(response => response.json())
.then(data => {
if (data.success) {
const location = data.data;
const position = { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) };
map.setCenter(position);
if(!marker) {
marker = new google.maps.Marker({
position: position,
map: map,
title: '最新位置'
})
} else {
marker.setPosition(position);
}
} else {
console.error(data.data || '位置情報の取得に失敗しました');
}
})
.catch(error => console.error('位置情報の取得エラー:', error));
}
// 定期的に位置情報を更新
setInterval(fetchLatestLocation, 5000);
// Google Maps APIの読み込み
function loadGoogleMapsAPI() {
const script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBc4f0GB_-ZGxU4-oPdzy4VfVLckM_NRNo&callback=initMap';
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
loadGoogleMapsAPI();
</script>
</main>
<?php get_footer(); ?>