Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΈΠΊΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ
<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/ΡΠ΄ΡΠΎ: "^1.0.0-Π±Π΅ΡΠ°.2",
agm/snazzy-info-window: "^1.0.0-beta.2",
ΡΠ³Π»ΠΎΠ²ΠΎΠΉ/ΡΠ΄ΡΠΎ: "^4.4.6"
ΡΠΈΠΊΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ: "^1.1.0"
ΠΡΠΈΠ²Π΅Ρ,
Π£ ΠΌΠ΅Π½Ρ ΡΠ° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Π½ΠΎ Ρ Π·Π°ΠΌΠ΅ΡΠ°Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΊΡΠ΅ΡΡΠΈΠΊ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΊΠ°ΡΡΡ (ΡΠΌ. Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅).
ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΡΠΈΠ»Π΅ 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>
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.ΠΌΠΎΠ΄ΡΠ»Ρ.ΡΡ :
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
Ρ Π΄ΡΠΌΠ°Ρ css ΠΈΠ· @agm/snazzy-info-window ΠΏΠΎΠΊΠ° Π½Π΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ @vincent-ledu
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π Π΅ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ!
ΠΠ΅ΡΠ΅Π·Π°ΠΏΡΡΠΊ ng serve ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ .angular-cli.json ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ css-ΡΠ°ΠΉΠ»Ρ.
ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ°ΡΡΠ΅!
Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠΎΠΆΠ΅ ΡΠ΅ΡΠΈΡ Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
(4 ΡΠ°ΡΠ° Π½Π° ΡΡΠΈ Π±Π°Π³ΠΈ, Π½Π° ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ!!!)