wordpressでgoogleMapsの地図を埋め込む方法
WordPressでGoogle Mapsを埋め込む方法は比較的簡単です。
以下に手順を示します。
1. Google Mapsで地図を作成します。
- Google Mapsのウェブサイトにアクセスし、地図を作成または検索します。
- 作成したい場所を検索し、必要な場合にはマーカーやルートを追加します。
2. 地図を埋め込むためのHTMLコードを取得します。
- Google Mapsのウェブサイトで地図を表示しているときに、地図の下にある[共有]ボタンをクリックします。
- [地図を埋め込む]をクリックして、埋め込み用のHTMLコードを取得します。
3. WordPressの投稿やページに埋め込みます。
- WordPressの管理画面にログインし、地図を埋め込む投稿やページを選択します。
- テキストエディターで、埋め込みたい場所に移動し、ビジュアルエディターからテキストエディターに切り替えます。
- 取得した埋め込み用のHTMLコードを貼り付けます。
4. コードを更新します（オプション）。
- テキストエディターに貼り付けたコードを編集して、地図のサイズや表示オプションをカスタマイズすることができます。
たとえば、地図の幅や高さを調整したり、特定の場所にマーカーを追加したりすることができます。
5. 変更を保存し、投稿またはページを公開します。
これで、WordPressの投稿やページにGoogle Mapsが埋め込まれました。
ページを表示すると、Google Mapsが正しく表示されるはずです。
埋め込む地図のサイズを変更する場合
地図のサイズを変更するには、埋め込み用のHTMLコードを編集する必要があります。
以下に、地図のサイズを変更する手順を示します。
1. Google Mapsから埋め込み用のHTMLコードを取得します。
2. HTMLコードの中で、地図の幅と高さを変更します。
一般的に、幅と高さはピクセル単位で指定されます。
例えば、以下のようになります。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.0500518775!2dlongitude!3dlatitude!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zlongitude!3m2!1dlatitude!2dlongitude" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
このコードの中で、widthとheightの値を変更してください。
例えば、width="600"をwidth="800"、height="450"をheight="600"に変更すると、地図の幅が800ピクセル、高さが600ピクセルになります。
3. 変更を保存し、WordPressの投稿やページを公開します。
これで、地図のサイズが変更され、WordPressの投稿やページに反映されるはずです。
プラグインを使う方法
WordPressプラグインを使用すると、Google Mapsを簡単に埋め込むことができます。
一般的なプラグインの1つである「WP Google Maps」を使用する方法を以下に示します。
1. WordPressの管理画面にログインし、「プラグイン」メニューから「新規追加」を選択します。
2. 検索バーに「WP Google Maps」と入力し、プラグインを検索します。
3. 「WP Google Maps」を見つけたら、「今すぐインストール」をクリックしてプラグインをインストールします。
4. インストールが完了したら、「有効化」をクリックしてプラグインを有効にします。
5. 左側のメニューに「Maps」が表示され、そこから新しい地図を作成できます。
必要な情報を入力し、地図を作成します。
6. 地図が作成されたら、編集画面で地図の幅や高さなどの設定をカスタマイズすることができます。
7. 地図を投稿やページに埋め込む場合は、編集画面で「ショートコードをコピー」するか、「ブロックを追加」から「WP Google Maps」ブロックを選択します。
8. ショートコードをコピーしたり、ブロックを追加したりして、投稿やページに貼り付けます。
9. 変更を保存し、投稿やページを公開します。
これで、WordPressの投稿やページにGoogle Mapsが埋め込まれました。
WP Google Mapsプラグインを使用することで、より柔軟に地図をカスタマイズできます。
