I am trying to make an Google Maps API JavaScript request from a localhost using Angular 2's HTTP.get() method. In my request I need to add headers and I attempted to do this, but I received this error notice:
https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:51268' is therefore not allowed access.
All I want to do is enter in a city name and have the response return with a JSON object. Can someone please explain what I am doing wrong here?
import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class SearchService {
dataHere: Object;
errorMessage: String;
constructor(private http: Http) { }
getPlaces(name: String): Observable<any> {
const url = "https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY";
let headers = new Headers({ 'Access-Control-Allow-Origin': '*','Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(url, options)
.map(r => this.dataHere = r.json())
.catch((error:any) => Observable.throw(error.json().error));
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
Bugs listed in Web Inspector:
