title: It is not possible to use the google maps API with Angular 2 (http.get)
body: <p>I need some guidance in this matter. I am using Angular2 and I just want to use the google maps API (distance Matrix API) to calculate the distance between two points.</p>
  
  <p>I tested first the link at the browser (sorry the google Maps API Key is not attached):
  <a href="https://maps.googleapis.com/maps/api/distancematrix/json?origins=ABADI%C3%91O&amp;destinations=Barcelona&amp;key=YourGoogleMapsAPIKey" rel="nofollow">https://maps.googleapis.com/maps/api/distancematrix/json?origins=ABADI%C3%91O&amp;destinations=Barcelona&amp;key=YourGoogleMapsAPIKey</a></p>
  
  <p>This link works without problems, I receive the following:</p>
  
  <pre><code>{
     "destination_addresses" : [ "Barcelona, Barcelona, España" ],
     "origin_addresses" : [ "48220 Abadiño, Vizcaya, España" ],
     "rows" : [
        {
           "elements" : [
              {
                 "distance" : {
                    "text" : "617 km",
                    "value" : 617099
                 },
                 "duration" : {
                    "text" : "5h 42 min",
                    "value" : 20512
                 },
                 "status" : "OK"
              }
           ]
        }
     ],
     "status"
  </code></pre>
  
  <p>So far so good. Well, I thought this was pretty straightforward with Angular2, just using the http.get and then converting the answer from json. Well, either I made a silly mistake that I am not able to find or it is not so easy. I allways get the following error from Angular 2 when I send the corresponding request to the Google Maps API:</p>
  
  <pre><code>BrowserDomAdapter&lt;/BrowserDomAdapter.prototype.logError() angular2.dev.js:25644
  BrowserDomAdapter&lt;/BrowserDomAdapter.prototype.logGroup() angular2.dev.js:25655
  ExceptionHandler&lt;/ExceptionHandler.prototype.call() angular2.dev.js:4863
  ApplicationRef_/&lt;() angular2.dev.js:8167
  EventEmitter&lt;/EventEmitter.prototype.subscribe/schedulerFn&lt;() angular2.dev.js:7865
  SafeSubscriber&lt;/SafeSubscriber.prototype.__tryOrUnsub() rx.js:10775
  SafeSubscriber&lt;/SafeSubscriber.prototype.next() rx.js:10730
  Subscriber&lt;/Subscriber.prototype._next() rx.js:10690
  Subscriber&lt;/Subscriber.prototype.next() rx.js:10667
  Subject&lt;/Subject.prototype._finalNext() rx.js:11191
  Subject&lt;/Subject.prototype._next() rx.js:11183
  Subject&lt;/Subject.prototype.next() rx.js:11142
  EventEmitter&lt;/EventEmitter.prototype.emit() angular2.dev.js:7846
  NgZone/this._zoneImpl&lt;.onError() angular2.dev.js:8359
  NgZoneImpl/this.inner&lt;.onHandleError() angular2.dev.js:2206
  Zone&lt;/ZoneDelegate&lt;/ZoneDelegate.prototype.handleError() angular2-polyfills.js:353
  Zone&lt;/Zone&lt;/Zone.prototype.runTask() angular2-polyfills.js:285
  ZoneTask/this.invoke()
  </code></pre>
  
  <p>The function I am using is:</p>
  
  <pre><code>  getResponse(url: string) {
  
          var headers = new Headers();
          headers.append('Accept-Encoding','gzip');
  
          var requestOptions = new RequestOptions({
              method: RequestMethod.Get,
              url: url,
              headers: headers
          });
  
          return this.http.get(url)
              .do(data =&gt; this._logger.debug(data, "Get -&gt; Raw reponse: "))
              .map(res =&gt; &lt;Event[]&gt;res.json())
              .do(data =&gt; this._logger.debug(data, "Get -&gt; After json parsing: "))  // eyeball results in the console
              .catch(this._logger.handleResponseError);
  
      }
  </code></pre>
  
  <p>And now my questions:</p>
  
  <ul>
  <li>Could you give me any advice? </li>
  <li>Does anybody from you have an idea of what could happen? I tried to use an XMLHttpRequest, however, Angular2 does not seem to "like it".</li>
  </ul>