javascript - cities - google maps places examples

API de Google Place: no hay un encabezado ''Access-Control-Allow-Origin'' en el recurso solicitado. Por lo tanto, el origen ''nulo'' no tiene acceso permitido

Question

Esta pregunta ya tiene una respuesta aquí :

Cerrado hace 7 meses .

Cómo usar CORS para implementar la solicitud de JavaScript de la API de Google Places (1 respuesta)

Estoy usando la API de Google Place.

Lo que quiero obtener una sugerencia de lugar para la ayuda de tipo.

Entonces, lo que he hecho es ...

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

Entonces, ¿en qué enlace estoy solicitando?

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

Y si voy a este enlace con el navegador, puedo obtener una salida como esta (por favor intente ck) -

Pero si intento con jQuery''s .getJSON o .ajax , obtengo mi solicitud bloqueada con este mensaje:

.

Por lo tanto, XMLHTTPRequest está bloqueado debido a:

No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, el origen ''nulo'' no tiene acceso permitido.

He revisado Home para esta solución del problema y reviso here , [aquí here y here , pero no puedo obtener mi solución perfectamente.

¿Alguien puede por favor iluminarme?

Answer 1

Accedí a la API de Google Maps así

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

Answer 2

Google proporciona la biblioteca de cliente API:

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

Puede hacer solicitudes de la API de Google por usted, dada la ruta y los parámetros de la API:

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

Dado que la biblioteca se sirve desde el dominio de Google, puede llamar con seguridad a las API de Google sin problemas de CORS.

Documentos de Google sobre cómo usar CORS.

Answer 3

Hola,

Por favor, intente con la matriz de distancia de 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);
      }
  });

Si está utilizando JSONP, a veces obtendrá un error de declaración faltante en la CONSOLA.

Por favor consulte este documento haga clic aquí

Answer 4

Las solicitudes de AJAX solo son posibles si el puerto, el protocolo y el dominio del remitente y el receptor son iguales, de lo contrario podría conducir a CORS. CORS significa intercambio de recursos de origen cruzado y debe ser compatible en el lado del servidor.

Solución

JSONP

JSONP o "JSON con relleno" es una técnica de comunicación utilizada en programas JavaScript que se ejecutan en navegadores web para solicitar datos de un servidor en un dominio diferente, algo prohibido por los navegadores web típicos debido a la política del mismo origen.

Algo como esto podría ayudarlo a aparearse .. :)

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

Answer 5

Lo hice funcionar después de encontrar la respuesta de @sideshowbarker aquí:

No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado, al intentar obtener datos de una API REST

Y luego usó este enfoque para que funcione:

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?"))

Más información se puede encontrar en la respuesta en el enlace de arriba.

Answer 6

No hay forma en el lado del cliente de que jsonp ajax buscar la Google Place API , ni usamos jsonp (error de sintaxis :) ni encontramos el problema de cors,

La única forma en el lado del cliente es usar la Biblioteca de Google Javascript en lugar de https://developers.google.com/maps/documentation/javascript/tutorial

O puede buscar la API de Google Place en el lado del servidor y luego crear su propia API para el lado del cliente.

Answer 7

Pude resolver el problema creando un archivo PHP en el mismo servidor que mi archivo javascript. Luego, usando cURL para obtener los datos de Google y enviarlos de vuelta a mi archivo js.

Archivo 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;

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

Con esta solución no obtengo ningún error CORS.

Answer 8

ok así es como lo hacemos en javascript ... google tiene sus propias funciones para esto ...

enlace: 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]);
    }
  }
}

cualquiera quiere obtener acceso al Id de lugar y cosas así es como lo hacemos ... En la función de devolución de llamada tenemos el JSONArray de lugares devueltos por google ... En la función de devolución de llamada dentro del bucle for después de la línea var place = results[i]; puedes conseguir lo que quieras como

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