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 (8)
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);
});
}
}
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?
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?
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.
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í
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);
}
});
Lo hice funcionar después de encontrar la respuesta de @sideshowbarker aquí:
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.
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.
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.
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]);