意外と使える【Googleマップをブログに載せる方法-応用編】

 

前回に引き続き、今回はGoogleマップをブログに載せる方法の応用編として

①ルート経路を表示させる

②複数の場所を同時に表示させる

この2つの方法を紹介します。

 

※こちらの方法はGoogleアカウントにログインしてGoogleマップを開く必要があります。

 

Googleマップをブログに載せる基本的な方法はこちらを参照してください。

https://gongteng-blog.com/google-map-blog/

 

① ルート経路を表示させてブログに埋め込む方法

 

まずはGoogleマップを開き、「ルート」の部分をクリックしましょう。

 

 

 

 

 

 

今回は私の地元である「札幌駅北口」から「大通公園」で説明していきたいと思います。

 

出発地と目的地を入力する画面が開きますので、ここにそれぞれ入力していきます。

出発地から目的地に到着するまでにどこかを経由する場合は、「目的地を追加」を選択します。

このままでは目的地に設定した「大通公園」が経由場所となってしまうので、もともと「大通公園」が入力されているところに経由場所を入力し直します。

 

 

 

 

 

 

 

移動手段も選択しておきましょう。

「公共交通機関」を選択すると、公共交通機関に乗っている間の経路はルート表示されず、乗り場までと降りてからの徒歩経路のみルート表示されるので注意しましょう。

 

 

 

 

 

 

 

移動手段を選択すると実際にマップ上にルートが表示されます。

出発地から目的地までは複数の行き方があると思いますので、変更したい場合はルートの青丸をドラッグして変更しましょう。

 

 

 

 

 

 

 

 

 

↓変更後

 

 

 

 

 

 

 

 


ルートが決まったら出発地と目的地を入力した画面の左上にある「メニュー」を開き、「地図を共有または埋め込む」をクリックしましょう。

 

 

 

 

 

 

 

 

 

 

あとは「地図を埋め込む」を選択し、HTMLをコピーするだけです。

コピーしたらブログ投稿記事のテキスト画面に貼り付けましょう。

 

 

 

 

 

 

 

 

② 複数の場所を同時に表示させてブログに埋め込む方法

まずはGoogleマップからメニューを開きましょう。

 

 

 

 

 

 

 

「マイプレイス」をクリックし、「マイマップ」を選択します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

マイマップを選択したら下方に「地図を作成」というところがあるのでクリックします。

 

 

 

 

すると検索窓が表示されるので、そこにピンを立てたい1つ目の場所の名称を入力しましょう。

入力が終わったら、黄色枠で囲っているところの「+」をクリックし、2つ目の場所を再び検索窓に入力します。

3つ、4つと複数表示させたい場合はこれを繰り返します。

 

 

 

 

 

 


ピンを立てたいところが検索では表示されない場合は「マーカーを追加」を選択し、任意の場所をクリックしてピンを立たせましょう。

 

ピンの名称は自分で決められます。

今回は私の愛称「ごんてん」にしておきます。

 

 

 

 

 

 

 

ピンの色やアイコンも自由に変えられます。

 

 

 

 

 

 

 

表示させたい複数の場所の入力が終わったら、「共有」をクリックします。

 

 

 

 

 

 

 

 

 

 

ブログに埋め込んだ際にGoogleマップのタイトルが表示されるので、ブログ記事に合わせたタイトルなどを入力しておきましょう。

 

 

 

 

 

 

 

地図タイトルを決めたら、アクセスできるユーザーを変更する必要があります。

「ウェブ上で一般公開」にチェックをしなければ、ブログへの埋め込みHTMLが作成できないので必ずチェックしましょう。

 

 

 

 

 

 

 

ここまで終了すればあとはメニューから「自分のサイトに埋め込む」を選択し、表示されるHTMLをコピーしてブログに貼り付けるだけです。

 

 

 

 

 

 

下線部の数値を変更することで表示されるGoogleマップのサイズを変更することができます。

 

 

 

 

 

 

 

こんな感じでブログに載せることができます!

 

最新情報をチェックしよう!
>Muscle Gong Teng

Muscle Gong Teng

ごんてんのトレーニングに関する情報発信ブログはこちら↓ 初心者トレーニーに向けた基本的な知識が満載!

CTR IMG