title: Angular 2: Google Maps API Request: No 'Access-Control-Allow-Origin' header is present
body: <p>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:</p>
  
  <blockquote>
    <p><a href="https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&amp;key=MY_KEY" rel="nofollow noreferrer">https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&amp;key=MY_KEY</a>.
    Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:51268" rel="nofollow noreferrer">http://localhost:51268</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>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?</p>
  
  <pre><code>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&lt;any&gt; {
          const url = "https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&amp;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 =&gt; this.dataHere = r.json())
              .catch((error:any) =&gt; Observable.throw(error.json().error));
      }
  
      private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error); // for demo purposes only
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p>Bugs listed in Web Inspector:</p>
  
  <p><a href="https://i.stack.imgur.com/cccaz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cccaz.png" alt="enter image description here"></a></p>