Google Place API で CORSが出て値を取得できません。

Question

JSでAPIをいじってみようとしている初心者です。

Google Place APIで、近くのレストランをJSON形式で取得するプログラムを作成しているのですが、CORSエラーというものがでで取得できません。
コードは以下の通りです。
ちなみにURLそのままアクセスした場合、ちゃんとデータは表示されます。

function getnearsuper(){
  var request = new XMLHttpRequest();
  request.open('GET', 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=xxxx,yyyy&radius=20000&types=restaurant&language=ja&key=API_key', true);
  request.responseType = 'json';
  request.onload = function () {
    var data = this.response;
    console.log(data);
  };
  request.send(null);
}

エラー内容
エラー```
Access to XMLHttpRequest at 'URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET URL net::ERR_FAILED

Answer 1

こんにちは、
セキュリティーの問題で、他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。
なので、jsonpというものを使いますが、Google Place APIは対応していないようなので、Places Libraryというものを使えば出来るようです。

以下が参考になるかと思われます。
Places Library
Google Places API を使ってクチコミを取得する方法

Answer 2

そちらのURLをブラウザで確認できますか？
レスポンスは返却されますがエラーが出てるように見えます。

詳しくないのですがGoogle mapのapiは登録してAPIキーを取得しないとダメではないでしょうか？
パラメーターには値を入れて見てはどうでしょう？

&key=123456789...