Googleマップをブログに埋め込む方法!マイマップで複数のピン(住所)を一括表示させるには?

ブログ作り

紙の地図は回して読むタイプの元栄養士のおもちです。

さて今回は、ブログにGoogleマップを埋め込む方法複数のピン(住所)を一括表示させるマイマップの作り方などを紹介したいと思います。

おもち
おもち

こんな方におすすめの記事です!
・おすすめの場所やお店のマップをブログで紹介したい方
・自分の行った複数の場所をマップに一括表示させて紹介したい方

など。Googleマップを活用してより分かりやすいブログを目指して行きましょう♪

Googleマップをそのままブログに埋め込む方法は?

まずは基本操作として表示させたいマップをそのままブログに埋め込む手順や方法を紹介します。

1つの場所やお店に絞り、その周辺マップをブログ表示させたい場合などにおすすめです。

【マップをブログに埋め込む大まかな手順】
Googleマップを開く

メニューを開く

地図を共有又は埋め込むを選択

地図を埋め込むのタブを開き、HTMLをコピーする

ブログのカスタムHTML内に貼る

以下、画像を使って解説します。

①Googleマップに地図を表示させたら、検索バーにあるメニューをクリック
②メニュー内の地図を共有又は埋め込むをクリック


地図を埋め込むをクリック

HTMLをコピーをクリック

④ブログ内のカスタムHTMLに貼り付けて完了
※プレビュー画面で確認しましょう。

複数のピン(住所)をブログで一括表示させるには?

表示させたいピン(住所)が複数ある場合、1つのマップに一括にまとめることが可能です。

例)戸越銀座商店街にあるおすすめのお店をブログで紹介したい場合↓↓↓

マイマップでピン(赤矢印部分)を一括表示させる

上の地図は、過去に当ブログで使用したマイマップの画像例です。

マイマップとは自分用にカスタマイズ出来る地図のことで、オンラインで共有することが可能です。

おもち
おもち

下記のリンク先の記事の最後にマップを一括表示させています♪
>>実際にマップを表示させている記事をチェック
※現在はナンバリングで表示しています。

【一括表示させる大まかな手順】
メニューを開く

マイプレイスからマイマップを選択

表示させたい住所を検索して地図に追加

ピンのスタイルを決める(デザイン選択)

共有設定(公開条件を決める)

HTMLコピー&貼り付け

以下、画像を使って解説します。

【表示させたい住所を複数選択する】
①検索バーにあるメニューをクリック
②マイプレイスをクリック

Googleマップのマイマップの作成方法


マイマップ

地図を作成をクリック

④下の画像が表示されます。
・無題の地図
・無題のレイヤ

それぞれの名前は後から編集出来ます。
ここでは
無題の地図→戸越銀座商店街
無題のレイヤ→呑み歩き
としています。

⑤表示させたい地名や店名等を検索

Googleマップで戸越銀座商店街を検索

⑥下にある「+」マークをクリックして地図に追加する

⑦複数の場所を表示させるために、⑤と⑥を繰り返す。

おもち
おもち

ブログでマップを一括表示させるまであと少しです!

【ピンのデザイン選択や共有設定を行う】

①全て地図に追加したら、一番左のアイコンの「スタイル」をクリック

②ピンのデザインを決める
・色
・アイコンの種類

③表示させたい住所やデザインが決まったら、共有設定(公開範囲の選択)をします。

※共有設定をしないと埋め込むことが出来ません。


下の画像にある共有をクリック

④このリンクを知っている人なら誰でも表示できるをクリック

マイマップの共有設定

⑤共有設定後、下の画像のタブを開く

自分のサイトに埋め込むをクリック

⑥表示されたHTMLをコピーする

ブログ内のカスタムHTMLに貼り付け

これで完了です。

おもち
おもち

記事を公開する前に、プレビュー画面でちゃんと表示されるか確認しましょう♪

ピン(住所)をナンバリングして一括表示させる方法

ピンの表示スタイルは様々な種類があります。
・均一スタイル
・続き番号
・個別スタイル

など。
ナンバリングさせるには、続き番号を選択します。

続き番号でナンバリング

ピンの名称も表示させる
マイマップのナンバリングのイメージ

Googleマップでは様々な機能が沢山あります。
より快適に使う為に、一緒に少しずつ勉強していきましょう♪

あわせて読みたい>>呑み歩き!都内で一番長い戸越銀座商店街のお店をご紹介

最後までご覧いただき、ありがとうございました。

コメント

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