web-dev-qa-db-ja.com

Google Place API-要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン「null」はアクセスを許可されていません

Google Place APIを使用しています。

型援助のための場所の提案を取得したい。

だから、私がやったことは

var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM";      //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access
var language = "en";        //'en' for English, 'nl' for Nederland's Language


var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu";
$.getJSON(Auto_Complete_Link , function(result)
{
    $.each(result, function(i, field)
    {
        //$("div").append(field + " ");
        //alert(i + "=="+ field);
        console.error(i + "=="+ field);
    });
});

だから私が要求しているリンクは何ですか-

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM&types=geocode&language=en&input=Kh

ブラウザでこのリンクにアクセスすると、そのような出力が得られます（ckを試してください）。

11

しかし、jQueryの。getJSONまたは。ajaxで試してみると、このメッセージでリクエストがブロックされる

222。

そのため、XMLHTTPRequestは次の理由でブロックされます。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin 'null'はアクセスを許可されません。

この問題解決のために StackOverflow をチェックインし、 here 、[here 4 および here を通過しますが、私の解決策を完全に手に入れないでください。

誰でも私を啓発してもらえますか？

javascriptjqueryajaxgoogle-mapsgoogle-places-api
33
Abrar Jahin

AJAX要求は、ポート、プロトコル、および送信者と受信者のドメインが等しい場合にのみ可能です。そうでない場合は、CORSにつながる可能性があります。 CORSはクロスオリジンリソース共有の略で、サーバー側でサポートする必要があります。

ソリューション

[〜＃〜] jsonp [〜＃〜]

JSONPまたは「JSON with padding」は、異なるドメインのサーバーからデータを要求するためにWebブラウザーで実行されるJavaScriptプログラムで使用される通信技術です。これは、同一起源ポリシーのために一般的なWebブラウザーでは禁止されています。

このような何かがあなたの交尾を助けるかもしれません.. :)

$.ajax({
            url: Auto_Complete_Link, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
                alert(response);                   
            }           
        });
9
Outlooker

ここで@sideshowbarkerによる答えを見つけた後、私はそれを機能させました：

REST API

そして、このアプローチを使用して動作させました：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=500&key=[API KEY]"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.json())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

詳細については、上記のリンクの回答をご覧ください。

6
Sgedda

GoogleはAPIクライアントライブラリを提供します。

<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>

APIパスとパラメーターを指定すると、Google APIリクエストを実行できます。

var restRequest = gapi.client.request({
  'path': 'https://people.googleapis.com/v1/people/me/connections',
  'params': {'sortOrder': 'LAST_NAME_ASCENDING'}
});

ライブラリはGoogleドメインから提供されるため、CORSの問題なしにGoogle APIを安全に呼び出すことができます。

CORSの使用方法に関するGoogleドキュメント。

4
S.D.

わかりましたので、これは私たちがjavascriptでそれを行う方法です... googleはこれのための独自の機能を持っています....

リンク： https://developers.google.com/maps/documentation/javascript/places#place_search_requests

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

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

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

誰もが場所IDにアクセスしたいと思っています。これが私たちのやり方です。 var place = results[i]; u好きになりたい

console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
4
Subendra Sharma

Javascriptファイルと同じサーバー上にPHPファイルを作成し、cURLを使用してGoogleからデータを取得し、jsファイルに返送することで、問題を解決できました。

PHPファイル

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://maps.googleapis.com/maps/api/place/textsearch/xml?query=" . $_POST['search'] . "&key=".$api);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

Javascriptファイル

var search = encodeURI($("#input_field").val());
$.post("curl.php", { search: search }, function(xml){
  $(xml).find('result').each(function(){
    var title = $(this).find('name').text();
    console.log(title);
  });
});

このソリューションでは、CORSエラーは発生しません。

4
Eric Reynolds

このようなGoogleマップAPIにアクセスしました

    $scope.getLocationFromAddress = function(address) {
    if($scope.address!="Your Location"){
        $scope.position = "";
        delete $http.defaults.headers.common['X-Requested-With'];
        $http(
                {
                    method : 'GET',
                    url : 'https://maps.googleapis.com/maps/api/geocode/json?address='+ address+'&key=AIzaSyAAqEuv_SHtc0ByecPXSQiKH5f2p2t5oP4',

                }).success(function(data, status, headers, config) {

            $scope.position = data.results[0].geometry.location.lat+","+data.results[0].geometry.location.lng;                              
        }).error(function(data, status, headers, config) {
            debugger;
            console.log(data);
        });
    }
}
1
lakme.1989

こんにちは、

Googleの距離行列を試してください

    var Origin = new google.maps.LatLng(detectedLatitude,detectedLongitude);       
    var destination = new google.maps.LatLng(latitudeVal,langtitudeVal);
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [Origin],
        destinations: [destination],
        travelMode: 'DRIVING',            
        unitSystem: google.maps.UnitSystem.METRIC,
        durationInTraffic: true,
        avoidHighways: false,
        avoidTolls: false
      }, response_data);

      function response_data(responseDis, status) {
      if (status !== google.maps.DistanceMatrixStatus.OK || status != "OK"){
        console.log('Error:', status);
        // OR
        alert(status);
      }else{
           alert(responseDis.rows[0].elements[0].distance.text);
      }
  });

JSONPを使用している場合、CONSOLEでステートメントの欠落エラーが発生することがあります。

このドキュメントを参照してください ここをクリック

0
Nadimuthu Sarangapani