Angular-google-maps: La fenêtre d'informations élégante ne s'affiche pas

Créé le 27 nov. 2017 · 4Commentaires · Source: SebastianM/angular-google-maps

J'utilise le code ci-dessous pour afficher une fenêtre d'informations élégante

     <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>

Mais même si je clique sur la fenêtre d'informations sur le marqueur, cela ne s'affiche pas. Aussi par défaut si je le mets directement dans la carte, il ne s'affiche toujours pas. S'il vous plaît laissez-moi savoir si je fais quelque chose de mal ici.

J'utilise les packages ci-dessous

agm/core : "^1.0.0-beta.2",
agm/snazzy-info-window : "^1.0.0-beta.2",
angulaire/noyau : "^4.4.6"
snazzy-info-window : "^1.1.0"

Source

supran2811

Commentaire le plus utile

Résolu pour moi !
Le redémarrage de ng serve recharge .angular-cli.json, et donc charge les fichiers css.

infowindow est maintenant rendu dans la carte !

espérons que cela résoudra votre problème aussi.
(4heures sur ces bugs, pour un redémarrage !!!)

vincent-ledu le 29 nov. 2017

🎉2 👍2

Tous les 4 commentaires

Bonjour,
J'ai le même problème, mais je remarque un petit X et le contenu dans le coin supérieur gauche de la carte (voir pièce jointe).
Probablement un problème de style CSS.
mon code :

<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, déclarations de style :

      "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"
      ],

Dépendances :

"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"
  },

bugreport-agm-snazzy

vincent-ledu le 29 nov. 2017

Résolu pour moi !
Le redémarrage de ng serve recharge .angular-cli.json, et donc charge les fichiers css.

infowindow est maintenant rendu dans la carte !

espérons que cela résoudra votre problème aussi.
(4heures sur ces bugs, pour un redémarrage !!!)

vincent-ledu le 29 nov. 2017

🎉2 👍2

Il s'agit d'un problème de support qui ne représente pas un bogue ou une demande de fonctionnalité concrète, donc je ferme ce problème. N'hésitez pas à discuter ci-dessous ou à utiliser la salle de discussion officielle sur Gitter : https://gitter.im/SebastianM/angular2-google-maps