4. 位置情報をデータベースへ保存する

<?php
function save_driver_location() {
    if ( ! isset($_POST['save_location_nonce']) || ! wp_verify_nonce($_POST['save_location_nonce'], 'save_location_nonce_action') ) {
        wp_die('Nonceが無効です');
    }
    global $wpdb;
    $table_name = $wpdb->prefix . 'driver_location';
    
    $latitude = sanitize_text_field($_POST['latitude']);
    $longitude = sanitize_text_field($_POST['longitude']);
    $accuracy = sanitize_text_field($_POST['accuracy']);
    $driver_id = sanitize_text_field($_POST['driver_id']);
    
    $data = array(
        'driver_id' => $driver_id,
        'latitude' => $latitude,
        'longitude' => $longitude,
        'accuracy' => $accuracy,
        'timestamp' => current_time('mysql')
    );
    
    $format = array('%s', '%f', '%f', '%f', '%s');
    
    $inserted = $wpdb->insert($table_name, $data, $format);
    if ($inserted === false) {
        wp_die('データの保存に失敗しました');
    } else {
        echo '位置情報が保存されました';
    }
    die(); // PHP終了
}

// WordPressのAjaxアクションをフックして保存処理を呼び出し
add_action('wp_ajax_save_location', 'save_driver_location');
add_action('wp_ajax_nopriv_save_location', 'save_driver_location');

?>

/* jQueryの使用 */
function enqueue_my_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

<?php get_header(); ?>
<main>

<div>
    <p id="status">現在位置を取得中</p>
    <p id="latitude">latitude:</p>
    <p id="longitude">longitude:</p>
    <p id="accuracy">accuracy:</p>
    <p id="timestamp">timestamp:</p>
    <?php wp_nonce_field('save_location_nonce_action', 'save_location_nonce'); ?>
    <button id='startTracking'>startTracing</button>
    <button id='stopTracking'>stopTracking</button>
</div>
<div id='map' style='height: 400px; width: 100%; margin: 20px 0;'></div>

<script>
// 地図や経路の初期化
let watchId = null;
let map;
let marker;
let path;
let locations = [];
const DRIVER_ID = '<?php echo wp_get_current_user()->ID; ?>'; // 現在のユーザーID

// Google Mapsの読み込み
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: { lat: 35.6812, lng: 139.7671 },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    path = new google.maps.Polyline({
        path: locations,
        geodesic: true,
        strokeColor: '#ff0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    path.setMap(map);
}

// 位置情報を更新する
function updateMap(latitude, longitude) {
    const position = { lat: latitude, lng: longitude };
    map.setCenter(position);

    if (!marker) {
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: '現在位置'
        });
    } else {
        marker.setPosition(position);
    }

    locations.push(position);
    path.setPath(locations);
}

// 位置情報を直接送信して保存する
function saveLocationDirectly(latitude, longitude, accuracy) {
    var formData = new FormData();
    formData.append('action', 'save_location');
    formData.append('latitude', latitude);
    formData.append('longitude', longitude);
    formData.append('accuracy', accuracy);
    formData.append('driver_id', DRIVER_ID);
    formData.append('save_location_nonce', '<?php echo wp_create_nonce('save_location_nonce_action'); ?>');
    
    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        console.log('位置情報が保存されました:', data);
    })
    .catch(error => {
        console.error('位置情報保存エラー:', error);
    });
}

// 追跡を開始する
function startTracking() {
    if ('geolocation' in navigator) {
        document.getElementById('status').textContent = '追跡中...';
        locations = [];
        if (path) { path.setPath(locations); }

        watchId = navigator.geolocation.watchPosition(
            function(position) {
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;
                const accuracy = position.coords.accuracy;
                const timestamp = new Date(position.timestamp).toLocaleString();

                document.getElementById('status').textContent = '位置情報を追跡中';
                document.getElementById('latitude').textContent = `latitude: ${latitude}`;
                document.getElementById('longitude').textContent = `longitude: ${longitude}`;
                document.getElementById('accuracy').textContent = `accuracy: ${accuracy}m`;
                document.getElementById('timestamp').textContent = `timestamp: ${timestamp}`;

                updateMap(latitude, longitude);
                saveLocationDirectly(latitude, longitude, accuracy); // 位置情報を直接保存
            },
            function(error) {
                let errorMessage = '';
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = '位置情報の使用が許可されていません';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = '位置情報が取得できませんでした';
                        break;
                    case error.TIMEOUT:
                        errorMessage = '位置情報の取得がタイムアウトになりました';
                        break;
                    default:
                        errorMessage = 'その他のエラー: ' + error.message;
                }
                document.getElementById('status').textContent = '失敗: ' + errorMessage;
                console.error(errorMessage);
            },
            {
                enableHighAccuracy: true,
                timeout: 1000,
                maximumAge: 0
            }
        );
    } else {
        document.getElementById('status').textContent = 'Geolocationはサポートされていません';
    }
}

// 追跡を停止する
function stopTracking() {
    if (watchId !== null) {
        navigator.geolocation.clearWatch(watchId);
        watchId = null;
        document.getElementById('status').textContent = '追跡を中止しました';
    }
}

document.getElementById('startTracking').addEventListener('click', startTracking);
document.getElementById('stopTracking').addEventListener('click', stopTracking);

// 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(); ?>