Comment puis-je intégrer Google Maps Api à l'intérieur Angulaire à 2 composants

J'ai Angulaire à 2 composant qui est définie dans le fichier comp.ts de cette façon, comme ceci:

import {Component} from 'angular2/core';

@component({
    selector:'my-comp',
    templateUrl:'comp.html'
})

export class MyComp{
    constructor(){
    }
}

Parce que je veux le composant pour afficher une carte google map, j'ai inséré dans le fichier comp.html le code suivant:

<!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>

Ce code a été copié à partir de ce lien http://www.w3schools.com/googleAPI/google_maps_basic.asp. Le problème est que le composant ne pas montrer la carte. Qu'ai-je fait de mal?

InformationsquelleAutor nix86 | 2016-05-19

23

Oui, on peut le faire. Mais il y aurait une erreur dans le texte dactylographié compilateur, donc n'oubliez pas de déclarer implicitement google variable.
```
declare var google: any;
```
ajouter cette directive à droite après l'importation.
```
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);
  }
}
```
- Le ngOnInit m'a aidé à résoudre un getElementById problème que j'ai eu grâce ! comme le google var déclaration, je vous suggère d'utiliser [gmaps typings] (github.com/DefinitelyTyped/DefinitelyTyped/blob/master/...) il aide vraiment bien
- Je suis google is not defined dans la console
- je suppose que les cartes google maps JS n'est pas correctement importés dans votre application, vous pouvez donner un GIST/simple code de votre application ?
InformationsquelleAutor Ruslan Abramov
17

J'ai trouvé une solution. Tout d'abord, la ligne suivante:
```
<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>
```
doit être inséré dans le index.html fichier. Le code qui crée la carte doit être insérée dans le comp.fichier ts. En particulier, il doit être inséré dans une méthode particulière, à savoir "ngOnInit", qui peut être placé après le constructeur de la classe. C'est 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);
    }
}
```
Enfin, le div avec l'id "googleMap", qui va contenir la carte de google, doit être inséré dans le comp.html fichier, ce qui va ressembler à ceci:
```
<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
</body>
```
- Vous devriez mettre l'élément que vous voulez que votre carte affichée dans votre composante du modèle html. Juste pour avoir des précisions. Vous n'avez généralement pas le corps des balises dans votre modèle.
- Ce type de solution fonctionne également sur Angulaire 5.x. Super réponse, merci! Si vous utilisez cette dans cette version, vous pourriez avoir besoin npm install @types/googlemaps --save.
- je suis google is not defined dans la console
- Avez-vous importer des types? En d'autres termes, avez-vous ajouter import { } from @types/googlemaps sur votre fichier ts ?
InformationsquelleAutor nix86

-5

Utilisation 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 {}

InformationsquelleAutor nisenish

Vous devez vous connecter pour publier un commentaire.