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

Osclass

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

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

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

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

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

【WordPress】Google map APIを取得する方法
【やりたいこと】Google map APIを取得したい Google map APIの取得、めんどくさいですよね~、 ということで、 Google map APIを取得する方法を一番シンプルな記事を目指して書きました! 【...

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

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

0.概要

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

1.使用したもの

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

ロリポップ!レンタルサーバー
【WordPress利用満足度No.1】のレンタルサーバー「ロリポップ!」月額220円からWordPressが使え、ワンクリック60秒で簡単インストール!今すぐ10日間の無料お試し!

・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キーの取得はこちら

【WordPress】Google map APIを取得する方法
【やりたいこと】Google map APIを取得したい Google map APIの取得、めんどくさいですよね~、 ということで、 Google map APIを取得する方法を一番シンプルな記事を目指して書きました! 【...

③Google mapの導入

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

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

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

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

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

④確認

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

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

3.追記

HTMLをペーストして、数十秒後にマップが表示されます。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

水中ドローンとUnityのお部屋|SHOWROOM(ショールーム)
水中ドローンとUnityの配信をメインにします(*^^*)たまにおやつ配信やおしゃべり配信します(*^^*)

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

https://hk-ryukyu.booth.pm/items/1061904
https://hk-ryukyu.booth.pm/items/1064971
https://hk-ryukyu.booth.pm/items/1067049
https://hk-ryukyu.booth.pm/items/1066777

コメント

タイトルとURLをコピーしました