3. 追跡した位置情報をGoogle Mapに表示する

<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>
	<button id='startTracking'>startTracking</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 = [];


function initMap() {
	// マップの位置を初期化
	map = new google.maps.Map(document.getElementById('map'), {
		zoom: 15,
		center: { lat: 35.6812, lng: 139.7671 },
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	// 移動経路を示すPolylineを初期化
	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 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);
				console.log( latitude + '/' + longitude );
			
			},
			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: 10000, // タイムアウト10秒
				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>