「線」タグアーカイブ

開発, 技術メモ

Google Mapsのマーカーとラインで経路情報

コメントする

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>