WordPressで記事にGoogleマップを埋め込む方法【複数ピン編】

お店や観光名所などをいくつかまとめて紹介したい場合、ピンを複数立てた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】