javascript - Llamadas de CORS y API HTTP de Google Maps

angular google-maps-api-3

Question

Esta pregunta ya tiene una respuesta aquí:

• API de Google Maps: no hay encabezado ''Access-Control-Allow-Origin'' en el recurso solicitado 1 respuesta

Estoy intentando que Angular hable con la API de autocompletado de Google Maps Places. El problema es que el servidor no permite llamadas CORS (no devuelve un encabezado Access-Control-Allow-Origin ) y las llamadas JSONP también parecen ser inútiles ya que devuelve JSON simple y no JSONP, causando un error de sintaxis.

Esto es lo que estoy intentando actualmente en una función de servicio ( _jsonp es un objeto Jsonp ):

return this._jsonp.request(url, { method: ''GET'' });

Y esto no funciona. La respuesta llega, pero Angular se bloquea porque no es JSONP sino JSON.

Esto es Loco. ¿Cómo puedo acceder a esto si CORS está deshabilitado y las llamadas JSONP no funcionan?

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=ACCESS_KEY&types=(cities)&input=ber

¿Hay alguna manera de convertir una respuesta del servidor JSON en un objeto de datos JSONP en la tubería Observable?

Answer 1

La forma admitida de llamar a la API de autocompletado de lugares desde una aplicación web es mediante la biblioteca de lugares :

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById(''map''), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo(''bounds'', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById(''infowindow-content'');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

De esa manera, no importa que las respuestas carezcan del encabezado Access-Control-Allow-Origin .

Usar la API de JavaScript de Maps de esa manera, mediante un elemento de script para cargar la biblioteca, y luego usando google.maps.Map y otros métodos google.maps.* , Es la única forma admitida. Google intencionalmente no permite hacerlo mediante solicitudes enviadas con XHR o la API Fetch.