お店や観光名所などをいくつかまとめて紹介したい場合、ピンを複数立てたGoogleマップを埋め込むと、それぞれの場所が一目でわかってとても便利です。プラグイン不要で、手順通りにやれば初心者でもカンタンです。
コンテンツ
Googleマップでマイマップを作成する
GoogleマップのURL
>>https://www.google.com/maps/
このとき、Googleにログインしていることを確認してください。
左のメニューバーを選択します。
「マイプレイス」を選択します。
「マイマップ」→「地図を作成」を選択します。
このような画像が表示されます。
載せたい場所を検索して、ピンを立てていきます。例としてイギリス・ロンドンの観光名所をあげます。
マイマップにピンを立てていく
①載せたい場所を検索
②間違いなければ「地図に追加」
ピンが青になり、地図に追加されました。
他の場所も同様に追加していきます。
ピンの色・アイコンを変更する
マップを装飾しなくてよければタイトル変更に移ります。
>>次の項目にスキップ
ピンの色を変更する
追加されたピンの色は青になっていますが、変更することもできます。
ピンした場所の一覧で、編集したいピンにカーソルを合わせると、ペンキのアイコンが出てきます。
色を選択すると、ピンの色が変わります。
アイコンを変更する
例えばフォトスポットやバー、駐車場など、ピンをアイコンで分けることもできます。
ピンの色選択の下でアイコンを選びましょう。
アイコンが分かりやすくなりましたね!
マップ上ではこのように表示されます。
マップのタイトルを変更する
このままでは何のマップなのか分からないので、タイトルを決めます。
「無題の地図」を選択します。
①、②(②は任意)を入力したら、③保存をクリックします。
タイトルが変更されました。
一般公開するために設定を変更
マイマップは作成した段階では非公開になっていて、自分しか見ることができません。ワードプレスに埋め込むには公開設定をします。
「共有」を選択します。
共有設定が「非公開」になっているので「変更」を選択して編集します。
「オン―ウェブ上で一般公開」をチェックして保存します。
さきほど「非公開」だった部分が「ウェブ上で一般公開」に変更されているのを確認したら「完了」をクリックしてください。
WordPressに埋め込む
HTMLタグをコピーする
マップのタイトル横のメニューをクリック→「自分のサイトに埋め込む」を選択します。
WordPressに貼り付けるためのHTMLタグが表示されるので、コピーします。
WordPressを編集する
WordPressの管理画面にログインし、Googleマップを埋め込みたい記事を編集します。
①テキストエディタを選択
②コピーしたマップのHTMLタグを、そのまま貼り付けてください。
プレビューで確認しておきましょう。
サイズを変えたい場合
プレビューで見てみてサイズを変えたい場合はHTMLを編集します。
変更するのは下記の部分です。
width="640" height="480"
今回は少し横長にしたいので、このように変更します。
width="800" height="400"
サイズが横長に変わりました。
下記でサイズを実際に比較します。
【640×480】
【800×400】