- Angular : 2.4.1
- AGM(Angular Google Maps) : 1.0.0-beta.1
- include file zone.js,Reflect.js,system.js,typescript.js
loading…
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script> <script src="./js/systemjs.config.js"></script> <script> System.import('./ts/app.ts').catch(function(err){ console.error(err); }); </script> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <my-app>loading...</my-app> </div> </body> </html> (systemjs.config.js) System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'app': './src', '@angular/core': 'npm:@angular/core@2.4.1/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.1/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.1/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.1/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.1/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.1/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@2.4.1/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.1/bundles/forms.umd.js', 'rxjs': 'npm:rxjs', '@agm/core': 'npm:@agm/core@1.0.0-beta.1/core.umd.js' }, packages: { app: { main: './main.ts', defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' } } });
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NgModule, Component} from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AgmCoreModule} from '@agm/core'; @Component({ selector: 'my-app', styles: [` .sebm-google-map-container { height: 300px; } `], template: ` <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false"> <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable"> </agm-marker> </agm-map> `}) export class AppComponent { zoom: number = 15; // initial center position for the map lat: number = 35.681382; lng: number = 139.766084; markers: marker[] = [ {lat: 35.681382, lng: 139.766084, label: 'A', draggable: true}, {lat: 35.682032, lng: 139.762294, label: 'B', draggable: false}, {lat: 35.678354, lng: 139.761028, label: 'C', draggable: true } ] } interface marker { lat: number; lng: number; label?: string; draggable: boolean; } @NgModule({ imports: [ BrowserModule, AgmCoreModule.forRoot({ apiKey: 'your Google Map api key' }) ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);