PVアクセスランキング にほんブログ村

超初心者向け:ブログでのGoogleマップの活用法3選【はてなブログ】

旅行ブログや食べ歩きブログ、その他色々ブログを書いているときに、マップを埋め込みたいときがありますよね。

この記事では、誰でも簡単にブログにGoogleマップを作成・埋め込みができるように解説します。

 
超初心者向け:ブログでのGoogleマップの活用法3選【はてなブログ】
 
 

f:id:lifeishappy_right:20201126155300j:image
 

Googleマップ:スタンダード

Googleマップ:Google マップ

 

 STEP1:目的地検索

 STEP2:HTMLの作成

 STEP3:はてなブログに埋め込み

 

Googleマップのサイトに進みます。

 

STEP1:目的地検索

f:id:lifeishappy_right:20201126155305j:image

ブログで表示したい目的地を検索ます。

 

STEP2:HTMLの作成

f:id:lifeishappy_right:20201126155319j:image

目的地を表示したら「共有」をクリックして進みます。

 

f:id:lifeishappy_right:20201126112549p:plain

共有のポップアップが出てくるので、「地図を埋め込む」をクリックして進みます。

 

f:id:lifeishappy_right:20201126112919p:plain

ここで地図のサイズ「大・中・小」を選択して、「HTMLをコピー」をクリックすると、クリップボードにHTMLがコピーされますので、はてなブログに埋め込みに進みます。

 

STEP3:はてなブログに埋め込み

f:id:lifeishappy_right:20201126155335j:image

ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。

 

f:id:lifeishappy_right:20201126113828p:plain

これで埋め込み完了です。

 

 

Googleマップ:ルートマップ

Googleマップ:Google マップ

 

 STEP1:ルート検索

 STEP2:HTMLの作成

 STEP3:はてなブログに埋め込み

 

Googleマップのサイトに進みます。

 

STEP1:ルート検索

f:id:lifeishappy_right:20201126155355j:image

マップ上でルート検索をします。

 

STEP2:HTMLの作成

f:id:lifeishappy_right:20201126155412j:image

ルート検索ができたら左上の「メニュー(三本線)」をクリックしてメニューを表示させます。

 

f:id:lifeishappy_right:20201126155428j:image

メニューの中の「地図を共有または埋め込む」をクリックします。

 

f:id:lifeishappy_right:20201126115540p:plain

共有のポップアップ画面で「地図を埋め込む」を選択します。

 

f:id:lifeishappy_right:20201126115619p:plain

ここで地図のサイズ「大・中・小」を選択して、「HTMLをコピー」をクリックすると、クリップボードにHTMLがコピーされます。

 

STEP3:はてなブログに埋め込み

f:id:lifeishappy_right:20201126155335j:image

ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。

 

f:id:lifeishappy_right:20201126113828p:plain

これで埋め込み完了です。

  

 

Googleマップ:マイマップ

マイマップは行きたい場所、気になった場所など、全て一度に表示できる自分オリジナルのマップになります。

観光地などのお店を紹介するときに、お店毎にマップを載せるのではなく一つのマップに全て表示したいときに使用します。 

注意

マイマップはGoogleアカウントにログインが必要です。

アカウントのない方はまずGoogleアカウントを作成してください。

Googleマップ:Google マップ

 

 STEP1:マイマップの作成

 STEP2:目的地検索

 STEP3:マップのカスタマイズ

 STEP4:ルート検索

 STEP5:確認・HTML作成

 STEP6:はてなブログに埋め込み

 

Googleマップのサイトに進みます。

 

STEP1:マイマップの作成

f:id:lifeishappy_right:20201126155501j:image

Googleマップのトップ画面で「メニュー」をクリックして表示します。

 

f:id:lifeishappy_right:20201126155527j:image
メニューの中の「マイプレイス」を選択します。

 

f:id:lifeishappy_right:20201126155544j:image

利用するのはマイプレイスの中の「マイマップ」になります。

 

STEP2:目的地検索

f:id:lifeishappy_right:20201126155600j:image

マイマップの作成画面に進んだら、通常のGoogleマップの使用方法通りマップ上に表示させたい場所の検索をします。

いつでも大丈夫なのですが、マップの名前も「無題の地図」から変更します。

 

f:id:lifeishappy_right:20201126155620j:image
マップに表示した居場所を検索したら「+地図に追加」をクリックしてマップ上に表示させます。

 

STEP3:マップのカスタマイズ

f:id:lifeishappy_right:20201126155640j:image

マップに追加されたら、アイコンや名前などのカスタマイズが右の赤枠部分からできます。

 

f:id:lifeishappy_right:20201126155654j:image
スタイルをクリックすると、アイコンとアイコンの色を変更できます。

目的にあったアイコンが見つからなければ「他のアイコン」をクリックします。

 

f:id:lifeishappy_right:20201126155708j:image
このように多数のアイコンがありますので、この中から選択して「OK」をクリックしたらアイコンが変更されます。

スタイル横の鉛筆?のマークをクリックすると、目的地の名前の変更ができます。

 

f:id:lifeishappy_right:20201126140157p:plain

検索結果が英語表記だった場合など、日本語に変更したりご自身の分かりやすい名前などお好みで変更ができます。

変更後「保存」をクリックして変更完了です。

 

STEP4:ルート検索

ルートを表示させたいときに使用します。

f:id:lifeishappy_right:20201126155743j:image

右の「↗」をクリックすると左に出発地点を入力できるようになります。

ここに出発地点を入力したらルートが表示されます。

 

f:id:lifeishappy_right:20201126155810j:image

 

STEP5:確認・HTML作成

f:id:lifeishappy_right:20201126155832j:image

表示させたい目的地を全て表示させたら「プレビュー」で確認します。

 

f:id:lifeishappy_right:20201126155853j:image

確認して問題なければ「共有」をクリックしてHTMLの作成をします。 

MEMO

青枠部分の「無題のレイヤ」ですが、マップ作成画面で名前の変更をすることが可能です。

f:id:lifeishappy_right:20201126155912j:image

「<>自分のサイトに埋め込む」をクリックします。

恐らく初期設定だと下記のようなポップアップが出てくるかと思います。

 

f:id:lifeishappy_right:20201126155934j:image

「許可設定を変更」をクリックして一般公開できるように変更します。

 

f:id:lifeishappy_right:20201126155950j:image

「制限付き」になっている設定から「リンクを知っている全員」に変更します。

 

f:id:lifeishappy_right:20201126160006j:image

変更できたら「完了」をクリックしたらプレビュー画面に戻るので、「共有」をクリックしてHTMLを作成します。

 

f:id:lifeishappy_right:20201126160022j:image

表示されたHTMLをコピーしてブログ編集画面にいき、ブログに埋め込みます。

 

STEP6:はてなブログに埋め込み

f:id:lifeishappy_right:20201126155335j:image

ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。

 

f:id:lifeishappy_right:20201126113828p:plain

これで埋め込み完了です。

 

 

まとめ

旅行ブログや食べ歩きブログなどの場所の紹介をする内容だと、マップがあった方が親切ですよね。

そんな時にGoogleマップは無料でとても便利な機能になっています。

私もまだまだGoogleマップの全てが攻略できたわけではないので、また新しい発見があったら紹介します♡