AI要約
レストラン、ショップ、その他のビジネスなどの地点情報（POI）をマップフィールドに表示しないようにして、カスタムマーカーのみを表示したいですか？GoogleマップではデフォルトでこれらのPOIが表示されますが、Google Cloud Consoleのクラウドベースのマップスタイリング機能を使用してマップの外観をカスタマイズできます。
このチュートリアルでは、Google Cloud Consoleでカスタムマップスタイルを作成し、POIを非表示にするように設定し、コードスニペットを使用してWPFormsのマップフィールドに適用する方法を説明します。
Google Cloud Consoleでカスタムマップスタイルを作成する
まず、Google Cloud Consoleを開き、Google Places APIキーが設定されているプロジェクトを選択します。次に、左側のサイドバーからMap Stylesをクリックするか、Map Stylesに直接移動します。
そこに表示されたら、Create map styleボタンをクリックして新しいマップスタイルを開始します。
次に、表示されるモーダルウィンドウで、LightまたはDarkのいずれかを選択してマップのモードを選択します。必要に応じて、Monochromeなどのオプションのテーマを選択して、追加のスタイリングを適用することもできます。選択が完了したら、Customizeボタンをクリックしてスタイルエディタを開きます。
スタイルエディタが開いたら、Points of interestカテゴリを見つけてクリックします。これにより展開され、Emergency、Entertainment、Food and drink、Lodging、Recreation、Retailなどの個々の地点情報（POI）タイプのリストが表示されます。
POIを非表示にするには、非表示にしたい各カテゴリの画面右側にある目のアイコンをクリックします。メインのPoints of Interestカテゴリの横にある目のアイコンをクリックすると、すべてのPOIを一度に非表示にすることができます。または、個々のカテゴリの横にある目のアイコンをクリックして、特定のPOIタイプを選択的に非表示にすることもできます。
マップスタイルを設定したら、Saveをクリックします。
マップIDを取得する
スタイルが公開されたら、WPFormsで使用するためにマップIDを作成し、スタイルに関連付ける必要があります。
これを行うには、左側のサイドバーからMap Managementセクションに移動し、Google Cloud ConsoleでCreate map IDをクリックします。
表示されるダイアログで、マップIDの説明的な名前を入力し、マップタイプとしてJavaScriptを選択し、オプションからVectorを選択します。
完了したら、Saveをクリックして新しいマップIDを作成します。
マップIDが作成されたら、マップIDページで下にスクロールしてMap stylesセクションに移動します。Google defaultマップスタイルの横にある鉛筆アイコンをクリックします。
これによりサイドバーが開きます。ここでカスタムマップスタイルを選択する必要があります。サイドバーで、My Stylesセクションの下にある公開済みのスタイルを見つけて選択します。
次に、DoneをクリックしてカスタムスタイルをマップIDに関連付けます。
これにより、このマップIDが使用されるたびに、設定したスタイルが適用されます。
最後に、マップIDページに表示されているマップID値をコピーします。このIDは、次のステップでWPFormsにカスタムスタイルを統合するために必要になります。
マップIDをマップフィールドに適用する
カスタムマップスタイルをWPFormsマップフィールドに適用するには、次のPHPコードスニペットを使用します。フォームID、フィールドID、およびコピーしたマップIDでカスタマイズしてください。
- 11行目で、
111を実際のフォームIDに置き換えます - 15行目で、
222を実際のマップフィールドIDに置き換えます - 19行目で、
'your-map-id'をGoogle Cloud ConsoleからコピーしたマップIDに置き換えます（引用符はそのままにしてください）
カスタマイズした値でコードスニペットを保存すると、マップフィールドはGoogle Cloud Consoleのカスタムスタイルを使用します。マップには、POI（興味のある地点）なしでカスタムマーカーのみが表示され、クリーンで集中した場所の表示が得られます。
これで完了です！マップフィールドのPOIを非表示にして、カスタムマーカーのみを表示できるようになりました。フォームをカスタマイズする他の方法については、コードでWPFormsをカスタマイズするガイドをご覧ください。