Simple Google Maps
プレーンテキストの住所フィールドからGoogle Mapsの埋め込みまたはリンクを表示するフィールドフォーマッターを提供します。
simple_gmap
インストール
composer require 'drupal/simple_gmap:^4.0'
composer require 'drupal/simple_gmap:^3.1'
概要
Simple Google Mapsは、住所コンテンツからGoogle Mapの表示またはGoogle Mapsへのリンクを最も簡単に実現できる軽量モジュールです。複雑なマッピングソリューションとは異なり、動的地図にGoogle Maps APIキーは不要で、JavaScriptの設定も必要ありません。
このモジュールはDrupal標準のプレーンテキストフィールド用のフィールドフォーマッターを提供します。ユーザーがテキストフィールドに1行の住所（例：「東京都渋谷区道玄坂1-2-3」）を入力すると、フォーマッターがそれを埋め込みGoogle Map iframe、静的地図画像、Google Mapsへのリンク、またはこれらの組み合わせに変換します。
このアプローチはGoogle Mapsのネイティブiframe埋め込み機能を活用しているため、設定と使用が非常に簡単です。専用のジオコーディングフィールドや複雑なマッピングAPIのオーバーヘッドなしに、基本的な住所から地図への機能が必要なサイトに最適です。
Features
- プレーンテキストの住所を埋め込みGoogle Maps iframeに変換するフィールドフォーマッター
- Google Maps Static APIを使用したオプションの静的地図画像表示（APIキーが必要）
- 新しいウィンドウでGoogle Mapsの場所を開く設定可能なリンク
- 地図と一緒に、または地図の代わりに元の住所テキストを表示
- カスタマイズ可能な地図サイズ（ピクセルまたはパーセンテージで幅と高さを指定）
- 1（最小）から20（最大）までのズームレベル制御
- 複数の地図タイプ：地図、衛星写真、ハイブリッド、地形
- 地図表示の言語設定（固定言語コードまたはページ言語の自動検出）
- 2倍スケーリングオプションによる静的地図のRetina表示対応
- 設定可能なiframeタイトルと静的画像の代替テキストによるアクセシビリティ対応
- 住所自体をリンクテキストとして使用する特別な「use_address」オプション
- 住所テキスト入力のXSS保護
Use Cases
ビジネス所在地の表示
ビジネスコンテンツタイプにシンプルなテキストフィールドを追加し、編集者がビジネスの住所を入力できるようにします。フォーマッターを設定して埋め込み地図と住所テキストを表示することで、訪問者が場所を視覚的に確認し、住所をコピーできるようになります。
イベント会場のマッピング
イベントコンテンツタイプに、Simple Google Mapsでフォーマットされた場所テキストフィールドを追加します。「use_address」オプション付きのリンクを使用して、ユーザーがクリックしてGoogle Mapsで道順を確認できるようにします。
静的地図付きのお問い合わせページ
お問い合わせページで静的地図オプションを使用して、非インタラクティブな地図画像を表示します。これにより、ユーザーが地図を操作できない代わりにクリーンな視覚表示が提供され、画像をページ速度に最適化できます。Google Maps APIキーが必要です。
多言語サイト
langcode設定を「page」に設定すると、現在のページ言語で地図ラベルが自動的に表示され、海外からの訪問者に一貫した体験を提供できます。
モバイル最適化された地図
地図にパーセンテージベースの幅（例：100%）を使用して、モバイルデバイスで適切にスケールするようにします。静的地図のRetinaスケーリングを有効にして、高解像度スクリーンで鮮明に表示されるようにします。
リンク付き住所ディレクトリ
場所のディレクトリでは、埋め込み地図なしでリンクのみを表示するようにフォーマッターを設定します。これにより、各場所のGoogle Mapsページへの素早いアクセスを提供しながら、リスト表示をコンパクトに保つことができます。
Tips
- 多言語サイトでは、訪問者の言語で自動的に地図を表示するためにlangcode設定に「page」を使用してください
- リンクテキストに「use_address」を入力すると、実際の住所がクリック可能なリンクとして使用され、ユーザーにとってより意味のある表示になります
- コンテンツ編集者がGoogle が認識できる住所を入力することを理解できるように、テキストフィールドに期待される形式を説明するヘルプテキストを追加してください
- 静的地図オプションは、動的地図よりも高速に読み込まれ、帯域幅を少なく使用する非インタラクティブな画像を作成します
- アクセシビリティのために、地図の目的を説明するiframe_titleとalt_text設定を常に構成してください
- コンテンツに入力する前に、Googleが正しく場所を特定できることを確認するためにmaps.google.comで住所をテストしてください
Technical Details
Hooks 1
hook_theme
地図出力のレンダリング用に「simple_gmap_output」テーマフックを定義するためにhook_theme()を実装します。
Troubleshooting 5
静的地図には有効なGoogle Maps APIキーが必要です。Google Cloud ConsoleからStatic Maps APIが有効化されたAPIキーを取得し、「埋め込み静的地図を含める」がチェックされている場合はフォーマッター設定に入力してください。
テキストフィールドに入力された住所がGoogle Mapsが認識できる形式であることを確認してください。maps.google.comで同じ住所を検索してテストしてください。最良の結果を得るには、市区町村や都道府県/国を含む完全な住所を使用してください。
フォーマッターオプションで「埋め込み地図のiframeのタイトル」設定を構成してください。[address]を使用してタイトルに動的に住所を含めることができます。
フォーマッター設定の「言語」設定を確認してください。特定の2文字言語コード（例：「en」、「de」、「ja」）を設定するか、「page」を使用して現在のページ言語に自動的に一致させてください。
動的地図の場合、サイズはピクセル（600px）またはパーセンテージ（100%）で指定できます。静的地図の場合、ピクセル値のみが受け付けられ、「px」サフィックスなしで入力する必要があります（例：600pxではなく600）。
Security Notes 4
- モジュールは住所フィールドのXSS攻撃を防ぐためにユーザー入力を適切にサニタイズします
- 静的地図用のAPIキーは設定に保存され、ページソースで公開されます。適切に制限されたAPIキーを使用してください
- 住所テキストはインジェクション攻撃を防ぐためにGoogle Mapsに送信される前にURLエンコードされます
- すべての出力はセキュリティのためにDrupalのレンダーシステムとTwigの自動エスケープを使用します