Google Maps APIを使ってみた②【2019年版】

ハツネ
ハツネ
前回に引き続いてGoogle Maps APIキーを使って、ホームページ上にGoogleマップを表示します。
ハカセ
ハカセ
まずは、WordPressにプラグインを導入じゃな。

Leaflet Maps Markerの導入

ハツネ
ハツネ
今回はLeaflet Maps Markerを使いました。Leaflet Maps MarkerはGoogle Maps以外にもOpenStreetMapBing Mapsなど他のAPIも設定できるので後々便利だと思います。その分設定項目が多いので分かり辛いのですが・・・😅

WordPressのメニューから、プラグイン>新規追加

検索窓にLeaflet Maps Markerで検索。

Leaflet Maps Markerが見つかったら、今すぐインストールし、その後で有効化します。

有効化が完了しますと左のメニューにMaps Markerの項目が出来るので開きます。

ハツネ
ハツネ
下記の表示がありますが、今回は無償版で使いますので、又はありがとう、多分後でをクリックします(笑)

次に左のメニューから設定>ベースマップを開いて、その中の項目のGoogle Maps JavaScript APIを開きます。

ここでは、Google Maps JavaScript API statusを有効にし、

その下のGoogle Maps API Keyに前回取得したAPI Keyの文字列をコピー&ペーストしてください。

 

次に表示される地図を指定します。

左のメニューから新マーカーを追加をクリックで下のような画面になります。

マーカー名を指定します。(後から分かり易い方がいいかも)

検索窓に表示したい住所を入れると幾つか候補がでますが、候補に無かった場合はGoogleマップを実際に操作して目的地にマーカーを付けてもOKです。

目的地にマーカーを付け終えたら、ページ下にある更新のボタンをクリックします。

ハカセ
ハカセ
これで最低限の設定はできたぞ。
ハカセ
ハカセ
ショートコードとAPIリンクにある [mapsmarker marker=”○○”] がWordPressに貼り付けるショートコードになるので、メモしておくのじゃぞ。

 

ウィジェットにショートコードを貼り付け

次はホームページにショートコードを貼り付け、Googleマップを表示します。

今回はウィジェットに表示しますが、固定ページでもほぼ同じ方法でできますよ。

左のメニューから外観>ウィジェットを開きます。

Googleマップを表示したいサイドバーにカスタムHTMLを追加してください。

そしたら、先程のショートコードを内容に貼り付けます。

最後に保存ボタンをクリック。

 

ハツネ
ハツネ
以上でGoogleマップをご自分のホームページに導入出来たかと思います。お疲れ様でした。😁
ハカセ
ハカセ
Google Maps APIの有料化によって小規模サイトでは無料分で賄えるかと思うが、中規模サイト以上では料金が発生するので注意じゃぞ。