見本のように全く表示されません。なぜでしょうか？

前提・実現したいこと

本日はじめて課題を頂いて、API入門にチャレンジ中です。
基本コードのときは文は表示されましたが、地図は表示されませんでした。
サンプルコードに(maps_1.html)に至っては、何も表示されません。

以下URL↓
https://www.javadrive.jp/google-maps-javascript/charset/index6.html

発生している問題・エラーメッセージ

見本のように表示されない

該当のソースコード

HTNL？
1<!DOCTYPE>
2<html lang="ja">
3  <head>
4  <meta charset="utf-8">
5    <title>Google Maps API　サンプル</title>
6  </head>
7  <body>
8    <p>瑞穂運動場です。</p>
9    
10    <div id="map" style="width:620px; height:400px"></div>
11    
12    <script type="text/javascript">
13      function initMap() {
14        var opts = {
15          zoom = 15,
16          center: new google.maps.LatLng(35.1239654,136.9417741)
17        };
18        var map = new google.maps. Map(document.getElementById("map"),opts);
19      }
20    </script>
21    
22    <script async defer src="https://googleapis.com/maps/api/js?key=AIzaSyBpAykMyyvPoqiEA0cgWMuvUe_c6ofsRZk"></script>
23    
24  </body>
25</html>

試したこと

私のタイプミスなど誤入力かと思い、お手本を丸々貼りつけても、表示されませんでした。

補足情報（FW/ツールのバージョンなど）

Windows

参考写真

行動規範の内容に同意します

回答1件

ベストアンサー

コンソール確認しますと、エラー出ています。

404なので、「存在しないURLへのリクエスト」ということになります。
このページ自体がいつ作られたものか分かりませんが、もしかしたらコードなど古い可能性があります。

現在のドキュメントと照らし合わせるか、
むしろ最新のドキュメントにあわせてコードを組み替える必要があります。

パッと見、メインのURLが違います。

https://googleapis.com/maps/api/js

https://maps.googleapis.com/maps/api/js

あと、オブジェクトの指定の仕方が構文に沿っていません。

var opts = {
          zoom = 15,  //こことか
          center: new google.maps.LatLng(35.1239654,136.9417741)
        };

提示のお手本ともここは違ってますね。

あくまで「APIのキーが正しいという前提」です。
GoogleMapも以前とは仕様が変わっていっていますので、やはり拾ったコードで何とかするより
公式のドキュメントを元に対応すべきかと思います。

投稿2020/12/21 09:35

編集2020/12/21 10:54

m.ts10806

総合スコア80875

mitrasi

2020/12/21 10:03

ご回答ありがとうございます。恥ずかしながらAPIやスクリプトは全く触ったことがないのですが、課題を終わらせなきゃいけなくて、今回はほんとに丸写ししているレベル(それさえ間違えているようですが????)基礎的な構文の作り方などは全く未学習で失礼いたしました。同期も「最初は表示されなかったけれど、コピペしたら表示された(Mac)」とは言っていたので、一応明日一にもう一度試してみようとおもいます。

m.ts10806

2020/12/21 10:06

javadriveサイトのコード丸写しでAPI KEYだけかえても404は変わりませんよ。課題を終わらせなければならないとしても、仕様にないコードは結局動かないので、ドキュメント確認して書き直すのは必至かと思います。 ※API KEYが正しく取得されたものであることを祈ります。

m.ts10806

2020/12/21 21:06

何が間違ってるのか教えてほしいですね。でないならなんの目的で個人攻撃を毎日頑張ってるのか。楽しいのかな。質問者にも失礼。

mitrasi

2020/12/21 23:48

おっしゃる通り、そのように書いておりました???? サイトにはクレジット情報の登録が必要とありましたが、無料で取得できたのは疑問ではありますが…手順においてはサイトに従っているので間違えてはいないと祈ります。今日の午前中にもう一度行ってみますが…私が不在の間になにかありましたでしょうか？???? 私がなにか不快にさせてしまっていましたら、申し訳ございません。

m.ts10806

2020/12/21 23:58

>サイトにはクレジット情報の登録が必要とありましたが、無料で取得できたのは疑問ではありますが仕様変更後にあまり利用したことがないので仕様の通りというところですが、取得だけは無料です。ただ、閲覧数（実行数とイコールかな）の制限があるというところ。どのように取得されたかは確認すべきですが、公式から取得できたKEYなのであれば問題ありません。 >今日の午前中にもう一度行ってみますが…私が不在の間になにかありましたでしょうか？???? 私がなにか不快にさせてしまっていましたら、申し訳ございません。いえ、[12/22 06:06 ]の私のコメントは無言低評価した方への通告です。毎日、日課のように無言で低評価をするストーカー集団がいるようで。質問者にも失礼な行為をしているということに気づかないんだろうかという疑問ですね。ただの不純な迷惑行為。

mitrasi

2020/12/23 01:56

公式から取得できたので、そこは問題ないかと思います。しかし、代わりに制限があるのですね。情報ありがとうございます！せっかくご教授頂いたのに申し訳ないのですが、jsの基礎もわからずAPIは少し早かったとの方針となり、ひとまずAPIはまた今度になりました！一応今回教えて頂いたことを頭の中に入れながら、再挑戦してみましたがどこをどう新しくバージョンアップしたらよいか苦戦したので、jsを勉強した後にまたリトライしたいと思います！そのような方々もいらっしゃるのですね、回答者さんにも失礼な行為だと思いますので、発見次第適正な対処をさせて頂きます。

m.ts10806

2020/12/23 03:23

基本とドキュメントの活用さえ覚えれば大抵はなんとかなるのでこれを気に振り返ってみてください。 >そのような方々もいらっしゃるのですね、はい。そのほとんどは真っ向から指摘されて沸騰して問題の本質から離れていった不純な人たちなので、私の活動には影響しないし記憶にも残ってないのですが、低評価は１日にできる数の制限があるとはいえ、誰が低評価したかはユーザーから見えないのが難点です。だから「こいつ嫌い」程度の動機でできますが、それって「評価」の本質とはかけ離れた使い方をしているので、やはり不純で、プログラミングに関わってほしくないとすら思います。きちんと指摘できる人は誰に対しても指摘されてますし、私もそれを受け入れ、改善する姿勢はあるのですけどね。正しく指摘できない人は評価に手を出すべきではないです。運営には相談はしてますが、そういうひとたちは運営から何かしら注意を受けたとしても聞かないでしょうね。退会させられたらまた登録すればいいと思ってるでしょうし。低評価するためには一定の活動が必要なんですけど、低評価したいために活動してるってどういう理屈？と理解には苦しみます。

行動規範の内容に同意します