在angular2應用程序中集成G​​oogle地圖 - 放置自動完成

Question

我正在使用angularJS 2，並且我正試圖按照this指南添加google maps autocomplete。

我也安裝了角度地圖從https://angular-maps.com，並能夠顯示一個簡單的基本谷歌地圖。

在我的index.html文件我已經插入：

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&libraries=places&callback=initAutocomplete"> 

我app.ts看起來是這樣的：

import {Component, provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

import { 
    MapsAPILoader, 
    NoOpMapsAPILoader, 
    MouseEvent, 
    ANGULAR2_GOOGLE_MAPS_PROVIDERS, 
} from 'angular2-google-maps/core'; 

@Component({ 
    selector: 'my-app', 
    directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES], 
    template: ` 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
    ` 
}) 
export class AppComponent 
{ 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: { lat: -33.8688, lng: 151.2195 }, 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() 
    { 
     var places = searchBox.getPlaces(); 

     if (places.length == 0) { 
      return; 
     } 

     // Clear out the old markers. 
     markers.forEach(function(marker) { 
      marker.setMap(null); 
     }); 
     markers = []; 

     // For each place, get the icon, name and location. 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function(place) 
     { 
      var icon = { 
       url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
       map: map, 
       icon: icon, 
       title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       // Only geocodes have viewport. 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
     }); 
     map.fitBounds(bounds); 
    }); 
} 

但我得到這個錯誤：

angular2-polyfills.js:332 Error: ReferenceError: google is not 
defined(…)ZoneDelegate.invoke 
@angular2-polyfills.js:332Zone.run 
@angular2-polyfills.js:227(anonymous function) 
@angular2-polyfills.js:576ZoneDelegate.invokeTask 
@angular2-polyfills.js:365Zone.runTask 
@angular2-polyfills.js:263drainMicroTaskQueue 
@angular2-polyfills.js:482ZoneTask.invoke 
@angular2-polyfills.js:434 

Answer 1

您需要確保已經爲Google地圖安裝了TypeScript聲明文件。我發現「谷歌地圖」DefinitelyTyped庫工作：

$ npm install @types/googlemaps --save-dev