【WordPress】複数ピン立てしたグーグルマップを埋め込む方法

観光名所などをワードプレスでまとめたい場合、ピンを複数立てたグーグルマップを埋め込むと、一目でわかってとても便利です。手順通りにやれば、初心者でも簡単です。

グーグルマップでマイマップを作成する

グーグルマップのURL
>>https://www.google.com/maps/


このとき、グーグルにログインしていることを確認してください。

左のメニューバーを選択

「マイプレイス」を選択

「マイマップ」→「地図を作成」を選択

このような画像が表示されます。

載せたい場所を検索して、ピンを立てていきます。例としてイギリス・ロンドンの観光名所をあげていきましょう。

マイマップにピンを立てていく

①載せたい場所を検索
②間違いなければ「地図に追加」

ピンが青になり、地図に追加されました。


他の場所も同様に追加していきます。

ピンの色・アイコンを変更する

特にマップを装飾しなくてもいいという方はタイトル変更に移りましょう。
>>次の項目にスキップ

ピンの色を変更する

追加されたピンの色は青になっていますが、変更することもできます。
ピンした場所の一覧で、編集したいピンにカーソルを合わせると、ペンキのアイコンが出てきます。


色を選択すると、ピンの色が変わります。

アイコンを変更する

例えばフォトスポットやバー、駐車場など、ピンをアイコンで分けることもできます。
ピンの色選択の下でアイコンを選びましょう。

アイコンが分かりやすくなりましたね!


マップ上ではこのように表示されます。

マップのタイトルを変更する

このままでは何のマップなのか分からないので、タイトルを決めます。

「無題の地図」を選択

①、②(②は任意)を入力したら、③保存をクリックします。

タイトルが変更されました。

一般公開するために設定を変更

マイマップは作成した段階では非公開になっていて、自分しか見ることができません。ワードプレスに埋め込むには公開設定をします。

「共有」を選択

共有設定が「非公開」になっているので「変更」を選択して編集します。

「オン―ウェブ上で一般公開」をチェックして保存します。

さきほど「非公開」だった部分が「ウェブ上で一般公開」に変更されているのを確認したら「完了」をクリック。

WordPressに埋め込む

HTMLタグをコピーする

マップのタイトル横のメニューをクリック→「自分のサイトに埋め込む」を選択

WordPressに貼り付けるためのHTMLタグが表示されるので、コピーします。

WordPressを編集する

ダッシュボードにログインし、グーグルマップを埋め込みたい記事を編集します。

①テキストエディタを選択
②コピーしたマップのHTMLタグを、そのまま貼り付け

プレビューで確認しておきましょう。

きちんと表示されていますね!

サイズを変えたい場合

プレビューで見てみてサイズを変えたい場合はHTMLを編集します。
変更するのは下記の部分です。

width="640" height="480"



今回は少し横長にしたいので、このように変更します。

width="800" height="400"


サイズが横長に変わりました。

比較すると分かりやすいですね。
【640×480】

【800×400】