ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleマイマップを埋め込たい」というもの。
Googleマイマップは、GoogleMap上に作れるオリジナルマップ。
Cocoonで記事を書いていて
いくつかのスポットを1つの地図にまとめて表示させたいなぁ
と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。
※Cocoonは、バージョン：1.1.2で手順実施しています。
やりたいこと
今回やりたいことは
複数の場所にピン押ししたGoogleマイマップを作り、記事に埋め込む
地図を載せるなら、GoogleMapのスクリーンショット画像を掲載するのもありですが、
- 気になるスポットをまとめたオリジナルの地図を記事に載せたい
- 記事から直接GoogleMapを開けるようにしたい
ときには、Googleマイマップを使うのが便利かなと思います。
わざわざGoogleMap開いて、個別に検索するのもめんどくさいですしね。
今回は、GoogleMapでも、マイマップの機能を使います。
・ブラウザ版Googleマイマップ
それでは、実施方法です。
複数の場所にピン押ししたGoogleMapを記事に埋め込む
オリジナルマップ（Googleマイマップ）を記事に埋め込む方法です。
イメージはこんな感じ。
今回のデモ例では、上の画像のように、名古屋城周辺のスポットにいくつかピン押ししたGoogleMap（自分で作ったマイマップ）を埋め込みます。
手順
手順は、
GoogleMapでマイマップを作る
→ マイマップの共有・公開設定をする
→ 地図のHTMLを発行・コピー
→ WordPressの記事に埋め込む
という流れです。
GoogleMapでマイマップを作る
まずGoogleマイマップ開いて、[ + ]ボタンを押してマイマップを作成します。
GoogleMapから開く場合は、GoogleMapのメニューから、[マイプレイス]＞「マイマップ」の順に開いて、「地図を作成」をクリックします。
地図のタイトルと説明、レイヤ名を編集します。
「無題の地図」と表示されている部分をクリックして、タイトルと説明を好きな内容に編集し[保存]ボタンを押します。
今回は、タイトルは「sample map1」、説明は「サンプルです」にしました
続いて、「無題のレイヤ名」をクリックして、レイヤ名を編集します。
今回は、タイトルは「サンプルレイヤ」にしました
タイトルや説明、レイヤ名は変えなくてもサイトに埋め込みできますが、埋め込んだときにデフォルトのタイトルが出てしまいます。
変えておく方が見た目がきれいです。
次に、マップ上にピン押ししていきます。
GoogleMap上でピン押ししたい場所をクリックして「地図に追加」をクリックします。
[地図に追加]を繰り返して、サイトに表示したい地図を作っていきます。
マイマップの共有・公開設定をする
表示させたい地図ができたら、共有・公開設定を変更します。
[共有]をクリックします。
「リンクを取得」の欄の[リンクを行っている全員に変更]をクリックします。
設定が「リンクを知っている全員」に変わったら、[完了]ボタンを押します。
地図のHTMLを発行・コピー
地図のHTMLを発行します。
マップのタイトル横の「縦3点」をクリックし、「自分のサイトに埋め込む」を押します。
発行されたHTMLをコピーします。
WordPressの記事にマップを埋め込む
WordPressの記事の編集画面を開きます。
マイマップを埋め込みたい記事の場所に移動して、ブロックメニューで「カスタムHTML」を選びます。
カスタムHTMLの編集画面が開いたら、マイマップでコピーしたHTMLを貼り付けます。
HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。
地図表示のサイズ感に問題なければ、これで
「複数の場所にピン押ししたGoogleMapを記事に埋め込む」
の手順は終わりです。
埋め込んだマイマップを編集する方法
デフォルトの青いピンだと、GoogleMapの名所マークに混ざってしまうし、地図の表示サイズも変えたいなぁ。
ということで、マイマップのカスタマイズや編集方法についてです。
今回はデモで作ったsample map1をコピーしてsample map2を作り、サイトに埋め込んでから、sample map2を編集しました。
ピンのアイコンや色を変える場合
編集したいマイマップを開き、ピンのアイコンや色を変更したいスポットを、レイヤの中からクリックします。
スポットの詳細画面が表示されたら、[ビーカーを傾けたようなマーク]をクリックします。
色とアイコンの編集画面が開いたら、お好みのものに変更します。
変更したいスポット分この編集作業を繰り返します。
すべて変更が終わったら、スポットのアイコンと色の変更は完了です。
しばらくしたら、記事の中の地図のスポットのアイコンと色も変更されているはずです。
地図の表示サイズを変更する場合
変更したいマイマップを開き、縮尺を変更します。
変更は、画面右下の「＋/－」ボタンで変更します。マウスボールやクリックバッドで拡大縮小すると、画面サイズが変更されているだけの場合があるので要注意！
マップのタイトル横の「縦3点」をクリックし、「デフォルトビューを設定」を押します。
「デフォルトビューを設定しました」というメッセージが表示されたら、縮尺変更は完了です。しばらくすると、記事の縮尺も変更されているはずです。
まとめ
記事の中に複数スポットにピン押ししたGoogleMapを埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。
動作確認のためのデモとして残しています。
デモ
名古屋城周辺のスポットに複数ピン押ししたGoogle Mapの地図を埋め込む
複数スポットをピン押ししたマップを編集したもの
※上のマイマップそのものを編集するとすぐにサイトに表示されているマップにも反映されます
コメント