osclassの広告ページにGoogleマップを挿入する方法

今回はこんな感じに↑、広告欄の下に自動でGoogleマップが挿入されるように設定してみました。

これがあるだけで、立派なサイトに見えてくるから不思議です(笑)

 

やり方は簡単ですが、初めてだと意外と手古摺ると思うので、自分の復習も兼ねて、今日はみなさんとやり方をシェアしていこうと思います。


まずはGoogle Mapsプラグインのインストール

まず初めに、ストアに行ってフリー(無料)のGoogle Mapsというプラグインをダウンロード&インストールします。後はそれを有効化してください。

あなたのサイトがもし2016年6月以前に作られたサイトなら、これだけで地図が自動挿入されます。しかし、この記事を見ているあなたはこれに該当しないでしょうから、APIキーの取得が別途必要になってきます。

 

APIキーを取得しよう

APIキーの取得はこちらで出来ます↓

GoogleのAPI取得ページへ

そこで右上のキーの取得という所を押して、キーを取得してください。終わったら右下にAPIコンソールへのリンクが出てきますので、そこから管理画面に飛びます、そうするとこんな画面が出てきます。

ここでの設定方法はこちらのサイトを参考にやってみてください。

とりあえず、自分のサイト情報を入力して下の保存ボタンを押したら再びこのサイトに戻ってきてください(リンク先の情報が古いため内容が今と違っています)。

APIキーをosclassに設置

上記のサイトは情報が古いため、これを参考にやってみたください。

まずは、FTPソフトからoc-content/plugins/google_maps/index.php
という箇所を開きます。そうすると、

index.phpの20行目辺りに以下の記述があります、これを赤字のように書き換えてください。

《変更前》

// HELPER
function osc_google_maps_header() {
echo ‘<script src=”https://maps.google.com/maps/api/js?sensor=false&key=’.osc_get_preference(‘maps_key’, ‘google_maps’).'” type=”text/javascript”></script>’;
echo ‘<style>#itemMap img { max-width: 140em; } </style>’;
}

《変更後》

// HELPER
function osc_google_maps_header() {
echo ‘<script src=”https://maps.googleapis.com/maps/api/js?key=あなたのAPIキーをここにコピペしてください‘.osc_get_preference(‘maps_key’, ‘google_maps’).'” type=”text/javascript”></script>’;
echo ‘<style>#itemMap img { max-width: 140em; } </style>’;
}

これで保存すれば終了です。

Before→Afterで見てみましょう

《before》これが

《after》こうなりました!

 

おおお〜、なんてシャレオツなサイトだ( ̄▽ ̄)笑

 

みなさんもGoogleマップ載せたかったら、ぜひやってみてください。

 

また何かあったら記事にしますね( ´ ▽ ` )ノ

 

 

おまけ

Googleマップ有料化の流れも合わせてこちらのサイトも参考にさせていただきました。よかったらご一読を。

 

“osclassの広告ページにGoogleマップを挿入する方法” への2件の返信

  1. ピンバック: 医療従事者向けマッチングサイトを作ってみた 【医療×IT】 | (仮)りむのBreaking Badな日々

  2. ピンバック: 医療従事者向けマッチングサイトを作ってみた 【医療×ICT】 | (仮)りむのBreaking Badな日々

コメントを残す

メールアドレスが公開されることはありません。