Google MapのPlace APIを使おうと思ったけどaxiosとかで呼び出そうとすると
Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=XXX&types=food&radius=50000&location=35.6514093,139.8150646&language=ja&keyword=AAA' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
といった形でCORSのエラーが表示される。
色々調べてみると、そもそもaxiosとかのリクエストではなくSDK?のようなものを使うのが正解だった。
使うのはgoogle.maps.places.PlacesService
実際に検索を実装したものがこちら
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: { lat: 35.6514093, lng: 139.8150646 },
});
var location = new google.maps.LatLng(-33.8665433,151.1956316);
service = new google.maps.places.PlacesService(map);
var request = {
location: location,
radius: '500',
type: ['restaurant']
};
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
// 配列となっていますが、1件しか返ってきません
for (var i = 0; i < results.length; i++) {
var place = results[i];
console.log(place);
}
}
}