カスタムマップスタイルをマップフィールドに適用する

更新された：

マップフィールド上のレストランや店舗などのポイントオブインタレスト（POI）を非表示にし、カスタムマーカーのみを表示させたいですか？Google MapsではこれらのPOIがデフォルトで表示されますが、Google Cloud Consoleのクラウドベースのマップスタイリング機能を使用してマップの外観をカスタマイズできます。

このチュートリアルでは、Google Cloud Consoleでカスタムマップスタイルを作成し、POIを非表示に設定し、コードスニペットを使用してWPFormsマップフィールドに適用する方法を説明します。

Google Cloud Console でカスタム マップ スタイルを作成する

まず、Google Cloud Consoleを開き、Google Places API キーが設定されているプロジェクトを選択します。次に、左サイドバーから[マップスタイル]をクリックするか、直接[マップスタイル] に移動します。

マップスタイルをクリック

到着したら、[マップスタイルの作成]ボタンをクリックして新しいマップスタイルの作成を開始します。

マップスタイルを作成する

次に、表示されるモーダルウィンドウで、マップのモードとして「ライト」または「ダーク」のいずれかを選択します。必要に応じて、「モノクロ」などのオプションテーマを選択し、追加のスタイルを適用することもできます。選択が完了したら、「カスタマイズ」ボタンをクリックしてスタイルエディタを開きます。

新しいスタイルをカスタマイズする

スタイルエディタが開いたら、「ポイント・オブ・インタレスト」カテゴリを探してクリックします。クリックすると展開され、個々のポイント・オブ・インタレスト（POI）タイプの一覧が表示されます。例えば、緊急施設、娯楽施設、飲食施設、宿泊施設、レクリエーション施設、小売店などが含まれます。

クリック ポイント・オブ・インタレスト

POIを非表示にするには、非表示にしたい各カテゴリの画面右側にある目アイコンをクリックしてください。メインの「ポイント・オブ・インタレスト」カテゴリ横の目アイコンをクリックすると、すべてのPOIを一括で非表示にできます。または、各個別カテゴリ横の目アイコンをクリックすることで、特定のPOIタイプを選択的に非表示にすることも可能です。

ポイントオブインタレストの表示設定を編集する

マップスタイルの設定後、「保存」をクリックしてください。

カスタムマップスタイルの詳細については、Googleのクラウドベースのマップスタイリングに関するドキュメントを参照してください。

マップIDの取得

スタイルを公開したら、WPFormsで使用するためにMap IDを作成し、そのスタイルに関連付ける必要があります。

これを行うには、左サイドバーから「マップ管理」セクションに移動し、Google Cloud Console で「マップ ID を作成」をクリックします。

マップID作成ボタン

表示されるダイアログで、マップIDの説明的な名前を入力し、マップタイプとしてJavaScriptを選択し、利用可能なオプションからベクターを選択してください。

完了したら、[保存]をクリックして新しいマップIDを作成します。

マップIDを保存

マップIDが作成されたら、マップIDページを下にスクロールして「マップスタイル」セクションまで進みます。Googleデフォルトマップスタイルの横にある鉛筆アイコンをクリックしてください。

カスタムマップスタイルを設定する

これによりサイドバーが開きます。ここでカスタムマップスタイルを選択する必要があります。サイドバーの「マイスタイル」セクションで公開済みのスタイルを探し、選択してください。

カスタムマップスタイルを選択

次に、「完了」をクリックして、カスタムスタイルをマップIDに関連付けます。

これにより、このマップIDが使用されるたびに、設定したスタイルが適用されることが保証されます。

最後に、マップIDページに表示されているマップIDの値を コピーしてください。次のステップでカスタムスタイルをWPFormsに統合する際に、このIDが必要になります。

マップIDをコピー

マップIDをマップフィールドに適用する

WPFormsの地図フィールドにカスタムマップスタイルを適用するには、以下のPHPコードスニペットを使用してください。フォームID、フィールドID、およびコピーした地図IDでカスタマイズしてください。

  • オン 11行目置き換える 111 実際のフォームIDで
  • オン 15行目置き換える 222 実際のマップフィールドIDで
  • オン 19行目置き換える 'your-map-id' Google Cloud ConsoleからコピーしたマップID（引用符付きのまま）

注：フォームIDやフィールドIDの探し方がわからない場合は、WPFormsでフォームIDとフィールドIDを取得する方法について、開発者向けドキュメントをご覧ください。

コードスニペットをカスタマイズした値で保存すると、マップフィールドはGoogle Cloud Consoleのカスタムスタイルを使用します。地図にはカスタムマーカーのみが表示され、観光スポットなどの情報は一切表示されないため、場所を明確に集中して確認できます。

これで完了です！マップフィールド上のポイントオブインタレストを非表示にし、カスタムマーカーのみを表示できるようになりました。フォームのカスタマイズ方法については、コードでWPFormsをカスタマイズするガイドをご覧ください。

まだ行き詰まっていますか？ 何かお手伝いできることはありますか？
最終更新日：2026年2月24日