Google Map Place APIをJavaScriptで利用する(nearbysearch編)

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);
        } 
    }
}


SNSでシェア

関連記事