• メニュー
  • メニュー

【Googleマップの埋め込み】WordPressへの埋め込み&複数マーカー地図作成方法

ブログを運営していると一度や二度必ずGoogle Mapを記事上に表示したいという機会が訪れると思います。

WordPressで運営しているホームぺージへのグーグルマップの埋め込み方法は、至って簡単です。マーカーを複数表示することも難しくありませんので、是非読者に優しいホームページ作りをがんばってみてください。

wordpressでgooglemapの埋め込み方法は?!

ワードプレスにグーグルマップを埋め込む方法はとても簡単です。

一度覚えれば誰にでもできます。これもWordpressが毎年進化を遂げているおかげですね。昔のWordpressではこんなに簡単に表示できませんでした。感謝感謝!

1.表示したい地図を取得する

さて、まずはWordpressとは関係ないところで、Googleを開いて地図を表示するところから始まります。

Google Chromeをブラウザで使っている場合、ホームがGoogle検索になっていると思います。

そして、右上に3×3のますの□があります。これはプラグインされているアプリケーションを表示する機能です。

この□をクリックすると下側にぴろぴろっとアプリが表示され、その中にマップというアイコンがあります。このアイコンをクリックします。

googlemap-wordpress-埋め込み

 

すると地図画面になります。

左上に虫眼鏡マークと一緒に文字を入力する場所がありますので、こちらに地名やお店、住所を打ち込みます。

この画像では「東京駅」と入力しています。

googlemap-wordpress-埋め込み

ここまでは、ブログをやっていない人でも、普段使っている機能だと思います。

 

2.地図のコードを入手しよう

さて、次からがWordpressやホームページなどに関係してきます。

↑の画像の東京駅の左に棒3本の「Ξ」のアイコン(ボタン)があります。こちらをクリックすると下の画像のようにメニューが開きます。

googlemap-wordpress-埋め込み

メニューの下側に

【地図を共有または埋め込む】

という項目がありますので、こちらを選びます。

すると共有と書かれた白いウィンドウが開きます。

・リンクを送信する
・地図を埋め込む

の二つのタブがありますので、【地図を埋め込む】を選択します。

googlemap-wordpress-埋め込み

すると、

<iframe src=”https://www.google.com/maps/embed?…….

というホームページのコードらしいコードが表示されますので、これを右にある【HTMLをコピー】をクリックしてコピーします。

左のコードを選択して、Ctrl+Cや右クリックでコピーもできます。

googlemap-wordpress-埋め込み

3.Wordpressブログに貼りつけよう!

Google mapのコードを取得することができましたので、次はブログに貼りつけてみましょう。

ここで重要なのが、投稿画面で【テキストモード】を選ぶことです。普段、記事を書くときはビジュアルモードで書かれている人が多いと思いますし、テキストモードを選ぶことすら嫌な方もいらっしゃると思いますが、ここは【テキストモード】が必須です。

表示したい場所にカーソルを置いて、テキストモードに切り替えます。

googlemap-wordpress-埋め込み

コピーしてある<iframe~から始まるコードをそのまま記事に貼りつけます。

貼りつけたら、【ビジュアルモード】に切り替えます。

するとWordpressが勝手に地図を表示してくれます。

googlemap-wordpress-埋め込み

簡単でしたね?^^

もしも表示されない場合は、実際に投稿してホームページにアクセスしたときに表示されているかチェックしてみてください。場合によっては、読み込み問題でエディター画面で表示されない場合もあります。(twitterやinstagram埋め込みでもたまにあります)

 

Google Mapに複数マーカーを表示する方法は?!

Google Mapに複数のマーカーを表示する方法についてです。

1.https://www.google.co.jp/maps に行きます。
2.Googleにログインされていることを確認してください。右上の端にあるアバターアイコンをクリックでログインできます。

3.左上端の検索窓の横のメニューアイコンをクリックして、メニューを開きます。

4.「マイプレイス」⇒「マイマップ」⇒「地図を作成」(一番下にあります)を選択します。

5.新しいウィンドウが開きます。「無題の地図」となっていますので、横のボタンを押して、名前を説明をつけてあげます。

6.ボタンに「マーカーを追加」と言うものがありますので、これをクリックして追加します。地図からマニュアルで選ぶこともできますし、検索して追加することもできます。

マニュアルで選んだ場合は、「場所の名前」を付けて保存します。地図上に緑の印が登場します。

7.追加したいだけ6の作業を繰り返します。

以上となります。

例えば、旅行系のサイトを作っていたらこの複数マーカーはとても親切です。ご自身の思い出の場所の記録にもこの複数マーカーは重宝すると思います。「小学1年夏休みお出かけマップ」とかも作れますもんね!

toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です