2019/01/25 (Fri) 14:19:31
「Wangan Walker」さん
始めまして、ヨット乗りのDonと言います。
グーグルマップの利用について検索する内ち「リタイア男の暇つぶし」さんのサイトを見つけ、
その中で「Wangan Walker」さんを知りました。
グーグルマップ表示が上手く行かず、色々教えて欲しく、コメントしました。
突然のコメント、申し訳ありません。
ご指導の程、宜しくお願いします。
現状：
サーバー:エックスサーバー
ドメイン：donsaigou.com
googlemap表示サイト：http://www.donsaigou.com/hakutikouro.html
全国の港から港への航海のwaypoint、ルートとトラックが200か300ぐらいアップされてます。
（googlemap航路情報と、記載されているところからマップにリンクされます）
現状、マップを開くとグレーが掛かっており「このページでは Google マップが正しく読み込まれませんでした。
」と表示されます。
Apiを取得し、htmlにうめこみました。
結果、1秒程、正常に表示され、即、
「エラーが発生しました。
このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」
と出ます。
この様な状況です。
相談に乗っていただけますでしょうか。
今までのグーグルマップ作成手順：
ガーミンのハンディGPSからカシミールにWAYPOINT、ルート、トラックを、GDBファイルに記録。
GDBから轍でHTLMに変換。
ホームページビルダーのファイル転送でサーバーにアップ。
APIの埋め込み方が正しくないのかもしれません。
埋め込み方を見て欲しいので、
もし、良ければ、次のコメントで現状とAPI埋め込みのHTMLファイルを送らせて下さい。
突然、長文で申し訳ありません。
Re: グーグルマップ表示 - 本木 義彦
2019/01/25 (Fri) 18:15:52
DONさん、
素晴らしい趣味をお持ちですね。 自分には夢の様な生活にしか見えません。
ご質問の件ですが、私は轍にて作成したhtmlファイルを編集して下記の様にAPI KeyをScriptとして挿入することから始めました。(scripy type行の3行目)
これでうまく行ったので同じラインを轍の template.html に挿入して自動的にKeyが設定される様にしています。
DonさんのWeb Page(gme Habu Port at Ohshima Island→Toshima Island)を拝見したのですが、まだAPIが設定されていませんでした。
尚、API KeyはWeb pageをダウンロードすれば誰でも参照できてしまうので、Google Developer Consoleでリファーラー指定(自分のWebサイトでしか使えない設定です)してKeyが他のサイトでは使えないように設定して下さい。
尚、私の個人的都合により轍はVersion3.96を使っています。
また、アクセス上限をGoogle Developer Consoleで必ず設定して下さい。
また、既にアップロードしたhtmlファイルに付いてはフリーソフトの"TextSS"で一括編集しFFTPで再度アップロードしました。
私もこの機能はあまり詳しくないのでこの程度しかお答えできませんが、追加質問はいくらでもお受けします。
+++++++++++++++++++++++++++++++++
<!DOCTYPE html>
<html>
<!-- HTML generated by Wadachi Version 3.96 -->
<!-- 標準テンプレート -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<title>2019.01.19 本埜 白鳥の郷と成田山新勝寺初詣サイクリング 【作業中】</title>
<link rel="stylesheet" type="text/css" href="20190119_Naritasan_Motonomura_Hakucho_files/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFsCnX2n5B_bTfXFvbsWNfH1X-Qzbc9xo®ion=JP"></script>
<script type="text/javascript" src="20190119_Naritasan_Motonomura_Hakucho_files/googlemaps.js"></script>
<script type="text/javascript">
/*<AnnotatedTimeLine>*/
</script>
</head>
<body onLoad="displayMap()">
<!--
2019/01/26 (Sat) 11:26:56
本木さん
Donです。
素早い返信を有難うございます。
銚子から大原へ。http://www.donsaigou.com/gmtyouoo.html
のhtmlファイルを送ります。
これでもエラーになります。
私には「白鳥の郷と成田山新勝寺初詣」と同じにみえますが、何か間違ってますでしょうか。
また、考えられる他の原因はありますでしょうか
<!DOCTYPE html>
<html>
<!-- HTML generated by Wadachi Version 3.86 -->
<!-- 標準テンプレート -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<title>gm銚子→大原2015</title>
<link rel="stylesheet" type="text/css" href="gmchohara015_files/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
key=AIzaSyAT79VS31_NMwdI6d0rDF1FtnMCFSdWSM4®ion=JP"></script>
<script type="text/javascript" src="gmchohara015_files/googlemaps.js">
</script>
<script type="text/javascript">
/*<AnnotatedTimeLine>*/
</script>
</head>
<body onLoad="displayMap()">
<!--
bodyタグ内は自由に編集することができます。
Re: グーグルマップ表示 - 管理人
2019/01/26 (Sat) 13:28:24
Donさん、
私のPCには Google Maps Platform API Checkerがインストールされているので、これで確認したところ以下のメッセージが表示されました。
どうやらjava scriptのバージョンが古い様です。
----エラーメッセージ----------------------------------------------------------
Maps Platform Report
ERROR: このサイトでは、deprecated v2 JavaScript APIを利用しているようです。すぐにv3 JavaScript APIにアップグレードしてください。次のガイドをご参考ください。
https://developers.google.com/maps/documentation/javascript/v2/v2tov3
JS API Call:
http://maps.google.com/maps?file=api&v=2&key=ABQI*****KMUQ&sensor=false
-------------------------------------------------------------------------------
上記に示されるガイドのURLは下記の方が良さそうです。
https://developers.google.com/maps/documentation/javascript/v2tov3
然しながら、私達は轍を使っているのでそう簡単にはJavaScriptのアップグレードを行う訳には行きません。
そこで考えてみたのですが、Donさんの轍バージョンは v3.41、私の場合は v3.96。 この間にはJava Scriptのテンプレートの変更が行われている様です。
従って、轍のバージョンアップを行ってみたら如何でしょうか？ 然しながら最新版は完全にGoogle Mapのコールを止めてしまっているので、私と同じv396であれば 私の保管Zipファイルをお渡し可能です。
期間限定で下記にアップしましたのでダウンロードして試すのも手かな？と思います。 尚、ダウンロードの際に警告メッセージがでますが、継続すればダウンロードは可能です。
Donさんからの連絡があり次第、この内容は廃棄します。
http://chibawanganwalk.sakura.ne.jp/12Temp/wadachi_v396.zip
【追】
+++DonさんのWebサイトにアップされているマップの API Keyは下記の様に化けてしまっていました++++++++++
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAcAB70LmIRvwS9yshT4O43hQyojsLQBG2PYYEouck5uOdJBtXExT0ID1qQlIptFSOMFwzJAtfhAKMUQ"></SCRIPT>
2019/01/26 (Sat) 17:36:43
管理人さん、
綿密な情報を有難うございます。
轍V396のインストールとv3 Javaバージョンアップを試みます。
今、轍V396ダウンロードしました。
取り急ぎ、お礼まで。
なお、私は「ねんでぶろぐ」という主体のはっきりしないサイト
https://nendeb.com/276
の案内に従って、KEYを取得しましたが、
ホントに正確なKEYが取得できたのか、
カード番号記入についても不安を持ってます。
また、セキュリティ確保の為のサイト指定に「"ドメイン"」の様に「"」で囲わず指定してしまいました。
これは修正の必要ありでしょうか。
2019/01/27 (Sun) 17:11:10
本木さん
出来ました。感謝感謝です。
グーグルマップ銚子→大原
http://www.donsaigou.com/2chohara.html
はv396で、gpxファイルから新たにhtmlファイルを作成しました。
グーグルマップ宇野港→牛窓旧港
http://www.donsaigou.com/gmunoushi2017.html
これは v3.41で作成済みのhtmlファイルにv3のapiを埋め込みました。
どちらも上手くグーグルアップが表示できました。
有難うございました。
今後ともご教示よろしくお願いします。
続いて教えて欲しいのですが、
１) v3.41で作成済みのhtmlファイルを一つ一つapiを埋め込むのでは無く、まとめて埋め込む方法というのは、有りますでしょうか。
２）今後の航海でのway,point、ルート、トラックをグーグルマップで表示する為の作業は、どの様な方法がベストでしょうか。
今までは
ハンディGPS→カシミールGDB→轍→HTMLをエクスポート
Re: グーグルマップ表示 - 管理人
2019/01/27 (Sun) 21:02:42
良かったですねー。 私もほっとしました。 何せ私の経験の範疇でしかお答え出来なかったので心配しておりました。
ご質問の件ですが；
1)について、私の場合はWeb Siteにアップした全てのhtmlファイルをFFTPでPCにダウンロードし、これらを フリーソフトの TextSS を使って一挙に書き換え、その後は修正済みのhtmlファイルを再度FFTPでWeb Siteにアップしました。
このソフトは同じディレクトリ内の複数のファイルを指定し、その中の特定データ(行)を探し、合致したら指定のデータに書き換えてくれます。 私はこれで300件以上のファイルを書き換えました。
但し、検索対象の元データーは轍のバージョンによって異なるので予め調べておく必要があります。 新データは今回成功した API Keyを含む行となります。
２）これから作成するマップファイルですが、轍ソフトと同じディレクトリに template.htmlがありますので、ここをNote Pad等のテキストエディタで開き、先と同様に API Keyを含む行に書き換えることで自動的にAPI Keyを含むhtmlファイルが生成されます。
以上です。
もし、今後もご相談があればメールの方が宜しいと思います。
宜しければ下記サイトの Contact Us にメールアドレスを投稿戴ければ、私からもメールアドレスを送付致します。この投稿は公開されません。 また、住所等、全ての欄に記入する必要はありません。
http://www.bay-cycle.jp/