「ブログ記事の中にGoogleマップを埋め込みたいなぁ･･･。」
何かの建物の場所や住所などを示すのに、こう思うことってありますよね。
一件難しそうに思いますが、ブログ記事の中へのGoogleマップの埋め込みは、
- 埋め込みコードを取得すること
- コードを記事に貼り付けること
というたった2つだけで出来てしまうのです。
ぜひこの記事をご覧いただき、マップの埋め込みをマスターしてくださいね！
グーグルマップの埋め込みコードを取得する方法
まずは記事にGoogleマップを埋め込むためのコードを取得します。
まずは自分が記事の中で紹介したい建物の場所を地図内で指定します。
マップを開いたら、左上の検索窓に建造物名もしくは、住所を入力します。
次に「共有」をクリックします。
「地図を埋め込む」をクリックし、「中」と書いてあるタブをクリックします。
ここでは埋め込む地図のサイズを選ぶことができます。
- 小=400 x 300
- 中=600 x 450
- 大=800 x 600
になります。
また、「カスタムサイズ」では、任意の地図のサイズを選ぶことができます。
サイズが決定したら、埋め込みコードをコピーしておきましょう。
ここまでで、埋め込みコード取得は完了となります。
取得したコードをブログ記事に埋め込む方法
次に取得した埋め込みコードを記事に埋め込んでいきます。
ブログ記事のエディタを開いてください。
「テキスト」をクリックし、先ほどのコードを貼り付けます。
「ビジュアル」に戻って、正しく地図が表示されているか確認してください。
正しく表示されていればOKです。
ショートコードを使ってGoogleマップを埋め込む方法
実は埋め込みコードを使う以外にもGoogleマップを埋め込む方法があります。
ショートコードを使うやり方です。
ショートコードとは、WordPressプラグイン「Shortcodes Ultimate」のことです。
まずは記事エディタで、「ショートコード」をクリックします。
次に「Googleマップ」をクリックします。
次に記事に埋め込みたい地図のサイズを決めます。
スマホで見たときの見栄えがいいように、「レスポンシブ」は「はい」にしておきましょう。
次に「マーカー」の欄に、「博多駅」や「福岡市博多区◯◯-◯」などの住所を入力します。
そして、「ショートコードを挿入」をクリックします。
ビジュアルエディタを確認するとこんな感じです。
たったこれだけで完了となります。
プレビューを確認するときちんと表示されています。
かなり簡単にマップを表示することができました。
※ショートコードを使ってマップを埋め込む時には、Googleマップで検索した時に検索結果が表示される住所や建物でないと、正しく表示されないようです。
架空の建物や一般名称でない建物などは表示されないので気をつけてください。
まとめ
以上がGoogleマップの埋め込み方法となります。
埋め込みコードを取得するやり方をメインでお伝えしましたが、プラグインさえインストールしていれば、簡単にショートコードは使えるのでぜひそちらも活用してみてください。
以下の記事では地図の埋め込み以外にも、ブログ記事に装飾する方法をお伝えしています、ぜひご覧ください！
