【WordPress】Googleマップに任意のアイコンを表示させる方法【PHP × JavaScript】

2023年9月28日2025年5月1日

経緯

WordPressで旅行記を投稿しているのですが、記事が並んでいるだけでは少し味気なく感じていました。
そこで、トップページにGoogleマップを表示し、行った場所にアイコンを置いて、記事にリンクできる仕組みを作りたいと考えました。

今回はその第一歩として、地図上に任意のアイコンを表示する方法についてまとめました。
今後、アイコンをクリックして記事に遷移できる機能も含めて拡張予定です。

実装の流れ

作業の全体的な手順は以下のとおりです。

Google Maps PlatformからAPIキーを取得
JavaScriptファイルの作成と配置
画像（アイコン）の配置
functions.phpの編集
実際に記事へショートコードを記述

1. Google Maps PlatformからAPIキーを取得

Google Maps APIを使用するには、GoogleからAPIキーの取得と課金設定が必要です。

Google Maps Platform にアクセス
「使ってみる」→ Googleアカウントでログイン
新規プロジェクトを作成し、請求先アカウントを設定
「Maps JavaScript API」を有効にする
サイドメニュー「認証情報」→「APIキー」を表示
「APIキー」をコピーしておきます（後で使用）

※課金設定がありますが、月額無料枠内での利用であれば実質無料で使える場合が多いです。

2. JavaScriptファイルの作成と配置

/wp-content/themes/your-theme/js ディレクトリに custom-map.js という名前で以下のコードを保存します。

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: { lat: 35.6895, lng: 139.6917 } // 東京中心
  });

  const mountains = [
    { name: '富士山', position: { lat: 35.3606, lng: 138.7274 }, article: 'https://example.com/fuji' },
    { name: '北岳', position: { lat: 35.6639, lng: 138.2383 }, article: 'https://example.com/hokutake' }
  ];

  mountains.forEach((mountain) => {
    const marker = new google.maps.Marker({
      position: mountain.position,
      map,
      title: mountain.name,
      icon: 'https://yourwebsite.com/wp-content/themes/your-theme/images/mountain_icon.png'
    });

    marker.addListener('click', () => {
      window.location.href = mountain.article;
    });
  });
}

window.addEventListener('load', initMap);

3. アイコン画像の配置

以下の場所に、マーカーとして使用したい**山のアイコン画像（例：mountain_icon.png）**をアップロードします。

/wp-content/themes/your-theme/images/mountain_icon.png

アイコンのサイズや背景透過に注意してください。

4. functions.phpの編集

テーマフォルダ内の functions.php に以下のコードを追加します。

function add_custom_map_scripts() {
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true);
    wp_enqueue_script('custom-map', get_template_directory_uri() . '/js/custom-map.js', array('google-maps'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'add_custom_map_scripts');

function custom_map_shortcode() {
    return '<div id="map" style="height: 400px; width: 100%;"></div>';
}
add_shortcode('custom_map', 'custom_map_shortcode');

※YOUR_API_KEY には、1で取得した実際のAPIキーを入力してください。

5. WordPress記事に地図を表示する

記事や固定ページの本文に以下のショートコードを記述します。

[custom_map]

これで記事内にGoogleマップが表示され、マーカーが表示されます。マーカーをクリックすると、対応するリンク先に遷移します。

まとめ

今回は、WordPressにGoogleマップを埋め込み、任意の地点にアイコン（マーカー）を表示する方法をご紹介しました。
このようにして視覚的に「訪れた場所」をマップ上に表示することで、旅行記や登山記録により臨場感を持たせることができます。

今後は、マウスオーバーで名称表示や記事リンクへの遷移機能もさらに強化していきたいと考えています。

最後までお読みいただき、ありがとうございました。

スクールの紹介

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

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

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

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

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

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

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

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

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

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

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

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

詳しくはこちら↓

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

morishuhei

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。