google directionAPIをangular6で叩けない

以下のコードでgoogle directionAPIにAngular6を使用してアクセス使用しているのですが
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.エラーが表示されてしまいます
おそらくlocalhostでたたいているからだと思いますが何か解決策ありますでしょうか
コードなども記載していただけるとありがたいです

import { HttpClient } from '@angular/common/http';

  jsonSearch(url: string): Observable<string> {

    return this.http.get(url, { responseType: 'text' });
  }

ネットワークログ(Request Header)は以下になります

Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:4200
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

Google ConsoleのKeyの設定ですが以下のurlからキーを取得するをタップしたときに発行されるkeyを使用しております
実際にkeyを指定してブラウザでは叩けております
https://developers.google.com/maps/documentation/directions/get-api-key?hl=ja

CHERRY

2018/06/13 02:17

Google コンソールで、 API の画面で、キーの制限は、どのように設定しているのでしょうか？

yryuu

2018/06/13 02:33

キーの設定方法について記載いたしました

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

回答1件

ドキュメントを見ると戻りの型はテキストではなくデフォルトでjsonみたいですね。

where outputFormat may be either of the following values:
*json (recommended) indicates output in JavaScript Object Notation (JSON)
*xml indicates output as XML

typescript
1  jsonSearch(url: string): Observable<any> { // どういう形式がわからないのでとりあえずanyで
2    // angular6ではデフォルトでresponseTypeはjsonだった気がするけど指定するならこう。省略しても動くと思う。
3    return this.http.get(url, { responseType: 'json' }); 
4  }