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

経緯

以前、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; // 対応する記事に遷移
        });
    });

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

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

スクールの紹介

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

最後に宣伝をさせてください。

技術で未来を切り拓く―あなたの夢を現実にするプログラミングスクール

Webデザインやプログラミングで成功を目指している方々にとって、このオンラインスクールは夢を叶えるための最適な場所です。皆さんのキャリアを次の段階へと引き上げるためにデザインされたこのスクールは、一人ひとりの成功を心から願い、それを実現するための全てを提供しています。ここでは、このスクールの魅力について詳しくご紹介します。

◆圧倒的な費用対効果
このオンラインプログラミングスクールは、Web系教育において最高の費用対効果を提供しています。多くの高額スクールが存在する中で、ここではリーズナブルな価格で、質の高い教材、無限のサポート、そして実際に市場で求められるスキルの習得機会を提供しています。

◆現役フリーランスの講師陣
講師たちは全員、現役のフリーランスプロフェッショナルです。市場で活躍している講師から直接、最新のトレンドや実践的なスキルを学べるのは、このスクールの大きな特徴です。

◆柔軟な学習コース
固定のコースがなく、学習者の興味やニーズに応じて自由に学習できます。進路変更も自由で、最低契約期間は1ヶ月という柔軟性を持っています。自分のペースで、自分に合った学習が可能です。

◆無制限の添削とサポート
理解できるまで、そして満足するまで、無制限に添削と質問への回答を提供しています。進路相談や技術面以外の相談にも対応しており、全面的にサポートします。

◆社長から学べる貴重な機会
デザイナー、プログラマー、ディレクター、マーケターとして豊富な経験を持つ社長から直接学べるのも、このスクールの特別な点です。他のスクールでは得られない、貴重な機会です。

◆実績作りへの徹底的なサポート
就職、転職、フリーランスとして成功するためには、高品質な実績が必要です。生徒の作品レベルを最大限に高め、市場で求められる実績を作り上げることに力を入れています。案件を取得できない生徒には、直接案件を提供することもあります。

◆メッセージからの約束
高額な授業料を支払わせて結果を出せないスクールとは違い、物理的なサポートは提供できないかもしれませんが、継続的な努力を通じて最高の結果を出せるようにサポートします。一緒に不正なスクールを撲滅し、あなたの夢を実現しましょう。

このプログラミングスクールは、Webデザインやプログラミングでの成功を目指す方々に必要な全てを備えています。今こそ、このコミュニティに参加し、あなたのキャリアを加速させる時です。

詳しくはこちら↓