角度2のGoogleマップは表示されません

角度2でGoogleマップを使用しようとしましたが、何もエラーはありませんが、地図が表示されないので、何が間違っているのか教えていただけますか？助けのための角度2のGoogleマップは表示されません

おかげ

index.htmlを

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>ng Events</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="node_modules/ng2f-bootstrap/dist/bootstrap.min.css"> 
     <link rel="stylesheet" href="styles.css"> 

     <!-- Polyfill(s) for older browsers --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 


     <script src="node_modules/jquery/dist/jquery.min.js"></script> 
     <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> 

<script src="http://maps.googleapis.com/maps/api/js"></script> 

<script> 
    System.import('app').catch(function(err){console.error(err);}); 
</script> 
    </head> 

    <body class="container"> 
     <app-root></app-root> 
    </body> 
    </html>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' 

    import {AppModule} from './app.module' 

    platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

import { NgModule, ApplicationRef, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' 
    import { BrowserModule } from '@angular/platform-browser' 
    //import { EventAppComponent } from './events-app.component' 

    import { AgmCoreModule} from '@agm/core' 
    import { AppComponent } from './app.component' 



    @NgModule({ 
imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({ 
     apiKey: 'AIzaSyADbB0V0Esy-BQ-Oxk9vkr_ifJqcxK3LEo' 
    }) 
    ], 
schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 
providers: [], 
declarations: [AppComponent], 
bootstrap: [AppComponent] 
    }) 
    export class AppModule 
    { 

    }

app.component.ts

1として

 import { Component } from '@angular/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 { 

     // initial center position for the map 
     lat: number = 51.678418 
     lng: number = 7.809007 
    }

出典

2017-05-02 user3213240

sebm-google-mapをインポートできませんでしたか？ https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMap-directive.html – wannadream

あなたはng2.Belowで使用するためにはSebmGoogleMapディレクティブとモジュールを追加する必要がある、と言う方法およびそれに応じて変更を加えています。

import {SebmGoogleMap} from 'angular2-google-maps/core'; 

@Component({ 
selector: 'my-map-cmp', 
directives: [SebmGoogleMap], 
styles: [` 
    .sebm-google-map-container { 
    height: 300px; 
    } 
`],

出典

2017-05-02 06:01:05

角度2のGoogleマップは表示されません

答えて

関連する問題