旅行ブログや食べ歩きブログ、その他色々ブログを書いているときに、マップを埋め込みたいときがありますよね。
この記事では、誰でも簡単にブログにGoogleマップを作成・埋め込みができるように解説します。
Googleマップ:スタンダード
Googleマップ:Google マップ
STEP1:目的地検索
STEP2:HTMLの作成
STEP3:はてなブログに埋め込み
Googleマップのサイトに進みます。
STEP1:目的地検索
ブログで表示したい目的地を検索ます。
STEP2:HTMLの作成
目的地を表示したら「共有」をクリックして進みます。
共有のポップアップが出てくるので、「地図を埋め込む」をクリックして進みます。
ここで地図のサイズ「大・中・小」を選択して、「HTMLをコピー」をクリックすると、クリップボードにHTMLがコピーされますので、はてなブログに埋め込みに進みます。
STEP3:はてなブログに埋め込み
ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。
これで埋め込み完了です。
Googleマップ:ルートマップ
Googleマップ:Google マップ
STEP1:ルート検索
STEP2:HTMLの作成
STEP3:はてなブログに埋め込み
Googleマップのサイトに進みます。
STEP1:ルート検索
マップ上でルート検索をします。
STEP2:HTMLの作成
ルート検索ができたら左上の「メニュー(三本線)」をクリックしてメニューを表示させます。
メニューの中の「地図を共有または埋め込む」をクリックします。
共有のポップアップ画面で「地図を埋め込む」を選択します。
ここで地図のサイズ「大・中・小」を選択して、「HTMLをコピー」をクリックすると、クリップボードにHTMLがコピーされます。
STEP3:はてなブログに埋め込み
ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。
これで埋め込み完了です。
Googleマップ:マイマップ
マイマップは行きたい場所、気になった場所など、全て一度に表示できる自分オリジナルのマップになります。
観光地などのお店を紹介するときに、お店毎にマップを載せるのではなく一つのマップに全て表示したいときに使用します。
マイマップはGoogleアカウントにログインが必要です。
アカウントのない方はまずGoogleアカウントを作成してください。
Googleマップ:Google マップ
STEP1:マイマップの作成
STEP2:目的地検索
STEP3:マップのカスタマイズ
STEP4:ルート検索
STEP5:確認・HTML作成
STEP6:はてなブログに埋め込み
Googleマップのサイトに進みます。
STEP1:マイマップの作成
Googleマップのトップ画面で「メニュー」をクリックして表示します。
メニューの中の「マイプレイス」を選択します。
利用するのはマイプレイスの中の「マイマップ」になります。
STEP2:目的地検索
マイマップの作成画面に進んだら、通常のGoogleマップの使用方法通りマップ上に表示させたい場所の検索をします。
いつでも大丈夫なのですが、マップの名前も「無題の地図」から変更します。
マップに表示した居場所を検索したら「+地図に追加」をクリックしてマップ上に表示させます。
STEP3:マップのカスタマイズ
マップに追加されたら、アイコンや名前などのカスタマイズが右の赤枠部分からできます。
スタイルをクリックすると、アイコンとアイコンの色を変更できます。
目的にあったアイコンが見つからなければ「他のアイコン」をクリックします。
このように多数のアイコンがありますので、この中から選択して「OK」をクリックしたらアイコンが変更されます。
スタイル横の鉛筆?のマークをクリックすると、目的地の名前の変更ができます。
検索結果が英語表記だった場合など、日本語に変更したりご自身の分かりやすい名前などお好みで変更ができます。
変更後「保存」をクリックして変更完了です。
STEP4:ルート検索
ルートを表示させたいときに使用します。
右の「↗」をクリックすると左に出発地点を入力できるようになります。
ここに出発地点を入力したらルートが表示されます。
STEP5:確認・HTML作成
表示させたい目的地を全て表示させたら「プレビュー」で確認します。
確認して問題なければ「共有」をクリックしてHTMLの作成をします。
青枠部分の「無題のレイヤ」ですが、マップ作成画面で名前の変更をすることが可能です。
「<>自分のサイトに埋め込む」をクリックします。
恐らく初期設定だと下記のようなポップアップが出てくるかと思います。
「許可設定を変更」をクリックして一般公開できるように変更します。
「制限付き」になっている設定から「リンクを知っている全員」に変更します。
変更できたら「完了」をクリックしたらプレビュー画面に戻るので、「共有」をクリックしてHTMLを作成します。
表示されたHTMLをコピーしてブログ編集画面にいき、ブログに埋め込みます。
STEP6:はてなブログに埋め込み
ブログ編集画面に戻り、「🔗(リンク)」をクリックして先ほどGoogleマップ上でクリップボードにコピーしたHTMLを貼り付けます。
これで埋め込み完了です。
まとめ
旅行ブログや食べ歩きブログなどの場所の紹介をする内容だと、マップがあった方が親切ですよね。
そんな時にGoogleマップは無料でとても便利な機能になっています。
私もまだまだGoogleマップの全てが攻略できたわけではないので、また新しい発見があったら紹介します♡