๋ฉ์ง ์ ๋ณด ์ฐฝ์ ํ์ํ๊ธฐ ์ํด ์๋ ์ฝ๋๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
<agm-map id = "map" name="map"
[latitude]="lat"
[longitude]="lng"
(boundsChange)="boundsChange($event)"
[zoom] = "10"
[zoomControl]="false"
#map>
<agm-marker [latitude]="lat" [longitude]="lng">
<agm-snazzy-info-window [isOpen] = "true"
[maxWidth]="200" [closeWhenOthersOpen]="true"
[latitude]="lat" [longitude]="lng">
<ng-template>
My first Snazzy Info Window!
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map>
ํ์ง๋ง ๋ง์ปค ์ ๋ณด ์ฐฝ์ ํด๋ฆญํด๋ ๋ํ๋์ง ์์ต๋๋ค. ๋ํ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง๋ ์์ ์ง์ ๋ฃ์ผ๋ฉด ์ฌ์ ํ ํ์๋์ง ์์ต๋๋ค. ์ฌ๊ธฐ์ ๋ด๊ฐ ๋ญ๊ฐ ์๋ชปํ๊ณ ์๋์ง ์๋ ค์ฃผ์ญ์์ค.
์๋ ํจํค์ง๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
agm/core: "^1.0.0-beta.2",
agm/snazzy-info-window: "^1.0.0-beta.2",
๊ฐ๋/์ฝ์ด: "^4.4.6"
๋ฉ์ง ์ ๋ณด ์ฐฝ: "^1.1.0"
์๋
ํ์ธ์,
๋์ผํ ๋ฌธ์ ๊ฐ ์์ง๋ง ์ง๋์ ์ผ์ชฝ ์๋จ ๋ชจ์๋ฆฌ์ ์์ X์ ์ฝํ
์ธ ๊ฐ ํ์๋ฉ๋๋ค(์ฒจ๋ถ ํ์ผ ์ฐธ์กฐ).
์๋ง๋ CSS ์คํ์ผ ๋ฌธ์ ์ผ ๊ฒ์
๋๋ค.
๋ด ์ฝ๋ :
<agm-map [latitude]="lat" [longitude]="lon" [zoom]="zoom">
<agm-marker [latitude]="lat" [longitude]="lon">
<agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true"
>
<ng-template>
hop
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map>
app.module.ts :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// project components
import { MapComponent } from './map/map.component';
// Third Party
// Material Design Bootstrapmodule
import { MDBBootstrapModule } from 'angular-bootstrap-md';
// Angular Google Map modules
import { AgmCoreModule } from '@agm/core';
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
@NgModule({
declarations: [
AppComponent,
MapComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MDBBootstrapModule.forRoot(),
AgmCoreModule.forRoot({
apiKey: 'my google api key here (mine, not this text)'
}),
AgmSnazzyInfoWindowModule
],
schemas: [ NO_ERRORS_SCHEMA ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
.angular-cli.json, ์คํ์ผ ์ ์ธ:
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"../node_modules/snazzy-info-window/dist/snazzy-info-window.scss", // replace .css by .scss, because I set styleext to .scss. same error with .css. checked, file exists
"./styles.scss"
],
์ข ์์ฑ:
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@agm/snazzy-info-window": "^1.0.0-beta.2",
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"angular-bootstrap-md": "^5.0.5",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.2",
"snazzy-info-window": "^1.1.0",
"zone.js": "^0.8.14"
},
๋๋ฅผ ์ํด ํด๊ฒฐ!
ng serve๋ฅผ ๋ค์ ์์ํ๋ฉด .angular-cli.json์ด ๋ค์ ๋ก๋๋๋ฏ๋ก CSS ํ์ผ์ด ๋ก๋๋ฉ๋๋ค.
์ ๋ณด์ฐฝ์ด ์ด์ ์ง๋์์ ๋ ๋๋ง๋ฉ๋๋ค!
๋น์ ์ ๋ฌธ์ ๋ ํด๊ฒฐ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
(๊ทธ ๋ฒ๊ทธ์ ๋ํ 4์๊ฐ, ์ฌ์์์ ์ํด!!!)
์ด๊ฒ์ ๋ฒ๊ทธ๋ ๊ตฌ์ฒด์ ์ธ ๊ธฐ๋ฅ ์์ฒญ์ ๋ํ๋ด์ง ์๋ ์ง์ ๋ฌธ์ ์ด๋ฏ๋ก ์ด ๋ฌธ์ ๋ฅผ ๋ซ์ต๋๋ค. ์๋์์ ์์ ๋กญ๊ฒ ์ฑํ ํ๊ฑฐ๋ Gitter์ ๊ณต์ ์ฑํ ๋ฐฉ์ ์ฌ์ฉํ์ธ์. https://gitter.im/SebastianM/angular2-google-maps
@agm/snazzy-info-window์ CSS๊ฐ ์์ง @vincent-ledu๋ฅผ ๊ฐ์ ธ์ค์ง ์๋๋ค๊ณ ์๊ฐํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ฅผ ์ํด ํด๊ฒฐ!
ng serve๋ฅผ ๋ค์ ์์ํ๋ฉด .angular-cli.json์ด ๋ค์ ๋ก๋๋๋ฏ๋ก CSS ํ์ผ์ด ๋ก๋๋ฉ๋๋ค.
์ ๋ณด์ฐฝ์ด ์ด์ ์ง๋์์ ๋ ๋๋ง๋ฉ๋๋ค!
๋น์ ์ ๋ฌธ์ ๋ ํด๊ฒฐ๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
(๊ทธ ๋ฒ๊ทธ์ ๋ํ 4์๊ฐ, ์ฌ์์์ ์ํด!!!)