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

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

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

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

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

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

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

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

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

「小」横400px　縦300px

「中」横600px　縦450px

「大」横800px　縦600px

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

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

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

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

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

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

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

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

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

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

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

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

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