Googlemapが表示されなくなってしまいました

###実現したいこと
googlemapを正常に表示させたい。

###現象
マップの欄だけ真っ白になる。
一度、レスポンシブ対応の記述をしたのですが、同じファイルに記述していたスムーススクロールが機能しなくなる現象が発生したため、元の一般的な記述に戻したのですが、ローカル、インターネット共にマップが表示されなくなってしまいました。

###ソースコード
html

<section id="map">
      <div id="map-canvas"></div>
</section>

</body>直前に<script async defer src="//maps.google.com/maps/api/js?key=【APIキー】_copy"></script>を記述しております。 __css__ ``` #map-canvas { width:100%; height:400px; } ``` __js__ ``` function initMap() { var uluru = {lat: 35.941507, lng: 140.138121}; var map = new google.maps.Map(document.getElementById("map-canvas"), { zoom: 18, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); } ```

いろいろ試しても原因がわかりません。
アドバイスの程よろしくお願いいたします。
###追記
GoogleMap APIの公式サイトの通りに別ファイルで以下のコードとAPIキーを記述した場合ですと正常にマップが表示されました。
しかし、対象のファイルに移動すると表示されなくなってしまいます。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=【APIキー】$callback=initMap">
    </script>
  </body>
</html>

また、上記ファイルを以下の3つに分けて外部ファイルの読み込み形式で記述すると、表示されなくなります。
index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"></script>
  </head>
  <body>
      <div id="map-canvas"></div>
      <script src="main.js"></script>
  </body>
</html>

styles.css

#map-canvas {
  width:100%;
  height:400px;
}

main.js

function initMap() {
			 var uluru = {lat: 35.941507, lng: 140.138121};
			 var map = new google.maps.Map(document.getElementById("map-canvas"), {
				 zoom: 18,
				 center: uluru
			 });
			 var marker = new google.maps.Marker({
				 position: uluru,
				 map: map
			 });
		 }

このように外部ファイル形式にした途端、マップが表示されなくなりました。
また以下のエラーメッセージが表示されるようになりました。
https://i.gyazo.com/a5f089cd03650411482d079bfb69ca29.png
どこに間違いがあるのでしょうか。もう、お手上げです。

問題解決できる方いらっしゃいましたら、どうか教えていただけないでしょうか。
以上、ご確認お願いいたします。

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

回答2件

自己解決

原因は</script>の記載漏れでした。
大変失礼いたしました。

投稿2017/11/29 07:00

narururu

総合スコア170

ローカル、インターネット共に

そもそもローカルではその記法で呼び出せません。質問文に記載されているエラーはローカルのものだけなので、ネットにアップしたものは別のエラーが出ていると思います。

投稿2017/11/28 14:39

kei344

総合スコア69398

narururu

2017/11/28 14:47

kei334さんのおっしゃる通り、ネットでは以下のエラーが表示されていました。・Failed to load resource: the server responded with a status of 404 (Not Found) ・Google Maps API error: InvalidKeyMapError ネットに公開しているファイルのAPIキーを改めて記述しなおしたりしましたが、マップが表示されません。。。

kei344

2017/11/28 15:08

Failed to load resource は具体的にどのファイルについてでしょうか。表示されていると思いますが。 InvalidKeyMapErrorはAPIキーが正しくないというエラーです。再取得しましょう。【キーの取得、認証 | Google Maps JavaScript API | Google Developers】 https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja#key

narururu

2017/11/29 01:11

APIキーを再取得して確認しましたが、マップは表示されないままです。困りました。。。

narururu

2017/11/29 01:13

再度、コンソールで確認しまいしたが、以下のエラーは消えてました。 Failed to load resource: the server responded with a status of 404 (Not Found) 現在、エラーは何も表示されておりません。

narururu

2017/11/29 01:16

マップも表示されていないままです。

narururu

2017/11/29 02:11

前はローカルでもマップが表示されていたので、とても不思議です。