google-maps - example - google maps angular 6
¿Cómo puedo integrar las API de Google Maps dentro de un componente Angular 2? (3)
He encontrado una solución. En primer lugar, la siguiente línea:
<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>
debe ser insertado en el archivo index.html. El código que crea el mapa debe insertarse en el archivo comp.ts. En particular, debe insertarse en un método especial, a saber, "ngOnInit", que puede colocarse después del constructor de la clase. Esto es comp.ts:
import { Component } from ''angular2/core'';
declare const google: any;
@Component({
selector: ''my-app'',
templateUrl:''appHtml/app.html'',
styleUrls: [''css/app.css'']
})
export class AppMainComponent {
constructor() {}
ngOnInit() {
let mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
}
Finalmente, el div con id "googleMap", que va a contener el mapa de google, debe insertarse en el archivo comp.html, que se verá así:
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
Tengo un componente Angular 2 que se define en el archivo comp.ts de esta manera:
import {Component} from ''angular2/core'';
@component({
selector:''my-comp'',
templateUrl:''comp.html''
})
export class MyComp{
constructor(){
}
}
Como quiero que el componente muestre un mapa de Google, inserté en el archivo comp.html el siguiente código:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Este código se ha copiado de este enlace http://www.w3schools.com/googleAPI/google_maps_basic.asp . El problema es que el componente no muestra el mapa. ¿Qué he hecho mal?
Sí, podrías hacerlo. Pero habría un error en el compilador de caracteres, así que no olvide declarar implícitamente la variable de Google.
declare var google: any;
agregue esta directiva justo después de la importación del componente.
import { Component, OnInit } from ''@angular/core'';
declare var google: any;
@Component({
moduleId: module.id,
selector: ''app-root'',
templateUrl: ''app.component.html'',
styleUrls: [''app.component.css'']
})
export class AppComponent implements OnInit {
ngOnInit() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
}
}
Utilice angular2-google-maps: https://angular-maps.com/
import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule, ApplicationRef } from ''@angular/core'';
import { AgmCoreModule } from ''angular2-google-maps/core'';
@Component({
selector: ''app-root'',
styles: [`
.sebm-google-map-container {
height: 300px;
}
`],
template: `
<sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map>
`
})
export class AppComponent {
lat: number = 51.678418;
lng: number = 7.809007;
}
@NgModule({
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: ''YOUR_GOOGLE_MAPS_API_KEY''
})
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}