【WordPress】WordPressの記事に地図を表示させて、そのアイコンをクリックしたら、リンク先へ飛ぶ、また、マウスが乗ったら、文字を表示する。【JavaScript】

2023年9月29日2023年10月20日

Windowsの仕様

エディション:Windows 10 Pro

バージョン:20H2

経緯

以前、WordPressでGoogle Maps APIを使って、記事に地図を貼って、任意の場所にアイコンは貼ることはできた。

それがここ。

次に、アイコンをクリックすると、記事にリンク出来たらいいなと思い今回勉強しました。

また、アイコンの上にマウスを乗せると文字がでてくるとわかりやすいと思い、それも一緒にやりました。

”Click”と”mouseover”を使う

以前の続きなので、保存するディレクトリやphpファイルの場所は変わりません。

まず、JavaScriptファイルが「UTF-8」で保存されていることを確認してください。文字化けして、正しく動作しません。

それでは、コードを書きます。以下がコードです。富士山と北岳に山のアイコンがあり、そのアイコンをクリックすると記事のリンクに飛び、また、マウスをアイコンの上に乗せると、「富士山」や「北岳」と文字が表示される仕様です。

// 地図を初期化する関数
function initMap() {
    // 地図の初期設定を定義
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
        center: { lat: 35.6895, lng: 139.6917 } // 例: 東京を中心にする
    });

    // 訪れた山のデータを配列として定義
    const mountains = [
        { name: '富士山', position: { lat: 35.3606, lng: 138.7274 }, article: 'https://moripp.com/2021/07/13/fuzisan/' },
        { name: '北岳', position: { lat: 35.6639, lng: 138.2383 }, article: 'https://moripp.com/2019/09/16/kitadake_ainodake/' },
        // ...他の山のデータもこのように追加可能
    ];

    // 各山のデータに対して処理を行う
    mountains.forEach((mountain) => {
        // 山の位置にマーカーを設定
        const marker = new google.maps.Marker({
            position: mountain.position,
            map,
            title: mountain.name,  // これがマウスオーバー時のツールチップとして表示されます
            icon: 'https://your_site/wp-content/themes/your_themes/images/mountain_icon.png' // 山のアイコン画像のパス
        });

        // InfoWindowを作成してマウスオーバー時のテキストとして山の名前を設定
        const infoWindow = new google.maps.InfoWindow({
            content: mountain.name // 文字列のデコードは行わない
        });

        // マーカーの上にマウスが乗ったときのイベント
        marker.addListener('mouseover', () => {
            infoWindow.open(map, marker);
        });

        // マーカーからマウスが離れたときのイベント
        marker.addListener('mouseout', () => {
            infoWindow.close();
        });

        // マーカーをクリックした時の動作を設定
        marker.addListener('click', () => {
            window.location.href = mountain.article; // 対応する記事に遷移
        });
    });
}

// ページの読み込みが完了したら、initMap関数を実行して地図を表示
window.addEventListener('load', initMap);

コードの説明をします。以下のコードでリンク先のURLを書いています。

// 訪れた山のデータを配列として定義
    const mountains = [
        { name: '富士山', position: { lat: 35.3606, lng: 138.7274 }, article: 'https://moripp.com/2021/07/13/fuzisan/' },
        { name: '北岳', position: { lat: 35.6639, lng: 138.2383 }, article: 'https://moripp.com/2019/09/16/kitadake_ainodake/' },
        // ...他の山のデータもこのように追加可能
    ];

以下のコードでマウスをアイコンに乗せると文字がでる命令と、リンク先に飛ぶ命令をしています。

‘click’は、「クリックすると。。。」という意味です。

‘mouseover’が「マウスが乗ったら。。。」という意味です。

mountains.forEach((mountain) => {
        // 山の位置にマーカーを設定
        const marker = new google.maps.Marker({
            position: mountain.position,
            map,
            title: mountain.name,  // これがマウスオーバー時のツールチップとして表示されます
            icon: 'https://your_site/wp-content/themes/your_themes/images/mountain_icon.png' // 山のアイコン画像のパス
        });

        // InfoWindowを作成してマウスオーバー時のテキストとして山の名前を設定
        const infoWindow = new google.maps.InfoWindow({
            content: mountain.name // 文字列のデコードは行わない
        });

        // マーカーの上にマウスが乗ったときのイベント
        marker.addListener('mouseover', () => {
            infoWindow.open(map, marker);
        });

        // マーカーからマウスが離れたときのイベント
        marker.addListener('mouseout', () => {
            infoWindow.close();
        });

        // マーカーをクリックした時の動作を設定
        marker.addListener('click', () => {
            window.location.href = mountain.article; // 対応する記事に遷移
        });
    });

参考になれば、幸いです。

ここまで読んでいただきありがとうございました。