旅ブログにGoogleMapの地図を埋め込み表示する方法

旅ブログの記事（特に情報記事）を書いているときに、GoogleMap（グーグルマップ）でピン（印）を立てた地図を表示したい、と思うことがあります。

旅人御用達のオフライン地図アプリ「MAPS.ME」のスクリーンショット（キャプチャ）にお絵かきアプリで印をつけている人もよく見ます。

僕は、「GoogleMapの埋め込み」が一番便利だと思っているので、今回はその方法をシェアします。

GoogleMapのブログでの利用は、「埋め込み」が推奨されている

GoogleMapの公式からは、「地図を埋め込む、場所を共有する」というヘルプが提供されています。

このヘルプの最後の方に、

共有できるものとできないもの
共有できるもの:

場所、ビジネス情報、住所
ルートの検索結果
ストリートビューの画像
共有できないもの:

保存した場所を含む地図（自分専用のため）
距離測定の結果を含む地図
地図そのもののスクリーンショットや画像

地図を埋め込む、場所を共有する – パソコン – マップ ヘルプより

と書いてあります。
地図はスクリーンショットではなく、「埋め込み」で掲載することが推奨されているのだと思います。

GoogleMapの地図をブログに埋め込む方法

１．特定の場所にピンを刺して、地図を共有する

例として、タイの首都バンコクの場所にピンを刺して、地図を共有します。
Google マップで、「バンコク」を検索します。

地図上でバンコクの位置が表示されます。

画面左側に表示されているメニューの中から、「 共有」をクリックします。

画面中央に、「リンクを共有/地図を埋め込む」というポップアップが出るので、「地図を埋め込む」をクリックします。

画面に埋め込みコードと、地図のプレビューが表示されます。

この地図を埋め込む場合は、表示されている埋め込みコードをコピーし、ブログの編集画面に貼り付ければOKです。

WordPressブログへの貼り付け方は、後半（旅ブログにGoogleMapの地図を埋め込み表示する方法）で説明しています。

また、コードの左側にあるボタンで、埋め込む地図のサイズを変更することができます。

サイズには、「小」、「中」、「大」、「カスタムサイズ」があります。
「カスタムサイズ」を選択すると、好きなサイズにすることができます。

「カスタムサイズ」の画面では、数字を入力して「実サイズでプレビュー」をクリックすると、別のウィンドウでプレビューが表示されます。

このサイズの地図を埋め込む場合は、表示されているコードをコピーします。

▼実サイズでプレビュー

▼実際に埋め込んだ地図

２．ピンを刺さずに地図を共有する

地図にピンを刺さずに共有することもできます。
僕は、複数の国や都市の位置関係を示したいときなどに使っています。

画面左上の「」を押して、メニューを開きます。

表示されたメニュー内の、「地図を共有または埋め込む」をクリックします。

「リンクを共有/地図を埋め込む」が出るので、あとは先程と同じ手順でブログの編集画面に貼り付けます。

３．経路検索画面を共有する

GoogleMapでは、経路検索の結果が表示されている画面も、共有することができます。

経路検索画面左上の「」を押して、メニューを開きます。

「地図を共有または埋め込む」をクリックして、その先は先程と同じです。

４．マイマップを利用する

GoogleMapには「マイマップ」という機能があります。

マイマップを使うと、複数のピンを立てたり、メモを付けたり、線で結んだり、色々なことができるようになります。

マイマップはGoogleDrive（グーグルドライブ）に保存され、自由に公開することができます。

旅のルートや「バンコクでおすすめの店マップ」などをブログに載せたいときに便利です。
ここでは、マイマップの使い方は長くなるので省略し、作り方のみ紹介します。

画面左上の「」を押して、メニューを開きます。

表示されたメニュー内の、「マイプレイス」をクリックします。

「マイプレイス」が表示されるので、この中で「マイマップ」を選びます。

既にいくつかのマイマップを作っている場合は、ここに表示されます。

新しいマイマップを作る場合は、画面の下の方に表示されている「地図の作成」をクリックします。

マイマップの作成画面が表示されます。

作成したマイマップは、通常のGoogleMapと同じように、ブログに埋め込むことができます。

▼僕たちの旅のルートです。

WordPressの投稿画面でGoogleMapを埋め込む方法

Wordpressの投稿画面には「ビジュアルエディタ」と「テキストエディタ」があります。

普段は「ビジュアルエディタ」を使っている人が多いと思いますが、GoogleMapの埋め込みコードは「テキストエディタ」に貼り付けないと、正しく表示することができません。

僕はエディタを切り替えるのが面倒なので、「ビジュアルエディタ」の「Insert HTMLボタン」を利用しています（Wordpressテーマ「Simplicity」の機能です）。

「」を押すと、HTMLコードなどを入力することができます（テキストエディタに入力するのと同じ）。

ここにGoogleMapの埋め込みコードを貼り付けて、「OK」を押すだけなので簡単です。

地図が挿入されていれば、埋め込み完了です。

さいごに

GoogleMapのブログへの埋め込み方法を、4種類紹介しました。
以下のように、目的別で使い分けると良いのではないでしょうか。

埋め込みのやり方自体は簡単だし、記事を見ている人が自分で地図を動かすことができるので、スクリーンショットよりも便利だと思います。