Google Places APIのコード

Question

私は自分のlocalhostマシンからget要求を出しています（そして私のアプリケーションはローカルホスト上にとどまります）ので、場所に関する情報を得ることができます。

ただし、CORS（XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=[placeid]&key=[key]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.）のため、Google Places APIおよび/またはChromeでこのリクエストを行うことはできません。

GoogleプレイスAPIからアクセスする方法はありますか（CORS Chromeプラグインなし）ですか？

私はちょうどVue2 & VueのリソースとJavaScriptでの単純なGETリクエストを使用しています：

this.$http.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${googleplacesPlace}&key=${googleplacesToken}`).then(response => { 
}) 

Answer 1

const PROXY_URL = 'https://cors-anywhere.herokuapp.com/'; 
const TARGET_URL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?&key=KEY' 
const URL = PROXY_URL + TARGET_URL 

あなたはCORSを回避するためにこれを使用することができます。

Answer 2

Google Maps Javascript APIでこのように解決しました。CORSを受け付けないで直接api URLを使用する代わりに、Googleマップのinstene（新しいgoogle.maps.places ...）を使用してください。

var request = { 
    location: new google.maps.LatLng(lat, lng), // gogle map latLng objet 
    radius: '5000', 
    types: ['airport'] 
}; 

let service = new google.maps.places.PlacesService(this.map); 
service.nearbySearch(request, this.Fncallback); 
    } 

Fncallback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     var place = results[i]; 
    } 
} 
}