• メニュー
  • メニュー

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

WordPressのGoogleマップの埋め込み方法と複数マーカー地図の作成方法について解説致します。

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

Googleの仕様が変わったのですが、Gutenbergになってからプラグインで対処できるようになりました。

ブログのサイト名は何でもOKです。でも、気を付けたいこともあるので解説したいと思います。

wordpressでgoogleマップの埋め込み方法

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

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

 

プラグインを使って簡単に表示する方法

プラグインを使うと簡単にGoogle mapを表示できます。

おすすめのプラグインは「Ultimate Addons for Gutenberg」になります。
「今すぐインストール」をクリックして「有効化」します。


Googleマップの追加方法は、ブロック追加で+を押して、Google Mapを選びます。使う頻度が増えてくると+を押すとすぐに選択できるようになりますね。


Google Mapが追加されると最初は英語のマップになってしまいます。

Language

Japaneseを選択するようにしてください。Jと押すと早く選択できますよ。

Address

日本語で大丈夫なので入力します。結構精度は高いので表示したい地図についは問題ないと思います。

Zoom

Zoomで地図のアップ度を選びます。15くらいが見やすいかと思います。

Height

Heightは地図の高さです。記事の雰囲気に合わせて調整してみてください。


埋め込みの場合の3ステップ

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

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

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

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

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

googleマップ-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のコードを取得することができましたので、次はブログに貼りつけてみましょう。

ブロックエディタの場合

ブロックエディタの場合は、+を押してブロックを追加します。その時にブロックの検索に「html」を入力してカスタムhtmlを選択します。

HTMLを入力となりますので、そこに取得したURLを貼り付けてあげます。

テーマにもよりますが、上部にHTML/プレビューの切り替えボタンがありプレビューを押すと地図が表示されます。


クラシックエディタの場合

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

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

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年夏休みお出かけマップ」とかも作れますもんね!

以上となります。


まとめ:Google Map埋め込みについて

Google MapはAPIを利用するために登録と、アクセスによってお金を払う仕様になってしまいました。リクエスト1000件当たり2ドルになります。月額200ドルまで無料ですので、100,000リクエストまで無料になりますので、大量アクセスが集まるトレンドサイトでなければ問題なく使えます。

Google MapのAPI利用はこちら

しかし、記事上で使う場合はプラグインを使うことで登録も必要なく費用も掛からないように回避することができますので、まずはUAGプラグインを使ってみてください。


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

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

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

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

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

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

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

ストーリーを見る

コメント・質問する

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