GoogleMapsApi　検証結果

前提・実現したいこと

ドットインストールでGoogleMapsApiの講座をうけておりました。
質問期間終了のためこちらで質問をしようと考えました。
GoogleMapsApiを使用しマップを表示させたいのですが、うまく表示されません。
コードのエラーなのか、APIの取得方法が間違っているのか、教えていただきたいです。

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

エラーメッセージ
このページでは正しく表示されない。


### 該当のソースコード
HTML

ソースコード
 <!DOCTYPE html>
 <html lang="ja">
<head>
  <meta charset="utf-8">
  <title>MyMap</title>
  <style>
    #target{
      width: 500px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="target"></div> 
  <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP$key=AIzaSyCJDgfmsw8Y43ynQTt4Yk1BGdXcirRBFKE&callback=initMap" async defer></script>
  <script>
    function initMap(){
      'use strict';

        var target = document.getElementById('target');
        var map;
        var tokyo ={lat:35.681167, LNG: 139.767052};

        map = new google.maps.Map(target, {
          center: tokyo,
          zoom:8
        });


    }
  </script>
</body>
 </html>


### 試したこと

初心者のため試しようがない。

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

回答1件

ベストアンサー

google_maps_api.xmlというファイルに <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR API　KEY</string>
がありYOUR API KEYの部分を自身の使用するAPI　KEYを設定すれば動作すると思います.

API Keyを取得する方法は以下の方法を使用するといいと思います.
https://www.zenrin-datacom.net/business/gmapsapi/api_key/index.html

投稿2020/07/14 13:21

編集2020/07/14 13:40