{"id":1497,"date":"2017-10-12T21:59:27","date_gmt":"2017-10-12T21:59:27","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1497"},"modified":"2017-10-12T21:59:27","modified_gmt":"2017-10-12T21:59:27","slug":"agmangular-google-maps-markers-event","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/agmangular-google-maps-markers-event\/","title":{"rendered":"AGM(Angular Google Maps) Markers Event"},"content":{"rendered":"<ul>\r\n<li>Angular : 2.4.1<\/li>\r\n<li>AGM(Angular Google Maps) : 1.0.0-beta.1<\/li>\r\n<li>include file<\/li>\r\nzone.js,Reflect.js,system.js,typescript.js\r\n<\/ul>\r\n<!--more-->\r\n<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=\"http:\/\/www.honobono-life.info\/wpeng\/wp-content\/themes\/ang\/js\/systemjs.config-1.0.0-beta.1.js\"><\/script><script>System.import('http:\/\/www.honobono-life.info\/wpeng\/wp-content\/themes\/ang\/ts\/markers-event.ts').catch(function(err){ console.error(err);  });<\/script>\r\n\r\n<div role=\"tabpanel\">\r\n  <ul class=\"nav nav-tabs\">\r\n    <li class=\"active\"><a href=\"#demo1\" data-toggle=\"tab\">demo<\/a><\/li>\r\n    <li><a href=\"#html1\" data-toggle=\"tab\">markup<\/a><\/li>\r\n    <li><a href=\"#script1\" data-toggle=\"tab\">script<\/a><\/li>\r\n  <\/ul>\r\n  <div class=\"tab-content\">\r\n    <div class=\"tab-pane active\" id=\"demo1\">\r\n\r\n<my-app>loading&#8230;<\/my-app>\r\n\r\n    <\/div>\r\n    <div class=\"tab-pane\" id=\"html1\">\r\n<pre>\r\n&lt;html>\r\n &lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    &lt;script src=\"https:\/\/unpkg.com\/zone.js@0.6.21\/dist\/zone.js\">&lt;\/script>\r\n    &lt;script src=\"https:\/\/unpkg.com\/reflect-metadata@0.1.3\/Reflect.js\">&lt;\/script>\r\n    &lt;script src=\"https:\/\/unpkg.com\/systemjs@0.19.31\/dist\/system.js\">&lt;\/script>\r\n    &lt;script src=\"https:\/\/unpkg.com\/typescript@1.8.10\/lib\/typescript.js\">&lt;\/script>\r\n    &lt;script src=\".\/js\/systemjs.config.js\">&lt;\/script>\r\n    &lt;script>\r\n      System.import('.\/ts\/app.ts').catch(function(err){ console.error(err);  });\r\n    &lt;\/script>\r\n    &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">\r\n    &lt;link rel=\"stylesheet\" href=\"css\/styles.css\">\r\n  &lt;\/head>\r\n  &lt;body>\r\n    &lt;div class=\"container\">\r\n      &lt;my-app>loading...&lt;\/my-app>\r\n    &lt;\/div>\r\n  &lt;\/body>\r\n&lt;\/html>\r\n\r\n(systemjs.config.js)\r\nSystem.config({\r\n  transpiler: 'typescript',\r\n  typescriptOptions: {\r\n    emitDecoratorMetadata: true\r\n  },\r\n  paths: {\r\n    'npm:': 'https:\/\/unpkg.com\/'\r\n  },\r\n  map: {\r\n    'app': '.\/src',\r\n    '@angular\/core': 'npm:@angular\/core@2.4.1\/bundles\/core.umd.js',\r\n    '@angular\/common': 'npm:@angular\/common@2.4.1\/bundles\/common.umd.js',\r\n    '@angular\/compiler': 'npm:@angular\/compiler@2.4.1\/bundles\/compiler.umd.js',\r\n    '@angular\/platform-browser': 'npm:@angular\/platform-browser@2.4.1\/bundles\/platform-browser.umd.js',\r\n    '@angular\/platform-browser-dynamic': 'npm:@angular\/platform-browser-dynamic@2.4.1\/bundles\/platform-browser-dynamic.umd.js',\r\n    '@angular\/http': 'npm:@angular\/http@2.4.1\/bundles\/http.umd.js',\r\n    '@angular\/router': 'npm:@angular\/router@2.4.1\/bundles\/router.umd.js',\r\n    '@angular\/forms': 'npm:@angular\/forms@2.4.1\/bundles\/forms.umd.js',\r\n    \r\n    'rxjs': 'npm:rxjs',\r\n    '@agm\/core': 'npm:@agm\/core@1.0.0-beta.1\/core.umd.js'\r\n  },\r\n  packages: {\r\n    app: {\r\n      main: '.\/main.ts',\r\n      defaultExtension: 'ts'\r\n    },\r\n    rxjs: {\r\n      defaultExtension: 'js'\r\n    }\r\n  }\r\n});\r\n<\/pre>\r\n    <\/div>\r\n\r\n    <div class=\"tab-pane\" id=\"script1\">\r\n\r\n<div ng-non-bindable><pre>\r\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\r\nimport { NgModule, Component} from '@angular\/core';\r\nimport { BrowserModule }  from '@angular\/platform-browser';\r\nimport { AgmCoreModule} from '@agm\/core';\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  styles: [`\r\n    .sebm-google-map-container {\r\n       height: 600px;\r\n     }\r\n  `],\r\n  template: `\r\n    &lt;agm-map \r\n      [latitude]=\"lat\"\r\n      [longitude]=\"lng\"\r\n      [zoom]=\"zoom\"\r\n      [disableDefaultUI]=\"false\"\r\n      [zoomControl]=\"false\">\r\n      &lt;agm-marker \r\n          *ngFor=\"let m of markers; let i = index\"\r\n          (markerClick)=\"onMarkerclickd(m)\"\r\n          [latitude]=\"m.lat\"\r\n          [longitude]=\"m.lng\"\r\n          [label]=\"m.label\"\r\n          [title]=\"m.title\"\r\n          [markerDraggable]=\"m.draggable\">\r\n      &lt;\/agm-marker>\r\n    &lt;\/agm-map>\r\n`})\r\nexport class AppComponent {\r\n  zoom: number = 15;\r\n  \/\/ initial center position for the map\r\n  lat: number = 35.681382;\r\n  lng: number = 139.766084;\r\n  onMarkerclickd(m: marker) {\r\n    this.zoom = 17;\r\n    this.lat = m.lat;\r\n    this.lng = m.lng;\r\n  }\r\n  markers: marker[] = [\r\n    {lat: 35.681382,\r\n     lng: 139.766084,\r\n     title: 'Tokyo Station',\r\n     label: '1',\r\n     draggable: true},\r\n    {lat: 35.682032,\r\n     lng: 139.762294,\r\n     title: 'wadakuramon',\r\n     label: '2',\r\n     draggable: false},\r\n    {lat: 35.678354,\r\n     lng: 139.761028,\r\n     title: 'babasakimon',\r\n     label: '3',\r\n     draggable: true }\r\n  ]\r\n}\r\ninterface marker {\r\n  lat: number;\r\n  lng: number;\r\n  label?: string;\r\n  title: string;\r\n  draggable: boolean;\r\n}\r\n\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    AgmCoreModule.forRoot({\r\n      apiKey: 'your Google Map api key'\r\n    })\r\n  ],\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule { }\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n<\/pre><\/div>\r\n    <\/div><!-- \/.tab-pane -->\r\n\r\n  <\/div><!-- \/.tab-content -->\r\n<\/div><!-- \/.tabpanel -->\r\n","protected":false},"excerpt":{"rendered":"<p>Angular : 2.4.1 AGM(Angular Google Maps) : 1.0.0-beta.1 include file zone.js,Reflect.js,system.js,typescript.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1497"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1497"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1497\/revisions"}],"predecessor-version":[{"id":1498,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1497\/revisions\/1498"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1497"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}