トップページ > 記事閲覧
【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/17(Sun) 11:51
投稿者 tomzo
参照先
「Google Maps API」が「Google Maps Platform」へ移行します。
2年程前から#gmapプラグインを使ってGoogleマップを表示するときは、
APIキーが必要となっていました。

既存のサイトでAPIキーを使わないでGoogleマップを使っている人は要注意です。
エラーになるかもしれません。
移行日は2018年6月11日予定でしたが、7月16日に延期になったようです。

(参考)
6月11日以降、Google Maps APIによる地図表示が薄暗くなる/エラーになるケースも
「Google Maps Platform」移行で何が変わる?
https://internet.watch.impress.co.jp/docs/special/1124760.html
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/07/15(Sun) 19:24
投稿者 tomzo
参照先
「Google Maps API」が「Google Maps Platform」へ移行する日が、7月16日と発表されていますが、みなさん対応は大丈夫でしょうか?

私は、6年程前に作成したサイトをみたら
「このページでは Google マップが正しく読み込まれませんでした。」
とエラーが出ていました。
同様な作りの別のサイトではエラーは出ていません。
この違いは何なのかよくわかりません。
さて、どうしたものか。
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/07/02(Mon) 20:49
投稿者 ran
参照先
(つづき)

敢えて、取り上げるとしたらブラウザによっては、例えば、
#section(xxxxx.jpg,600,fix,dark=50,背景画像){{
&show(xxxxx.jpg,circle,thumbnail,分別作業);
}}の場合、

上記、プラグインの中でサファリでは、dark=50,背景画像

表示されるが、circle,thumbnail,が、正しく表示されない。

しかし、反対にIEでは、circle,thumbnail,が適用されるが

dark=50が正しく表示されないとか、この事については、

断りがあったようですが、haikチームがその状態をそのまま、

してホッタラカシにする、お積りなのでしょうか?上辺だけの

宣伝だけでは、ユーザーを獲得できないと思います。

win10
サーバー
ロリポップ
PHP 
7.1(CG版)

デザインテンプレート
haik-ikk
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/07/02(Mon) 20:46
投稿者 ran
参照先
#gmapプラグインを使っての表題の対処は
tomzo様と同じ対応をさせて頂きした事をお知らせします。
ありがとうございました。

そして、haikでのプラグインについての疑問があります。

tomzo様が、現在haik適用プラグインの作業をされて頂いて

おりますが、

どうして、haikでは各ブラウザによって表示できるものと、出来

ないプラグインがあるのでしょうか?これは、開発チーム

(haik)が検証の労を厭わっているのでしょうか?それとも

限界があるのでしょうか?少なくともソフトを開発し、事業

として社会的に表明しているのであれば、この事に真摯に向

き合うべき初歩的で基本的な検証のすべき一つではと考えます。

この他、haik チームに対しては?があまりにも多いと感じています。

あえて、ここで一々に取り上げて指摘はしませんが、
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/19(Tue) 19:18
投稿者 ran
参照先
(つづき)

これからは、テストサイトまでお知らせ頂いたyuna様、始め、皆様から貴重なアドバイスを

頂き、それを、一つづつ私なりに行って見ようと思っています。

しかし、当方、万年初心者は、試行錯誤で編集していますので、解決まで、猶予がある事を

皆様からご理解されて頂けば、更に有りがたく思います。

ご容赦下さい。
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/19(Tue) 19:04
投稿者 ran
参照先
今回、グーグルマップについて皆様からアドバイスを頂き、本当に感謝をしています。
私なりに、検証させて頂きました。
その中で、まずtomzo様からのアドバイス通りに挑戦してみました。

その結果、
#only_pc{{{
#html{{
<iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxxx" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
}}
}}}

#only_mobile{{{
#html{{
<iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxxx" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
}}
}}}

以上の中でxxxxxx部分を変更して貼り付けし、表示はされましたが、ソースの中でwidth="100%"にすると世界マップになりました。そこで、任意のサイズに変更

しましたら、すると意図とするサイズになりました。


win10
サーバー
ロリポップ
PHP 
7.1(CG版)

デザインテンプレート
haik-ikk
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/19(Tue) 09:19
投稿者 tomzo
参照先
ranさん

yunaさんが書かれている方式と同じですが、私はHAIKの場合は、
以下のようにPC用とモバイル用の2つのソースを用意して、
自動で切り替わるようにしています。

2つのソースで異なるのは「高さ(height)」だけです。
この例ではAPIキーは取得していません。
このままではいつかエラーになるかもしれませんが、今のところ大丈夫です。
7月16日以降に影響があるかもしれません。
何も問題がなかったら、これはこのままにしておく予定です。


#only_pc{{{
#html{{
<iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxxx" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
}}
}}}

#only_mobile{{{
#html{{
<iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxxx" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
}}
}}}
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/19(Tue) 05:57
投稿者 うみほし
参照先 https://umihoshi.com
キーの設置の仕方については過去記事で以下のように説明されています。

(引用)
投稿日 : 2018/02/21(Wed) 23:54
投稿者 : Yujiro
参照先 :
のほほんさん

新しいサイトは多分、ドメイン名自体が比較的新しいんですよね。

となりますと多分、Goolgからmap用のAPIキーを取得し、それをHAIKのサイ
ト情報>その他のタグにスクリプトとして書き込む必要ありです。

(ある時期までに取られたドメインには不要な様子。「時期」の情報は今手元になし)

たった今、マジ実験し、のほほんさんと同じ状態から表示できるまでになり
ました。私自身、mapが表示できないケースがあるけどなぜだろう?と今日
まで放置していましたが解明。v7.2で検証。
(私も古いサイトでは何もせずに#mapが使えてましたから)

さて、map用のAPIキー取得はググって取得するまではOKと思います。

ただ、探しにくいので書きますが、そのキーを埋め込むスクリプトは以下の通
り。YOUR_API_KEYの部分に自分のキーを。これを「サイト情報>その他のタグ」に。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/18(Mon) 22:49
投稿者 yuna◆VVK9FsAz9jw
参照先
ranさん

『Googleマップから「共有」、「地図を埋め込む」で<iframe src…>内をコピーしてHAMLソースで表示』の方法は、APIキーを取得しなくても良い方法です。


@Google Mapsを開き、検索窓に表示させたい名称か住所を入力して検索します。添付画像は東京駅を例にしています。

A東京駅が表示されたら、左赤枠の「共有」をクリックします。ポップアップされた小窓の「地図を埋め込む」をクリックします。

B東京駅のソースが現れますので、クリックすると選択されますのでコピーします。

Cホームページ編集画面にてGoogle Mapsを表示させたい場所に添付画像Cの様に
#html{{

}}
で、囲みます。

Dプレビューで確認し、大丈夫なら更新してください。

画像添付が出来なかったので、下記で確認下さい。
(ranさんがGoogle Mapsのソース取得ができたみたいなので、画像URLは削除させていただきますね。)
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/18(Mon) 19:30
投稿者 ran
参照先
お尋ねします。

>私のサイトでも時々別の場所になるときがありましたが,緯度経度で指定し直すと正常にもどりました。

私も、時々その様な状態があります。

>既存のサイトでAPIキーを使わないでGoogleマップを使っている人は要注意です。
エラーになるかもしれません。

以前のQHMの設定欄ではグーグルマップのAPIの取得方法も含めて誘導設定がありました。

現在のhaikでは簡易なプラグインで表示されます。

確かに、haikのマップ挿入編集では進化したかの様に思いましたが、やはり、

他のソフト(Google)の進行状態によって変更を余儀なくされるのですね。


>現在はGoogleマップから「共有」、「地図を埋め込む」で<iframe src…>内をコピーしてHAMLソースで表示させています。


今回、APIキーを改めて取得しましたが、それを、さてどの様にそれを貼り付け?そのプロセスを具体的に理解できれば、

と思い、例(ソース)も含めてレクチャーをされて頂けると感謝です。
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/18(Mon) 06:45
投稿者 うみほし
参照先 https://umihoshi.com
私のサイトでも時々別の場所になるときがありましたが,緯度経度で指定し直すと正常にもどりました。

今回の仕様変更とは関係あるのかはわかりません。

その経験から地図をつけるときは緯度経度で指定することにしています。
Re: 【お知らせ】#gmapプラグインを使ってGoogleマップを表示するときの注意
投稿日 : 2018/06/17(Sun) 19:50
投稿者 yuna◆VVK9FsAz9jw
参照先
tomzoさん

いつもありがとうございます。
今回の仕様変更とは関係無いのかもしれませんが、私のサイトでも#gmapプラグインのマップが表示されないサイトや、地図が表示されていても、住所は大阪なのに東京が表示されたりと、全く違う場所が表示されているサイトがありました。
現在はGoogleマップから「共有」、「地図を埋め込む」で<iframe src…>内をコピーしてHAMLソースで表示させています。

#gmapプラグインを使われている方は、地図が表示されていても場所があっているか確認されることをおすすめします。

- WEB PATIO -