Recientemente comencé con ng2. Así que creé un proyecto usando angular-cli, luego me di cuenta de que necesitaba algunos módulos de terceros. Como Google maps api, lodash, jquery...etc. Conozco los conceptos básicos de Typescript, pero ¿cómo uso estos módulos en una aplicación Angular2? Además, quiero usar solo la biblioteca, por ejemplo, la API de Google Maps, no ningún módulo/componente ng2 existente que alguien más haya creado sobre la API de Google Maps, por el bien del aprendizaje.
Anteriormente, con solo JS, incluiría el archivo js y haría referencia a la documentación de la API para saber a qué métodos hacer referencia y crear mi aplicación. Ahora con Angular2, ¿qué pasos debo seguir para hacer lo mismo?
Según mi investigación, parece que primero instalé los archivos de script de tipo necesarios. así que para los mapas de Google hice npm install --save @types/google-maps . Ahora, ¿necesito importar este módulo a mi aplicación angular incluyéndolo en app.module.ts? ¿En la matriz de importaciones? ¿O ahora está disponible a nivel mundial?
Una fuente mencionó instalarlo con npm y en mi angular-cli.json, incluida una referencia a esa biblioteca en la matriz de scripts. al igual que:
"scripts": ['./node_modules/googlemaps/googemaps.min.js'],¿Qué método usar para instalar la API de Google Maps? Creo que Typescript podría ser el camino a seguir, ya que el resto de la aplicación Angular se escribirá en Typescript.
Ahora en mi app.component.ts, quiero crear un mapa simple usando el mecanografiado que instalé. ¿Cómo lo haría? La API de Google Maps dice que cree una nueva instancia del mapa así.
var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, scrollwheel: false, zoom: 8 });¿Cómo haría eso con la versión mecanografiada de Googlemaps que acabo de instalar?
¿Una versión mecanografiada de Googlemaps tendría todos los mismos métodos que la API original? ¿Los mecanografiados de bibliotecas JS populares tienen un sitio de documentación al que puedo hacer referencia?
El proyecto agm señalado por @Steve G. brinda un buen punto de partida, pero por alguna razón (como administrar su propia política de solicitud) es posible que desee crear su propia envoltura con tipo. Aquí cómo lo hice con Angular Cli:
Primer paso :
npm i --save @types/googlemaps En segundo lugar, agregue los tipos a su tsconfig.app.json :
"types": ["googlemaps"]Finalmente escribe tu mecanografiado:
//nothing to import here //Replace this by anything without an ID_KEY const getScriptSrc = (callbackName) => { return `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=${callbackName}`; } export class GMapService { private map: google.maps.Map; private geocoder: google.maps.Geocoder; private scriptLoadingPromise: Promise<void>; constructor() { //Loading script this.loadScriptLoadingPromise(); //Loading other components this.onReady().then(() => { this.geocoder = new google.maps.Geocoder(); }); } onReady(): Promise<void> { return this.scriptLoadingPromise; } initMap(mapHtmlElement: HTMLElement, options: google.maps.MapOptions): Promise<google.maps.Map> { return this.onReady().then(() => { return this.map = new google.maps.Map(mapHtmlElement, options); }); } private loadScriptLoadingPromise() { const script = window.document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.defer = true; const callbackName: string = 'UNIQUE_NAME_HERE'; script.src = getScriptSrc(callbackName); this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => { (<any>window)[callbackName] = () => { resolve(); }; script.onerror = (error: Event) => { reject(error); }; }); window.document.body.appendChild(script); } /** Exemple of wrapped to promise API */ geocode(address: string | google.maps.GeocoderRequest): Promise<google.maps.GeocoderResult[]> { return this.onReady().then(() => { this.geocoder.geocode(typeof address == "google.maps.GeocoderRequest" ? address: {address: address}, (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => { if(status == google.maps.GeocoderStatus.OK) { return results; } else { throw new Error(status.toString()); } }); }); }); }Y entonces su componente de mapa se verá así:
@Component({ selector: 'app-gmap-wrapper', template: '<div #map style="width:400px; height:300px">loading...</div>' }) export class GMapWrapperComponent implements OnInit { @ViewChild('map') mapRef: ElementRef; constructor(private gmapService: GMapService) { } ngOnInit() { this.gmapService.initMap(this.mapRef.nativeElement, { center: {lat: 1234.1234, lng: 1234.1234}, scrollwheel: true, zoom: 8 }); } } Este código debería ser mejor sin el espacio de nombres google.maps en prefijo de todos los tipos. ¿Quizás alguna sugerencia?
También tuve problemas con AGM en componentes, luego probé nu-maps y también tuve problemas.
Así que usé javascript de google api simple y creo que es mejor: https://cloud.google.com/maps-platform/?hl=de