質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1083閲覧

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

mitrasi

総合スコア49

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/12/21 09:11

前提・実現したいこと

本日はじめて課題を頂いて、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

参考写真

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

コンソール確認しますと、エラー出ています。
イメージ説明

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

総合スコア80731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問