Google Maps（グーグルマップ）は、Googleが提供する地図サービスで、ウェブブラウザやスマートフォンのアプリで利用できます。場所の検索、経路案内、ストリートビュー、リアルタイム交通情報などの機能を通じて、ユーザーが目的地までのルートを確認したり、付近の施設を探したりする際に便利なツールです。
今回はGoogle Mapsをカスタマイズして、経路情報に応用できるJavaスクリプトのサンプルを書きました。
<!DOCTYPE html>
<html>
<head>
<title>Google Maps マーカーとライン</title>
<style>
#map {
height: 100%;
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Google Maps APIロード完了後に呼び出す初期化関数
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 35.0, lng: 137.0 } // 中心点の設定
});
// マーカーの緯度・経度と名前のリスト
const locations = [
{ lat: 35.6895, lng: 139.6917, name: "東京" },
{ lat: 34.6937, lng: 135.5023, name: "大阪" },
{ lat: 35.0116, lng: 135.7681, name: "京都" },
{ lat: 33.5898, lng: 130.4017, name: "福岡" },
{ lat: 34.2257, lng: 129.7181, name: "長崎" },
{ lat: 26.2124, lng: 127.6792, name: "沖縄" }
];
// 情報ウィンドウのインスタンスを作成
const infoWindow = new google.maps.InfoWindow();
// 各位置にマーカーを配置し、クリックイベントで地域名を表示
for (let i = 0; i < locations.length; i++) {
const marker = new google.maps.Marker({
position: { lat: locations[i].lat, lng: locations[i].lng },
map: map,
title: locations[i].name // ホバー時に表示される地域名
});
// クリックイベントで情報ウィンドウに地域名を表示
marker.addListener("click", () => {
infoWindow.setContent(locations[i].name);
infoWindow.open(map, marker);
});
}
// マーカーを結ぶポリラインを作成
const linePath = new google.maps.Polyline({
path: locations.map(location => ({ lat: location.lat, lng: location.lng })),
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
// ポリラインをマップに追加
linePath.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=各ユーザーKEY"></script>
</body>
