WordPressのGoogleマップの埋め込み方法と複数マーカー地図の作成方法について解説致します。
WordPressで運営しているホームぺージへのグーグルマップの埋め込み方法は、至って簡単です。マーカーを複数表示することも難しくありませんので、是非読者に優しいホームページ作りをがんばってみてください。
Googleの仕様が変わったのですが、Gutenbergになってからプラグインで対処できるようになりました。
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のますの□があります。これはプラグインされているアプリケーションを表示する機能です。
この□をクリックすると下側にぴろぴろっとアプリが表示され、その中にマップというアイコンがあります。このアイコンをクリックします。
すると地図画面になります。
左上に虫眼鏡マークと一緒に文字を入力する場所がありますので、こちらに地名やお店、住所を打ち込みます。
この画像では「東京駅」と入力しています。
ここまでは、ブログをやっていない人でも、普段使っている機能だと思います。
2．地図のコードを入手しよう
さて、次からがWordpressやホームページなどに関係してきます。
↑の画像の東京駅の左に棒3本の「Ξ」のアイコン(ボタン)があります。こちらをクリックすると下の画像のようにメニューが開きます。
メニューの下側に
【地図を共有または埋め込む】
という項目がありますので、こちらを選びます。
すると共有と書かれた白いウィンドウが開きます。
- リンクを送信する
- 地図を埋め込む
の二つのタブがありますので、【地図を埋め込む】を選択します。
すると、
<iframe src=”https://www.google.com/maps/embed?…….
というホームページのコードらしいコードが表示されますので、これを右にある【HTMLをコピー】をクリックしてコピーします。
左のコードを選択して、Ctrl+Cや右クリックでコピーもできます。
3．Wordpressブログに貼りつけよう！
Google mapのコードを取得することができましたので、次はブログに貼りつけてみましょう。
ブロックエディタの場合
ブロックエディタの場合は、＋を押してブロックを追加します。その時にブロックの検索に「html」を入力してカスタムhtmlを選択します。
HTMLを入力となりますので、そこに取得したURLを貼り付けてあげます。
テーマにもよりますが、上部にHTML/プレビューの切り替えボタンがありプレビューを押すと地図が表示されます。
クラシックエディタの場合
重要なのが、投稿画面で【テキストモード】を選ぶことです。普段、記事を書くときはビジュアルモードで書かれている人が多いと思いますし、テキストモードを選ぶことすら嫌な方もいらっしゃると思いますが、ここは【テキストモード】が必須です。
表示したい場所にカーソルを置いて、テキストモードに切り替えます。
コピーしてある<iframe~から始まるコードをそのまま記事に貼りつけます。
貼りつけたら、【ビジュアルモード】に切り替えます。
するとWordpressが勝手に地図を表示してくれます。
簡単でしたね？^^
もしも表示されない場合は、実際に投稿してホームページにアクセスしたときに表示されているかチェックしてみてください。場合によっては、読み込み問題でエディター画面で表示されない場合もあります。(twitterやinstagram埋め込みでもたまにあります)
Google Mapに複数マーカーを表示する方法
Google Mapに複数のマーカーを表示する方法についてです。
１．https://www.google.co.jp/maps に行きます。
２．Googleにログインされていることを確認してください。右上の端にあるアバターアイコンをクリックでログインできます。
３．左上端の検索窓の横のメニューアイコンをクリックして、メニューを開きます。
４．「マイプレイス」⇒「マイマップ」⇒「地図を作成」(一番下にあります)を選択します。
５．新しいウィンドウが開きます。「無題の地図」となっていますので、横のボタンを押して、名前を説明をつけてあげます。
６．ボタンに「マーカーを追加」と言うものがありますので、これをクリックして追加します。地図からマニュアルで選ぶこともできますし、検索して追加することもできます。
マニュアルで選んだ場合は、「場所の名前」を付けて保存します。地図上に緑の印が登場します。
７．追加したいだけ６の作業を繰り返します。
例えば、旅行系のサイトを作っていたらこの複数マーカーはとても親切です。ご自身の思い出の場所の記録にもこの複数マーカーは重宝すると思います。「小学1年夏休みお出かけマップ」とかも作れますもんね！
以上となります。
まとめ：Google Map埋め込みについて
Google MapはAPIを利用するために登録と、アクセスによってお金を払う仕様になってしまいました。リクエスト1000件当たり2ドルになります。月額200ドルまで無料ですので、100,000リクエストまで無料になりますので、大量アクセスが集まるトレンドサイトでなければ問題なく使えます。
しかし、記事上で使う場合はプラグインを使うことで登録も必要なく費用も掛からないように回避することができますので、まずはUAGプラグインを使ってみてください。
コメント・質問する