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

2023年9月28日2026年1月14日

経緯

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キーを入力してください。