新規で立ち上げたサイトでGoogleMapが何故か？表示されません。

使用しているサーバーはエックスサーバーで
同じサーバー内で他のサイトのGoogleMapは正しく表示さているのに
何故か？新規で立ち上げたサイトではGoogleMapが表示されず

このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。


↑上記のような表示が出ます。

試しにAPIのキーを取得すれば問題は解決するのか？と思い試してみるも表示されず…

因みに埋め込みコードを取得し、#html{{}}内に<iframe>での記載を行なうと
GoogleMapの表示は正しくされました…。

HAIKの#gmapの問題っぽいですが他のサイトでは表示されている
＆
試しに他のサイトで#gmapを追加すると正しく表示されるので
Ver7.2の問題なのかも？と考え始めておりますが…

とりあえずは困ったものですね…；



Ver7.2は別スレッドにYujiroさんが記載されている通り
メニューの表示表示がおかしくなってしまいます…

当方ではアイコンと文字の表示があってなくおかしくな表示になっております。
スペースを入れてやや見栄えを調整しておりますが変ですね…；


皆様のサイトではGoogleMapは正しく表示されておりますでしょうか？

編集

そうすると，余計にそのサイト固有の何かが問題なんですね。
どこでエラーが出てるか分かれば良いのですが。

編集

>うみほしさん

お疲れ様です。
いつもご丁寧な情報提供誠にありがとう御座います。

一応、私もそちらのページは確認させて頂いておりまして
以下のAPIを有効にしてあります。

Google Maps Directions API

Google Maps Distance Matrix API

Google Maps Elevation API

Google Maps Embed API

Google Maps Geocoding API

Google Maps JavaScript API

Google Static Maps API


取得したAPIキーには*.hoge.com/*と
httpsとhttpアクセス時、両方に対応する様にHTTPリファラーに追加もしてあります。



その上でフッターに設置するというのは私もやっていなかった為
#html内に取得したAPI情報を記載してみましたが…

何故か？相変わらずMAPは表示されませんでした…；

#beforescript内にも記述するとMAPは表示されるものの
位置マーク等は表示されず…。
(移動等も出来ませんでした)

他のサイトでは全て#gmapが機能するのに何故なのか？

さっぱり解らず現状は手詰まり状態ですね…llllll(-ω-；)llllll

編集

https://developer.a-blogcms.jp/document/patches/entry-2466.html

にGoogleの仕様変更で表示されないことが紹介されてました。
それによると，

1．Google API Console にアクセスしてログイン。ログイン後、任意の名前でプロジェクトを作成。
2．先ほど作成したプロジェクトの選択。
3．Google Maps JavaScript API と Google Static Maps API と Google Maps Geocoding API（※） の有効化。必ず3つとも行ってください。　（※2016年6月29日追記）

ということです.新しいドメインや，変更したドメインなどでは必要みたい。


（テスト結果）HAIK7.2.1，エックスサーバー,
私のテストサイトのドメインは新しいので#gmapを試したら，やはりエラー。
そこで上記サイトの解説に沿って3つのAPIを有効化し，APIキーの取得も行いました。
それをフッターに設置したら，正常にマップが表示されました。
「その他のタグ」に設定しただけではマップの位置マークが表示されないし，
移動も不可，拡大縮小もできないという不具合がありました。

編集

#gmapとマップキー、そのマップキーで何をアクティベートできているのか？
そしてサイトの状況によって思った表示ができるかどうか、これ条件が非常に
わかりにくいですよね。

Googleの方でマップに関して仕様がどんどん変わり、痒いところに手がとど
く代わりにより複雑になってきました。ユーザー側での選択肢が多岐に渡って
おり、思ったところのツボにはめるのに難儀します。

これ、検証しようにも、言わば「組み合わせ爆発」といった状態で如何ともし
難いです。

でも、のほほんさんのところで一歩前進があった感触はありか。

しかしこればかりをやっているわけにもいかずで・・・

本来ならばGoogleが提供する資料をきっちり読み込むことが必要そうではあ
りますが。

編集

情報を下さった、Yujiroさん、うみほしさん有難う御座いました！


PS.
問題が起きている該当ドメインは友人の物でお付き合いで一緒にホームページを作っている関係上
ここには記載する事が出来ません。

完全に私個人の所有物であれば何ら問題なくここに記載するのですが…

申し訳御座いません…m(_ _)m

編集

更にその後、当方で少しだけ実験をしてみました。

設定＞その他のタグ部分に
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
↑上記を記載した上で

GoogleMapを使いたいページ内に#beforescriptタグ内にも↑上記のAPIのKEYを記載すると
GoogleMap自体は表示されました。

表示されましたが何故か？ポインター(マップの住所のポイントに赤く表示されるもの)が表示されません。


試しにHAIKを去年の10月頃に取得したドメインにサブディレクトリを作成し
新規でインストールしてみましたが…

此方は何故か？APIのKEY自体を一切記載せずに#gmapが使用出来、更に表示も正常にされました。
(何で…？＿？)


問題が起きている該当ドメインへのインストールに問題があるのか？とも思い
再インストールを行ない再度試すも此方では相変わらず表示されず…

全く原因が解らない為、これ以上時間を取られる訳にも行かないので…
仕方なくコードを直接#html内に記述した上でスマートフォン表示への対応の為

widthは%指定し対応しました。

つづく

編集

できればのほほんさんのマップエラーが出ている箇所のアドレスを教えてもらえると、
私のほうから過去の経緯も含めて、正式に不具合報告ができるのですが。どうでしょうか。

編集

open-qhmでの過去のやり取りです。
ここにヒントがあると思いますが、その後の対応は無し。

umihoshi commented on 26 Jan 2017 &#8226; edited
forumの検証では、キーを設置してもエラーになる事例があり、

＞HAIKに最初から埋め込まれているﾏｯﾌﾟJavaの指定URLが問題で、ｈｔｍｌでjavaを埋め込むと、URLどうしが干渉してしまう事があり、エラーが出ていました。

　ここが問題点のようです。HAIK内のjsを修正する必要があるということでしょうか。

@big2men
Owner
big2men commented on 26 Jan 2017
@umihoshi
未確認ですが、おそらくそうだと思います。
#gmap が出力する Google マップの JavaScript 読み込みタグと、 #beforescript 等で書き込んだ読み込みタグがあるからですね。

こちらにある、これを直接 gmap プラグインに書いたらエラーは出なくなるかもです。（未確認です）

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
↑をここに書くイメージです。

ちなみに、 JAVA と表記すると別のプログラミング言語となるので js あるいは JavaScript と表記してください &#128187;

編集

ううむ、わからんですねー

Mapkeyにはドメイン制限とかかけてないですよね。

私の案は新しい埋め込みコードの発見だったのですが、それも通用せず。

（APIキー取得しましょうの件はあとで流し読む人用にも念をいれて書きました）


謎ですね。ドメイン取得時期も関係ないとなると・・・わからんですね。

これ以上のテストを強いることはありませんが、新しいディレクトリに素のHAIKを
新規でインストールしてmapとキーのテスト。これの成否とNGのサイトの比較をし
てみるといった方法しかなさげです。

私の方の新しくてかつてmapがNGだったサイトが新しいスクリプトでOKになってし
まったため、NGを出せる要件がなくなり、比較できなくなってしまいました。
（私のテストは新規インストールのすっぴんなHAIKで）

編集

>Yujiroさん

いつも素早くご丁寧なご回答の程
誠にありがとう御座います。

一応、APIのキーの取得は既に試しておりまして…

記載して下さった方法も試してみましたが残念ながら当方では表示されず…
(ブラウザのキャッシュ削除等もしております。

仕方ないので私の方ではタグを埋め込み
スマホの表示に対応する為、width等は%表記にして対応しました。


ただ今回疑問に思った点と致しまして以下の点があります…。

Googleの仕様変更があったのは2016年中頃ですので
APIキーの取得をしなくてはならないとなると…
(httpsとhttpは区別されるので注意)

昨年度、作成したサイトも↑もれなくAPIキーを取得していなければ
表示されないはずですが…

昨年度、新規で作成した3サイトは問題なくAPIキーを取得をせず
#gmapで表示されております…。
(内2サイトはドメインも新規で取得しております。)

GoogleMapはタグで埋め込むとマップ上に不要な表示が出るので
個人的にはこの問題は解決したい問題ですが…

これだけにあまり時間を掛けられないので
仕方ないので現状はタグの埋め込みで対応しておきます…

ここ最近アップデート情報があり、少しは安心できるのかな？と思ったのも束の間
困った事も多くて困ったものです…
(#panelの問題等もそうですが…；

編集

追加情報

■サイトオープン状態でテストのこと

新しい使い方のAPIキーですが、サイトをクローズしたままではエラーを出したままの
状態に（なりやすい）ようです。テスト中だけでもサイトオープン状態に、そしてブラウザキャッシュ
をクリアーしてのテストをしてください。

サイトオープン状態でないと、Googleからのマップデータが遮断される感じです。
この辺り、ブラウザキャッシュと絡んでか判断しにくいです。
（クローズのままでうまく表示できてるようにも見えるのですが）

編集

なるほど，今後はこれを推奨ですね。

以前の質問でキーを入れてもダメな事例があったのはこれが原因でしょうね。

編集

うみほしさん ＆　他にマップの表示トラブルの方へ

http://haikforum.qhmtips.com/pforum/pforum.php?mode=viewmain&l=1&no=8&no2=26&p=&page=0&dispno=8

ここにあるAPIキーを入れるタグの記述は現在無効の場合があります。
下の記述でなければマップは表示できない人もいるはず。
（現に私が保有する新しめのドメインでは不可）
これには件の、ドメインの新旧が関係あるかもです。

それこそ、googleがmap表示の仕様を変更したとき、旧仕様のユーザー
に影響が出ないようにするためなのかもです。

下の記述なら一律成功すると思われます。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

編集

旧forumでも同じ問題を解決したのを思い出します。
もはや，懐かしいという感じ。

http://haikforum.qhmtips.com/pforum/pforum.php?mode=viewmain&l=1&no=8&no2=26&p=&page=0&dispno=8

キーを取得させるのがグーグルの方針でしょうね。

#gmapがリリースされたとき，旧版の#gmapfunと緯度経度の順番が逆になってしまい，対応がめんどくさかったです。
グーグルマップとなんで逆にしたの？って開発に聞いたら，リリース後に変えると互換性の問題が出るので，もし直すなら#gmap2を作るしかないという話でした。
たぶん#gmapを作ったときの単純ミスだと思います。いったんリリースしてしまうと後の祭り。

それとまれに，地図が急に変な場所を示すことがあります。大抵は住所で指定している場合。
なので，私はできるだけ緯度経度で指定することにしてます。

編集

のほほんさん

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

となりますと多分、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>

それから・・・

＞当方ではアイコンと文字の表示があってなくおかしくな表示になっております。

これはHAIKチームに報告してください。できたらそれがわかるキャプチャー添えが良いかと。

編集

【追記】
試しにブラウザのキャッシュを削除したり
Javascript機能をON、OFFを切り替えてみたり…

っと、更に試すもやはり原因不明で改善されず

仕方ないので現状は#html内に<iframe>で表示させておりますが
原因が解らない＆#gmapを使えないのは非常に不便なので困りましたね…；

編集