A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

WordPressで記事の中に地図・Googleマップを設置するプラグイン【Simple Map】

Author:

費用:0円 時間:10分

WordPressに地図・Googleマップを設置したい。

紀行日記などを書かれる場合はありますよね。

Googleマップを設置するのは、結構簡単です。

Googleマップのページより埋め込みコードを取得するだけですから。

しかし、それすら面倒だと思いませんか?

ということで簡単に設置できるプラグイン「Simple Map」を紹介したいと思います。

sponsored link

Simple Mapとは

Googleマップをショートコードで簡単にWordpressの記事の中に設置できます。

更新頻度も多く、バグの解消も早いと思われます。

インストール方法

WordPress管理画面>>プラグイン>>新規追加をクリックしましょう。

そして、Simple Mapを検索しましょう

Simplemap

そして今すぐインストールして有効化しましょう。

すると、プラグイン一覧の上にGoogle Maps APIの取得を求めているメッセージが表示されます。

設定へと進みましょう。

設定ページ

ページの説明に沿って、Google Mapsのページに移動しAPIキーを取得しましょう。

 

ちなみに、APIの認証に際しての「この HTTP リファラー(ウェブサイト)からのリクエストを受け入れる」という項目については、

絶対に設定しておきましょう。設定していないと他のリファラーに利用されて不具合が発生する恐れがあります。

 

設定方法についてですが、そのAPIを利用するサイトのhttp://を除いたドメインとアスタリスクを記載しましょう。

このサイトの場合は、 akeyfn.xyz/* となります。

アスタリスクはワイルドカードと言って、任意の長さの任意の文字列を代入することを意味しているので、akeyfn.xyz/以下のページすべてがこのAPIのリクエストを行えるということになります。

同様にして、 *.akeyfn.xyz/ のようにドメイン前にアスタリスクとドットを置くと、wwwなどの任意のサブドメイン全てに適用できるので便利です。

認証

そして、APIキーを取得し、Simple Mapに設定することが終われば完了です!

 

実際の使い方

使い方はいたって簡単です。

記事作成のビジュアルエディタモードにおいて、以下のようなショートコードを記入すれば足ります。

 

住所から表示

[map addr=”任意の住所”]

 

駅名などのGoogleマップで検索した結果から表示

[map]任意の場所[/map]

 

経緯から表示

[map lat=”任意の緯度” lng=”任意の経度”]

 

大きさを指定

[map width=”任意の幅” height=”任意の高さ”]

 

ちなみに既定では幅・高さともに100%です。

 

地図での指定位置についての説明を表示

[map]任意の説明文[/map]

 

検索した結果の位置を指定するほかに、位置についての説明文の設定もできます。

ちなみに、説明文と位置情報が不一致の場合は、

[map addr=”任意の住所”]任意の説明文[/map]

とaddrを付け加えましょう。すると、住所と説明文を分けて設定できます。

住所を岡山県岡山市北区駅前町、説明文を「大都会です」とするとこうなります。

大都会

 

というわけでこんな感じでしょうか。

皆さんもWordpressでGoogleマップを設置したいならぜひ試してみてくださいね(*^^)v

 

 - サイト作成, Webアプリ , ,

adsen

adsen

Message

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

CAPTCHA


  関連記事