Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Snazzy info window not showing #1244

Closed
supran2811 opened this issue Nov 27, 2017 · 4 comments
Closed

Snazzy info window not showing #1244

supran2811 opened this issue Nov 27, 2017 · 4 comments

Comments

@supran2811
Copy link

supran2811 commented Nov 27, 2017

Iam using below code to show snazzy info window

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

But even if i click on the marker info window doesn't comes up. Also by default if i put it directly inside map still it doesnt show. Please let me know if iam doing something wrong here.

Iam using below packages

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

@vincent-ledu
Copy link

vincent-ledu commented Nov 29, 2017

Hello,
I have the same issue, but I notice a small X and the content in the upper left corner of the map (see attachment).
Probably css style issue.
my 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, style declarations:

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

"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
Copy link

Solved for me!
Restarting ng serve reloads .angular-cli.json, and so load css files.

infowindow is now rendered in the map!

hope that solve your issue too.
(4hours on that bugs, for a restart!!!)

@sebholstein
Copy link
Owner

This is an support issue that doesn't represent a bug or a concrete feature request, so I'm closing this issue. Feel free to chat below or use the official chat room on Gitter: https://gitter.im/SebastianM/angular2-google-maps

@fahmikudo
Copy link

i think css from @agm/snazzy-info-window not to import yet @vincent-ledu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants