Google　Map　WEBアプリ実装について教えてください。

WEBアプリでグルメ投稿掲示板を作成しているのですが、掲示板の投稿をする画面の作成でお店の情報をGoogleMapに表示して投稿できるように実装したいのですが、下記コードで実行をしても画面に表示されず、解決に悩んでいます。APIキーは取得し、｛APIキー｝のところに入力しています。
どなたかご教授よろしくお願いいたします。

java
1
2<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
3<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
4<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
5
6<c:if test="${errors != null}">
7    <div id="flush_error">
8        入力内容にエラーがあります。<br />
9        <c:forEach var="error" items="${errors}">
10            ・<c:out value="${error}" /><br />
11        </c:forEach>
12    </div>
13</c:if>
14
15<label for="report_date">日付</label><br />
16<input type="date" name="report_date" value="<fmt:formatDate value='${report.report_date}' pattern='yyyy-MM-dd' />" />
17<br /><br />
18
19<label for="name">名前</label><br />
20<c:out value="${sessionScope.login_contributor.name}" />
21<br /><br />
22
23<label for="title">口コミ</label><br />
24<input type="text" name="title" value="${report.title}" />
25<br /><br />
26
27<!DOCTYPE html>
28<html lang="ja">
29
30<head>
31<meta charset="UTF-8">
32<title>Sample_GoogleMap</title>
33
34<script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja"></script>
35
36<style>
37html { height: 100% }
38body { height: 100% }
39#map { height: 100%; width: 100%}
40</style>
41</head>
42
43<body>
44<div id="map"></div>
45
46<script>
47var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
48var Options = {
49 zoom: 15,      //地図の縮尺値
50 center: MyLatLng,    //地図の中心座標
51 mapTypeId: 'roadmap'   //地図の種類
52};
53var map = new google.maps.Map(document.getElementById('map'), Options);
54</script>
55
56</body>
57</html>
58
59<label for="content">内容</label><br />
60<textarea name="content" rows="10" cols="50">${report.content}</textarea>
61<br /><br />
62
63
64<input type="hidden" name="_token" value="${_token}" />
65<button type="submit">投稿</button>
66
67

YT0014

2020/12/31 01:32

ご提示いただいたコードにて実行されている内容、実現したい結果、実際に起こっている状況を、質問を編集して、追記してください。コンソールなどにエラーが表示されているのなら、エラーの記述を、できるだけそのまま(キー情報などは、当然、隠してください)、記してください。

mtao81

2020/12/31 05:35

失礼致しました。質問内容を編集しました。コンソールにエラーは表示されていませんでした。ご指摘いただき、ありがとうございました。

YT0014

2020/12/31 05:45

希望通りの動作をしない場合は、できるだけ機能を絞って、正常動作するようにし、そこから機能を追加していき、問題点を確定させるべきです。 Optionsの指定や、Styleの設定を、一度、やめた状態での表示をお試しください。それでも表示されないなら、APIキーやMapAPIのURLをご確認ください。表示されるようなら、Options、Styleを、１つづつ戻して、お試しください。

YT0014

2020/12/31 05:54

よく見たら、htmlとかbodyとかのタグの位置がおかしいです。ブラウザで、出力されたHTMLソースを確認して、多重に記述されている !DOCTYPE、html、head、bodyタグは、削除するべきでしょう。

mtao81

2020/12/31 07:50

丁寧にご回答いただき、ありがとうございます。ブラウザからページのソースを表示でHTMLソースを確認し、重複している !DOCTYPE、html、head、bodyのタグは削除しましたが、表示されないです。Optionsの指定や、Styleの設定なしで、GoogleMapのみ表示するようにしてみましたが、それでも表示されないので、また、１からコードの内容を見直します。

YT0014

2020/12/31 09:00

そうなると、最も怪しいのはAPIキーではないかと。 googleで、ご自身のAPIキーの設定をご確認いただいたほうが良いかと。

mtao81

2020/12/31 13:53

APIキーも見直して、キー自体は誤りがなかったので、設定等引き続き探ってみます。ありがとうございます。