Google マップのルート検索結果をブログに載せる方法の詳細手順

Google マップの地図をブログに埋め込む方法をご紹介します。

手順内にHTMLコードの取得など出てきますが、コピペするだけなのでHTMLの知識がなくても大丈夫です。

 

結果

こんな感じでブログの中にGoogle マップのルート検索結果を表示させることができます。

手順

STEP1. Google マップでルートを検索

例では東京駅から皇居の行き方を検索します。

Google マップを開く

Google マップを開きます。

検索窓に目的地を入力して虫眼鏡マークをクリック

Google マップで目的地を入力しているところ

検索窓に目的地を入力して虫眼鏡マークをクリックして検索します。

ちなみに虫眼鏡マークの横の右に折れ曲がった矢印マークをクリックして、すぐに出発地入力を行っても良いです。

ルート・乗換アイコンをクリック

Google マップで目的地が表示されたところ

希望の目的地が正しく表示されたら、「ルート・乗り換え」アイコンをクリックします。

 

検索窓に出発地を入力して虫眼鏡マークをクリック

Google マップで出発地を入力したところ

検索窓の上が出発地、下が目的地です。

出発地の欄に出発地を入力して虫眼鏡マークをクリックします。

 

ちなみに、出発地と目的地を逆にしたい場合は、横にある矢印マークをクリックします。

上部のアイコン群から車、電車、徒歩などをクリックして希望の移動手段を選択できます。

 

ルートが表示されるのでいずれかをクリック

Google マップで検索結果が表示されたところ

ルートがひとつしかない場合はひとつしかでません。

これだというものを選んでクリックしましょう。

STEP2. 検索結果のHTMLコードを取得

表示される共有アイコンをクリック

Google マップでルート検索結果のひとつを選び共有ボタンを押すところ

検索結果に出てきたルートをクリックすると、ルートの詳細画面が表示されます。

その画面内に、共有アイコンが表示されるのでそれをクリックします。

<地図を埋め込む>欄のHTMLをコピーしてブログに貼り付け

Google マップで地図の共有画面を表示させたところ

共有画面が開きます。

上の方に「地図を埋め込む」というタブがあるのでそれをクリックします。

 

Google マップで地図の埋め込みを行うところの拡大図

 

何やらURLっぽいものが書いてあるものの横に「HTMLをコピー」という文言があります。

そちらをクリックします。

クリックすることにより、URLっぽいものがコピーされます。

このHTMLを使ってブログに地図を表示させた場合、Google マップの利用規約に同意したことになります。

STEP3. ブログに貼り付け

ここではWordPress(ブログサービスの一種)の画面を例に説明します。

どのブログサービスを使っていても、「HTMLコード入力モード」みたいなものがあると思うので、そちらで行うようにしてみてください。

ブログ記事の作成画面を開く

WordPressの記事投稿の入力画面の様子

ブログ記事の作成画面を開きます。

「ここに地図を表示させたい」というところにカーソルを合わせ、クリックしておきましょう。

HTML記述モードにしてHTMLコードを貼り付け

HTML記述モードにします。

前手順でカーソルを合わせてクリックしておいた入力位置をズラさないように気を付けながら、先ほどコピーしたHTMLを貼り付けます。

もちろんHTMLコードが読める人は、そのまま直接入れたいところを探して貼り付けで大丈夫です。

WordPressの記事投稿のHTML入力画面の様子

 

ブログを投稿

WordPressの場合は、通常の入力画面に戻ると既に地図が表示されていますね。

WordPressの記事投稿の入力画面にGoogle マップの地図が表示されている様子

これで地図の埋め込み作業は完了ですので、必要な文章を書いてブログを投稿しましょう。

本記事の結果にあるように地図が表示されるはずです。

余談

ルートの共有のところで<リンクを送信する>の方法を選ぶと、以下の様にルート検索結果を表示したGoogle マップへのリンクを貼ることができます。

Google マップ
Google マップで地図を検索。乗換案内、路線図、ドライブルート、ストリートビューも。見やすい地図でお店やサービス、地域の情報を検索できます。世界地図も日本語で、旅のプランにも便利。

こちらの方法は、「リンクをコピー」で共有リンクをコピーし、ブログのリンク挿入機能などを使ってコピーしたリンクを挿入すれば良いです。※HTMLモードでやる必要なし

コメント

タイトルとURLをコピーしました