【WordPress×JavaScript】Googleマップにリンク付きアイコンを表示し、マウスオーバーでラベル表示する方法

経緯

以前、WordPressでGoogle Maps APIを使って、記事内に地図を表示し、特定の地点に山のアイコンを配置することには成功していました。
今回はその応用として、アイコンをクリックすると記事に遷移できるようにする機能と、マウスを乗せたときに山の名前を表示する機能を追加しました。

JavaScriptでのイベント処理においては、clickとmouseoverを使うことでこの機能を実現しています。

---

実装方法（JavaScriptコード）

以下は、Google Maps上に山のアイコンを表示し、クリックでリンク先に遷移し、マウスオーバーで山名を表示するコードです。

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_theme/images/mountain_icon.png' // アイコンのURLを自分のテーマに合わせて変更
        });

        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;
        });
    });
}

window.addEventListener('load', initMap);

---

機能の説明

・mountainsという配列に、地点ごとの緯度・経度・山名・記事URLを定義しています。
・マーカーを設置する際に、titleプロパティでツールチップのように山名を表示できます。
・mouseoverイベントで、InfoWindowが開き、マウスを乗せたときに山の名前が吹き出しで表示されます。
・mouseoutイベントで、InfoWindowを閉じます。
・clickイベントで、設定された記事URL（mountain.article）にページ遷移します。

---

実装上の注意点

・JavaScriptファイルはUTF-8で保存してください。文字コードの誤りによって、マーカーのタイトルなどが文字化けする可能性があります。
・iconのURLには、WordPressテーマの正しいパスを指定してください。
・google.maps.Map()で指定する中心座標やズームレベルは、マップ全体の見せ方に合わせて調整可能です。

---

まとめ

Google Maps APIを使えば、WordPressの記事内にリンク付きのマーカーを配置することができます。
本記事のように、JavaScriptでマーカーごとのクリック・マウスオーバーイベントを指定することで、
読者にとって分かりやすく、直感的なナビゲーションが可能になります。

登山記録や旅行記、位置情報を活用したコンテンツに最適な表現方法です。
ぜひご活用ください。最後までお読みいただき、ありがとうございました。

スクールの紹介

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

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

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

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

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

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

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

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

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

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

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

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

詳しくはこちら↓