メインコンテンツにスキップ

会場マップ

SportsPress は、会場アーカイブページと、試合に会場が割り当てられている場合の個別試合ページにインタラクティブなマップを表示します。マップは、コア SportsPress プラグインに同梱されている Leaflet JavaScript ライブラリを介して OpenStreetMap タイルを使用してレンダリングされます。

今日アップデートされました

会場マップ

SportsPress は、会場アーカイブページと、試合に会場が割り当てられている場合の個別試合ページにインタラクティブなマップを表示します。マップは、コア SportsPress プラグインに同梱されている Leaflet JavaScript ライブラリを介して OpenStreetMap タイルを使用してレンダリングされます。

マップの表示方法

マップシステムは、venue-map.php テンプレートから、会場の緯度、経度、住所、ズームレベル、マップタイプを引数として呼び出される WordPress アクションフック sp_venue_show_map を使用します。OpenStreetMap モジュール(コアプラグインの includes/sportspress/modules/sportspress-openstreetmap.php に同梱)がこのアクションにフックして、マップをレンダリングします。

マップは、会場に緯度経度の両方が設定されている場合にのみ表示されます。座標がない場合、マップはレンダリングされません。

マップが表示される場所

  • 会場アーカイブページ — 訪問者が会場の公開 URL(例:/venue/old-trafford/)を表示したとき、ページ上部にマップが表示されます。

  • 試合ページ — 試合に座標付きの会場が割り当てられている場合、試合ページの会場セクションにマップがレンダリングされます。

  • ショートコード[event_venue] ショートコードは、試合にマップ付きの会場がある場合にマップを含めます。

マップ設定

マップの表示オプションは 試合 > 設定会場セクションにあります。

  • 会場マップ (sportspress_event_show_maps) — 会場マップの表示をグローバルに有効または無効にするチェックボックス。デフォルト:オン。

  • タイプ (sportspress_map_type) — タイルソースを選択します。

    • デフォルト (ROADMAP) — tile.openstreetmap.org からの標準 OpenStreetMap ストリートマップタイル

    • 衛星 (SATELLITE) — ArcGIS Online(Esri World Imagery)からの衛星画像タイル

  • ズーム (sportspress_map_zoom) — 整数のズームレベル。範囲 0〜21。デフォルト:15。値が高いほどより詳細に(街路レベル)、低いほどズームアウトされます(大陸レベル)。

これらの設定は venue-map.php テンプレートによって読み込まれ、sp_venue_show_map アクションに渡されます。

会場の座標

座標は WordPress のオプションテーブルで会場ごとに保存されます。

  • 緯度taxonomy_<term_id> オプション配列に sp_latitude として保存

  • 経度taxonomy_<term_id> オプション配列に sp_longitude として保存

座標を設定するには、試合 > 会場 で会場を編集してマップマーカーを会場の位置にドラッグするか、緯度経度フィールドに直接 10 進数の度数値を入力します。

OpenStreetMap レンダリングの詳細

Leaflet マップコンテナは、座標に対応する Google マップページにリンクするアンカータグをラップする 320px の高さの div としてレンダリングされます。マップはパン、タッチズーム、ダブルクリックズーム、スクロールホイールズームがすべて無効化された状態で初期化されます。マップは表示専用で、インタラクティブではありません。

保存された座標に標準のピンマーカーが配置されます。

衛星画像の場合、タイルは ArcGIS Online World Imagery サービスから提供されます。デフォルト(ロードマップ)タイプの場合、タイルは公開の OpenStreetMap タイルサーバーから提供されます。

Google マップ連携

SportsPress Pro プラグインにはSportsPress Google マップ連携モジュール(includes/sportspress-google-maps/)が含まれています。このモジュールが有効な場合、sp_venue_show_map フックから OpenStreetMap ハンドラーを削除し、Google マップの iframe レンダラーに置き換えます。

Google マップモジュールは、tboy.co/maps_embed(Google マップ埋め込み API のプロキシ)経由の Google マップタイルを埋め込む <iframe> としてマップをレンダリングします。iframe は 600×320 ピクセルです。オーバーレイのアンカーが住所の完全な Google マップページにリンクします。

Google マップモジュールは試合設定画面に独自の設定を追加しません。OpenStreetMap モジュールと同じ sportspress_map_zoomsportspress_map_type の設定を使用します。一度に 1 つのマップレンダラーのみが有効です。モジュールが読み込まれると、Google マップが OpenStreetMap を置き換えます。

こちらの回答で解決しましたか?