> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/advanced/google-map-element-2.md).

# Googleマップ

### PageFly Google マップについて

[Google Map PageFly](https://help.pagefly.io/manual/google-map-element/) 要素を使用すると、Google API から直接マップをページに配置でき、訪問者が簡単にあなたの場所を見つけられるようになり、コンバージョン率の向上に役立ちます。Google マップ要素を使用して、選択した任意の物理的な場所を表示できます。

Google マップ API についてさらに詳しく知りたい場合は、[What is Google Map API?](https://blog.hubspot.com/website/google-maps-api) をチェックしてください。

以下のビデオチュートリアルをご覧になり、Google マップを PageFly でページにシームレスに統合する方法を学びましょう。

{% embed url="<https://youtu.be/TkbL0Y3rC00>" %}

### Google マップ要素にアクセスする方法

* ステップ1：左メニューの「**要素**」ボタンをクリックし、PageFlyタブに注目します。
* ステップ2：ドロップダウンメニューから「**Google マップ**」要素を選択します。これは、詳細カテゴリの下にあります。
* ステップ3：希望するバリアントのGoogle マップ要素をページエディタにドラッグ＆ドロップします。

![](/files/CGF59iNqwnLlxszN2sMl)

Google マップ要素には、Google API を使用した基本ロケーション表示と高度なロケーション表示が付属しています。高度な要素を使用するには、Google Cloud Platform Console から API キーを取得する必要があります。

サイドバーで見つける代わりに、検索機能を使用してこの要素を検索できることに注意してください。

![](/files/ELbvHb76V9iHDh2nV1mP)

### Google マップ要素を設定する方法

PageFly の Google マップ要素には、ユーザーエクスペリエンスとコンバージョン率を向上させるために、その外観と機能をカスタマイズできるさまざまなパラメータが付属しています。

ページレイアウトに追加した要素を選択し、一般タブとスタイル設定タブに移動してパラメータを確認します。

![](/files/O0rVo4vLswqkh8kiUEvl)

#### 一般設定

一般タブでは、以下の主な設定を構成できます。

| Map location: Google マップに表示するために、あなたのビジネスの住所を入力してください。マップはすぐにその場所を表示します。                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/4ANKGII5Y2ADya2p1lnU)                                                                                                                        |
| Zoom: マップのズームレベルを調整して、場所に焦点を当てるか、より広い領域を表示します。                                                                                                          |
|                                                                                                                                                         |
| Map Type: マップの表示タイプを選択します。オプションには、ロードマップグラフィックまたは衛星ビジュアルが含まれます。                                                                                         |
|                                                                                                                                                         |
| Content Loading: - 遅延読み込み：コンテンツは画面に表示される直前にのみ読み込まれるため、データ容量を節約し、ページの初期読み込みを高速化するのに役立ちます。- 標準読み込み：ユーザーがページを開いた直後にページ上のすべてが読み込まれるため、最初からすべてのコンテンツが表示されます。 |
| ![](/files/ordfhXSTFieODnt0KKnM)                                                                                                                        |

属性、可視性、アニメーションパラメータに関する詳細情報は、この[一般タブガイド](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。

#### スタイル設定

スタイル設定タブでは、Google マップ要素の視覚的側面をカスタマイズして、ブランドのデザインと一致させることができます。フォント、色、サイズ、間隔など、さまざまな要素を調整して、マップがページにシームレスに統合されるようにすることができます。

詳細については、[スタイル設定タブガイド](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。

### 一般的なケース

#### Google マップが正しく表示されない

Map Location フィールドに入力された住所が正確で完全であることを確認してください。高度なマップ要素を使用している場合は、Google マップ API キーが正しく設定され、必要な権限が付与されていることを確認してください。問題が解決しない場合は、ページを更新するか、要素を再度追加してみてください。

#### スタイル設定が他のページ要素と競合する

スタイル設定タブを使用して、マップの視覚的設定（マージン、間隔、色など）を調整し、ページ全体のデザインと一致するようにします。必要に応じてカスタム CSS を適用して、特定のスタイル設定の競合を解決し、一貫性のある外観を維持します。

### よくある質問

**1. Google マップ API は無料ですか？**

Google マップ API は、月額 200 ドル以下の使用量に対しては無料です。

**2. なぜ PageFly で Google マップ要素を使用すべきですか？**

Google Map PageFly を使用すると、マップをページに配置できるため、訪問者が場所を簡単に見つけられるようになり、売上とコンバージョン率の向上に役立ちます。また、ページの権威性と信頼性を示すこともできます。

**3. 基本マップと高度なマップの違いは何ですか？**

基本マップは、マップのズーム、コントロール、マップのドラッグ可能化など、限られた構成とインタラクティブオプションで場所を示す静的な画像です。一方、高度なマップは、訪問者がさまざまな方法でマップとインタラクトできるように、はるかに多くのパラメータを提供します。

### 追加リソース

* [PageFly でセレクター—ジオロケーションとマーケットを使用する方法](https://help.pagefly.io/manual/how-to-use-selector-geolocation-markets-with-pagefly/)
* [PageFly でお問い合わせページを作成する 6 つのステップ](https://help.pagefly.io/manual/how-to-create-a-contact-us-page-with-pagefly/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/advanced/google-map-element-2.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.