Skip to content

[add]現在地を取得し、マップ上に表示する機能の追加 #1891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: sample-map-language
Choose a base branch
from
Open

[add]現在地を取得し、マップ上に表示する機能の追加 #1891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
-->
<html>
<head>
<title>Localizing the Map</title>
<title>night walk</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.ts"></script>
Expand Down
115 changes: 102 additions & 13 deletions index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,114 @@
* SPDX-License-Identifier: Apache-2.0
*/

// This example displays a map with the language and region set
// to Japan. These settings are specified in the HTML script element
// when loading the Google Maps JavaScript API.
// Setting the language shows the map in the language of your choice.
// Setting the region biases the geocoding results to that region.
// マップインスタンスを保持する変数 (エラー処理などでアクセスするため)
let map: google.maps.Map | null = null;
// マーカーインスタンスを保持する変数（必要に応じて）
let marker: google.maps.Marker | google.maps.marker.AdvancedMarkerElement | null = null;

function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 8,
center: { lat: 35.717, lng: 139.731 },
}
);
const mapElement = document.getElementById("map") as HTMLElement;
// デフォルトの位置（エラー発生時やGeolocation非対応時に使用）
const defaultPosition = { lat: 35.717, lng: 139.731 }; // 元のコードの座標
let currentPos = defaultPosition;

// Geolocation APIに対応しているか確認
if (navigator.geolocation) {
console.log("Geolocationに対応しています。現在地を取得します...");
navigator.geolocation.getCurrentPosition(
// --- 取得成功時のコールバック ---
(position) => {
currentPos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
console.log("現在地を取得しました:", currentPos);

// 地図の中心を現在地に設定して地図を表示
map = new google.maps.Map(mapElement, {
center: currentPos,
zoom: 15, // 現在地なので少し詳細なズームレベルに
// mapId: "YOUR_MAP_ID" // 必要に応じてMapIDを指定
});

// --- マーカーを立てる ---
// ※注意: AdvancedMarkerElementを使う場合は、
// Maps APIのscriptタグで &libraries=marker を追加してください。
// 例: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=marker"></script>

// AdvancedMarkerElementが利用可能かチェック (libraries=markerを指定した場合)
if (google.maps.marker && google.maps.marker.AdvancedMarkerElement) {
marker = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: currentPos,
title: "あなたの現在地",
});
} else {
// AdvancedMarkerElementが利用できない場合 (旧Markerを使用)
marker = new google.maps.Marker({
position: currentPos,
map: map,
title: "あなたの現在地",
});
}
// --- マーカー設定ここまで ---

},
// --- 取得失敗時のコールバック ---
(error) => {
console.error("Geolocation エラー:", error);
let message = "位置情報の取得エラー";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "エラー: 位置情報の利用が許可されていません。";
break;
case error.POSITION_UNAVAILABLE:
message = "エラー: 現在位置を取得できませんでした。";
break;
case error.TIMEOUT:
message = "エラー: 位置情報の取得がタイムアウトしました。";
break;
default:
message = "エラー: 不明なエラーが発生しました。";
break;
}
alert(message + "\nデフォルトの位置を表示します。");
// エラーが発生した場合、デフォルト位置で地図を表示
displayMapWithError(mapElement, defaultPosition, message);
}
);
} else {
// Geolocation APIに対応していない場合
console.warn("お使いのブラウザはGeolocationをサポートしていません。");
alert("エラー: お使いのブラウザはGeolocationをサポートしていません。\nデフォルトの位置を表示します。");
// デフォルト位置で地図を表示
displayMapWithError(mapElement, defaultPosition, "Geolocation非対応");
}
}

// エラー時に地図を表示するための補助関数
function displayMapWithError(mapElement: HTMLElement, position: {lat: number, lng: number}, errorMessage: string): void {
map = new google.maps.Map(mapElement, {
center: position,
zoom: 8, // 広域表示
});
// (オプション) エラーメッセージを示すマーカーなどを表示しても良い
// marker = new google.maps.Marker({
// position: position,
// map: map,
// title: errorMessage,
// });
}


// declare global と window.initMap は、<script>タグのcallbackで
// グローバルスコープのinitMapを呼ぶために必要です。
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
export {};

// TypeScriptのモジュールとして扱われるようにするためのおまじない
export {};