【WordPress】WordPressの記事に地図を表示させて、地図に任意のアイコンを載せたい【php】【JavaScript】

2023年9月28日2023年10月20日

Windowsの仕様

エディション:Windows 10 Pro

バージョン:20H2

経緯

WordPressで旅行記を書いているのですが、記事が羅列するだけでかっこわるかった。

そこで、トップ画面に地図を載せて、行った場所にアイコンを置いて、それをクリックすると

その記事に飛ぶという仕様にしたくて、勉強しました。

今回は、地図に任意のアイコンを載せるというところまでです。

手順

工程が多いので、初めに手順を書きます。

Google Maps Platform からAPIキーを取得する
JavaScriptファイルの配置
画像の配置
functions.phpの編集
記事に書いてみる

といった流れです。

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

まず、Google Maps PlatfromからAPIキーを取得します。

https://mapsplatform.google.com/intl/ja/ にアクセスしてください。お金がかかることがあるので、注意してください。

”使ってみる”をクリック。アカウント選択がでるので、自身Googleのアカウントログインしてください。

ログインすると、「開始するにはプロジェクトを作成します」とでるので、適当に”プロジェクト名”など決めてください。できたら、”作成”をクリック。

「有効な請求アカウントがありません」とでます。”請求先アカウントを管理”をクリック。

”アカウントを作成”をクリック。

「新しい請求先アカウントの作成」とあるので、”名前”を適当な名前にして、”続行”をクリック。

「課金情報の設定」を記入して、”送信して課金を有効にする”をクリック。

次に”APIとサービス”をクリック

「有効なAPIサービス」とあり、その中に「最近のプロジェクトの選択」とあるので、先ほど作ったプロジェクトをクリック。

”ライブラリ”をクリック。

すると、「APIライブラリへようこそ」とでますので、今回使うAPI”Maps JavaScript API”をクリック。”有効にする”クリック。

「プロジェクト「」の請求先アカウント設定」と出るので、請求先アカウントを紐づけます。”アカウントを設定”をクリック。

質問がいくつか出てくるので、それに答えて、”送信”をクリック。

すると、「Google Maps Platformを使ってみる」とでるので、

”GOOGLE MAPS PLATFORMに移動”をクリック。

Google Maps Platformに飛びます。そこのサイドバーの”認証情報”をクリック。

「APIキー」のあたりに”Maps API Key”とあるのでそれをクリック。

すると、いろいろ制限ができる画面になります。右上に”鍵を表示します”をクリック。

「Maps API Key」とでて、自分のAPIキーが表示されます。

これでGoogle Maps PlatfromからAPIキーの取得は終わりです。

文章だけで書いたので、わかりにくいと思いますが、Google Maps PlatfromからAPIキーの取得の動画もたくさんあるので、それと併用しながらやるとわかりやすいと思います。

2. JavaScriptの配置

JavaScriptのファイルを配置

保存先は “/wp-content/themes/your-theme/js” ディレクトリを無い場合作成してください。*your-themeは自身が使っているテーマにしてください。

以下がコードです。”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; // 対応する記事に遷移
    });
  });
}

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

3.画像の配置

/wp-content/themes/your-theme/images/’ディレクトリに山のアイコン画像をアップデートします。

アイコンのファイル名は”mountaion_icon.png”とします。

3. functions.phpの編集

自身のテーマの’functions.php’に以下のコードを追加してください。

function add_custom_map_scripts() {
    // Google Mapsのスクリプトを追加
    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');

3行目の「YOUR_API_KEY」のところにはじめに取得した、APIキーをいれることを忘れないでください。