ブログ運営

Googleマップをブログ記事に埋め込む方法【初心者向け】

こんにちは!とも@tomounsoです。

ブログを書いていてGoogleマップを埋め込みたくなることありませんか?

アイコン名を入力

おいしいラーメンのお店を紹介したいときなど、Googleマップで場所やルートを紹介できたら便利ですよね。

今回はGoogleマップをブログ記事に埋め込む方法を解説します。

とても簡単ですのでぜひ最後までご覧ください!

この記事はこんな方におすすめです

Googleマップをブログ記事に埋め込む方法を知りたい方

Googleマップをブログ記事に埋め込む方法

Googleマップで紹介したい場所を表示させる

Googleマップで紹介したい場所を画面左上の検索窓に入力するか、画面上で直接クリックします。

赤いピンが地図上に表示されたことを確認してください。

ここでは例として秋葉原駅を表示させます。

Googleマップで秋葉原駅を検索している。

検索には「施設名」や「店名」だけでなく「住所」や「電話番号」も使えます。

地図のHTMLコードを表示させコピーする

Googleマップをブログ記事に埋め込むためには、HTMLコードを取得する必要があります。

方法はとても簡単ですので安心してください。

まずGoogleマップの「共有」ボタンをクリックします。

Googleマップの共有ボタンをクリック。

「地図を埋め込む」をクリックします。

Googleマップの「地図を埋め込む」をクリック。

左端の「」の部分をクリックするとサイズを選ぶことが出来ます。ここではそのまま「」サイズを選択します。サイズを選んだら右上の「HTMLをコピー」ボタンをクリックします。

Googleマップの「共有」画面で、HTMLコードをコピーする。

これでHTMLコードの取得とコピーはできました。あとはブログの記事に貼り付けるだけです。

コピーした地図のコードをブログ記事に貼り付ける

コピーした地図のコードをブログ記事に貼り付けます。WordPressの場合にはビジュアルエディターからコード(テキスト)エディターに切り替えます。

ビジュアルエディターのメニューをクリック。
ビジュアルエディターからコード(テキスト)エディターに切り替える。

希望の場所に先ほどコピーした地図のコードを貼り付け、 「コードエディターを終了」ボタンをクリックします。

先ほどコピーした地図のコードを貼り付け、 「コードエディターを終了」ボタンをクリックする。

ビジュアルエディターに戻り、先ほどのGoogleマップが表示されます。

先ほどのGoogleマップが表示される。

地図のサイズ

選べる地図のサイズです。参考にしてください。

「小」横400px 縦300px

「中」横600px 縦450px

「大」横800px 縦600px

「カスタムサイズ」は自由に設定できます。

複数の目的地を経由するルートマップを作る

おすすめのドライブコースやお散歩コースなど、複数の目的地を経由するルートマップも簡単に作成できます。

例として「秋葉原駅から御茶ノ水駅の散歩コース」を作ってみます。

「秋葉原駅」を表示し、                 「ルート・乗り換え」をクリックします。

「秋葉原駅」を表示し、「ルート・乗り換え」をクリックします。

交通手段を選択し、                   矢印「↑↓」をクリックして出発地を秋葉原駅に設定します。

交通手段を選択し、矢印「↑↓」をクリックして出発地を秋葉原駅に設定します。

目的地を入力します。ここではマップ上をクリックして三省堂書店神保町本店を最初の目的地にしました。

マップ上をクリックして三省堂書店神保町本店を最初の目的地にする。

さらに「目的地を追加」の「+」をクリックして、     地図上の御茶ノ水駅をクリックすればルートマップ完成です。続いてHTMLコードを取得します。

※出発地や目的地は文字入力してもだいじょうぶです。

画面左上の三本線をクリックする。

画面左上の三本線をクリックすると「メニュー」が表示されます。「地図を共有または埋め込む」をクリックするとHTMLコードを取得する画面になります。先ほどと同じ手順でブログ記事に貼り付けてください。

「地図を共有または埋め込む」をクリックする。

Googleマップのリンクを貼る方法

先ほどの「地図を共有または埋め込む」の画面で「リンクを送信する」→「リンクをコピー」をクリックします。

先ほどの「地図を共有または埋め込む」の画面で「リンクを送信する」→「リンクをコピー」をクリックする。

そのままWordPressのブログ記事に貼り付けると次の表示になりますので、「リンクへ変換」をクリックしてください。

「リンクへ変換」をクリック。

リンクをはることができました。

リンクをはることができました。

または「秋葉原駅 から 御茶ノ水駅」などのテキストに、リンクボタンからリンクを貼ることも出来ます。

「秋葉原駅 から 御茶ノ水駅」などのテキストに、リンクボタンからリンクを貼る。

完成した地図とリンクはつぎのようになります。

https://goo.gl/maps/iDtAkCZWdwQyEkCaA

秋葉原駅 から 御茶ノ水駅

アメーバブログの場合

アメーバブログの場合もほぼ同様の手順です。

画面下から「HTML表示」を選択し、埋め込みたい地図のHTMLコードを貼り付けます。

画面下から「HTML表示」を選択し、埋め込みたい地図のHTMLコードを貼り付ける。

リンクの貼り方もボタンの位置が違うだけで、     WordPressとほぼ同じです。

アメブロのリンクボタン。

アメブロにGoogleマップとリンクを埋め込んだ例がこちら。

リンクもいっしょに埋め込んでおいたほうがスマホユーザーにとっては使いやすくて親切です。

まとめ

Googleマップやリンクをうまくブログに使えれば、読者にとってとても便利です。

これからブログを始める方はぜひ参考にしてください。

最後までご覧いただきありがとうございました。

Googleアドセンスの審査に合格する方法【9つのチェックポイント】この記事では、Googleアドセンスの審査に合格する方法【9つのチェックポイント】について解説します。 ...
https://tomounso.com/about-google-photo/
WordPressのブログをGoogleドライブに無料でバックアップする方法【初心者向け】WordPressでブログを始めたばかりの方、バックアップの方法がわかりづらくて困っていませんか?プラグインの『UpdraftPlus』を使ってGoogleドライブを保存先にすれば、簡単に無料でバックアップできます。初心者の方には一番簡単な方法だと思いますのでぜひ参考にしてください。 ...
Googleアナリティクスの使い方【自分のアクセスをカウントしないように設定する方法】この記事では、Googleアナリティクスの使い方【自分のアクセスをカウントしないように設定する方法】を解説します。...
ワードプレスでブログを始める方法【初心者向け】この初心者によるブログ運営日記では、私が知識ゼロの状態からブログを運営する様子を初心者の立場で解説します。ブログをこれから始める方にとって少しでもお役に立てば幸いです。...