【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、EC-CUBEもたったの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のお部屋
水中ドローンとUnityの配信をメインにします(*^^*) たまにおやつ配信やおしゃべり配信します(*^^*)

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

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

※無料版あり Unity学習100日記念本(0~30日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(Progate編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

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