Angular-google-maps: La ventana de información elegante no se muestra

Creado en 27 nov. 2017  ·  4Comentarios  ·  Fuente: SebastianM/angular-google-maps

Estoy usando el siguiente código para mostrar una ventana de información elegante

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

Pero incluso si hago clic en la ventana de información del marcador, no aparece. También por defecto, si lo coloco directamente dentro del mapa, todavía no se muestra. Por favor, avíseme si estoy haciendo algo mal aquí.

Estoy usando los siguientes paquetes

agm/núcleo: "^1.0.0-beta.2",
agm/snazzy-info-window: "^1.0.0-beta.2",
angular/núcleo: "^4.4.6"
ventana de información elegante: "^ 1.1.0"

Comentario más útil

¡Resuelto para mí!
Al reiniciar ng serve, se recargan .angular-cli.json y, por lo tanto, se cargan los archivos css.

¡La ventana de información ahora se muestra en el mapa!

Espero que eso también resuelva tu problema.
(¡4 horas con esos errores, para reiniciar!)

Todos 4 comentarios

Hola,
Tengo el mismo problema, pero noto una pequeña X y el contenido en la esquina superior izquierda del mapa (ver archivo adjunto).
Probablemente problema de estilo css.
mi código :

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

aplicación.módulo.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, declaraciones de estilo:

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

Dependencias:

"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

¡Resuelto para mí!
Al reiniciar ng serve, se recargan .angular-cli.json y, por lo tanto, se cargan los archivos css.

¡La ventana de información ahora se muestra en el mapa!

Espero que eso también resuelva tu problema.
(¡4 horas con esos errores, para reiniciar!)

Este es un problema de soporte que no representa un error o una solicitud de función concreta, por lo que estoy cerrando este problema. Siéntase libre de chatear a continuación o use la sala de chat oficial en Gitter: https://gitter.im/SebastianM/angular2-google-maps

creo que css de @agm/snazzy-info-window no se debe importar todavía @vincent-ledu

¿Fue útil esta página
0 / 5 - 0 calificaciones