こんにちは!とも@tomounsoです。
ブログを書いていてGoogleマップを埋め込みたくなることありませんか?
おいしいラーメンのお店を紹介したいときなど、Googleマップで場所やルートを紹介できたら便利ですよね。
今回はGoogleマップをブログ記事に埋め込む方法を解説します。
とても簡単ですのでぜひ最後までご覧ください!
Googleマップをブログ記事に埋め込む方法を知りたい方
Googleマップをブログ記事に埋め込む方法
Googleマップで紹介したい場所を表示させる
Googleマップで紹介したい場所を画面左上の検索窓に入力するか、画面上で直接クリックします。
赤いピンが地図上に表示されたことを確認してください。
ここでは例として秋葉原駅を表示させます。

地図のHTMLコードを表示させコピーする
Googleマップをブログ記事に埋め込むためには、HTMLコードを取得する必要があります。
方法はとても簡単ですので安心してください。
まずGoogleマップの「共有」ボタンをクリックします。

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

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

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


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

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

地図のサイズ
選べる地図のサイズです。参考にしてください。
「小」横400px 縦300px
「中」横600px 縦450px
「大」横800px 縦600px
「カスタムサイズ」は自由に設定できます。
複数の目的地を経由するルートマップを作る
おすすめのドライブコースやお散歩コースなど、複数の目的地を経由するルートマップも簡単に作成できます。
例として「秋葉原駅から御茶ノ水駅の散歩コース」を作ってみます。
「秋葉原駅」を表示し、 「ルート・乗り換え」をクリックします。

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

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

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

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

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

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

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

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

完成した地図とリンクはつぎのようになります。
https://goo.gl/maps/iDtAkCZWdwQyEkCaA
アメーバブログの場合
アメーバブログの場合もほぼ同様の手順です。
画面下から「HTML表示」を選択し、埋め込みたい地図のHTMLコードを貼り付けます。

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

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

まとめ
Googleマップやリンクをうまくブログに使えれば、読者にとってとても便利です。
これからブログを始める方はぜひ参考にしてください。
最後までご覧いただきありがとうございました。








