BETA

【Osclass】Google mapを使用する方法

投稿日:2019-01-26
最終更新:2019-01-26

【やりたいこと】地図を表示させたい!


OsclassでもGoogle mapが使用できます!

Osclassにすでにダウンロードされている無料のGoogle mapプラグインを使って、マップの表示に挑戦してみました!

ということで、今回は、OsclassでGoogle mapを使用する方法です(^^)/

※Google map APIはすでに取得しているものとして、進めていきます。取得方法はこちら。

http://hk-ryukyu.club/hideto/archives/182

【10分でできる!】Google mapの表示


※ダウンロード時間は10分の中に含まれていません。

0.概要


プラグイン「Google maps」をインストールします。そして、取得したGoogle map APIを記入して、固定ページにマップを表示させます。

1.使用したもの


・ロリポップレンタルサーバー スタンダードプラン

https://lolipop.jp/

・Osclass

https://osclass.org/

・テーマ OsclassWizards

https://market.osclass.org/themes/general/osclasswizards-free-responsive-theme_238

・プラグイン Google maps

※Osclassにすでにダウンロードされています。

2.手順

①Google mapsのインストール


※すでにインストール済みのため、画像の表記と説明文が違っている部分があります。

「プラグイン」のプラグインの管理をクリックします。

Google mapsをインストールします。

Google map APIキーの記入


Google map APIキーを記入し、Save changesをクリックします。

※Google map APIキーの取得はこちら

http://hk-ryukyu.club/hideto/archives/182

③Google mapの導入


Google mapを開き、地図を共有または埋め込むをクリックします。

地図を埋め込むを選択し、HTMLをコピーをクリックします。

URL左の「中」は、マップの大きさを表しています。

固定ページにペーストしましょう。

以上で、Google mapの表示が完了です。確認してみましょう。

④確認


下記の画像のように、マップが表示されていれば成功です。

お疲れさまでした(^^♪

詳細

画像が見づらい場合は、以下のリンク先に移動することをおすすめします。

https://hk-ryukyu.club/hideto/archives/735

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

パソコン関連で役に立った情報を発信します

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう