Angular-google-maps: Sie haben die Google Maps API mehrfach auf dieser Seite eingebunden

Erstellt am 2. Okt. 2016  ·  19Kommentare  ·  Quelle: SebastianM/angular-google-maps

Ich weiß, dass dieses Problem anderen passiert ist, aber ich stecke seit Tagen ziemlich fest und kann keine Lösung finden.

Hier ist mein @NgModule :

import { NgModule } from '@angular/core';
import { AgmCoreModule } from 'angular2-google-maps/core/index';

// Global vars
import appGlobals = require('./../globals');

@NgModule({
    imports:      [ AgmCoreModule.forRoot({
                        apiKey: appGlobals.googleMapsApiKey
                    }) ],
})

export class JobSearchModule {}

Hier ist mein HTML:

<div class="col-md-12 google-maps-container">
        <sebm-google-map [latitude]="mapLat"
                         [longitude]="mapLng"
                         [mapDraggable]="false"
                         [zoom]="zoom"
                         [zoomControl]="false"
                         [streetViewControl]="false"
                         (mapClick)="mapClicked($event)">
            <sebm-google-map-marker [latitude]="mapLat"
                                    [longitude]="mapLng">

            </sebm-google-map-marker>
        </sebm-google-map>
    </div>

Und hier ist ein Screenshot von dem, was ich in meinem HTML-Head-Tag habe:

screen shot 2016-10-02 at 13 36 15

Es sieht also so aus, als würde es die API wirklich zweimal enthalten, aber ich weiß nicht warum oder wie.

MapsAPILoader

Hilfreichster Kommentar

@escarabin Ich hatte ein ähnliches Problem. Versuche dies.

Sie müssen Karten in das Root-Anwendungsmodul importieren, also gehen Sie so vor:

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...,
        AgmCoreModule.forRoot({
            apiKey: 'some key here'
        })
    ],

Aber wenn Sie Karten in einer Komponente verwenden möchten, die nicht zu diesem Modul gehört, gehen Sie zu diesem Modul und tun Sie Folgendes:

@NgModule({
    declarations: [
        SomeComponentThatHasMapsInItsHtml,
        .....
    ],
    imports: [
        AgmCoreModule,
        ...
    ],

Alle 19 Kommentare

@escarabin das Problem ist, dass Sie das Modul in ein untergeordnetes Modul Ihrer App importieren. Sie müssen es in Ihr Root-Modul der App importieren. Das Schließen, da dies kein Fehler ist. Fühlen Sie sich frei, wieder zu öffnen. Vielen Dank!

Hallo @SebastianM! Danke für den Rat, aber ich stehe immer noch vor dem Problem.
Hier meine Konfiguration:

  • Ich muss die angle2-google-maps in einem untergeordneten Modul namens job-search-module.ts verwenden
  • Ich habe ein shared.module.ts , das alle Komponenten und Module enthält, die ich in mehreren anderen Modulen verwende.
  • Mein Root-Modul ist app.module.ts

Wenn ich jetzt AgmCoreModule in meine app.module.ts importiere, sehe ich einen Fehler, der besagt, dass sebm-google-map kein Teil meiner job-search-module.ts ist und keine Karte angezeigt wird.
Wenn ich AgmCoreModule entweder in shared.module.ts oder in job-search.module.ts importiere, sehe ich _"Sie haben das Google Maps-API mehrfach auf dieser Seite eingebunden"_.

Was sollte ich dann tun?

PS: Ich habe keine Möglichkeit, das Problem erneut zu öffnen

jeder? :( Ich stecke gerade ziemlich fest damit

@escarabin Ich hatte ein ähnliches Problem. Versuche dies.

Sie müssen Karten in das Root-Anwendungsmodul importieren, also gehen Sie so vor:

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...,
        AgmCoreModule.forRoot({
            apiKey: 'some key here'
        })
    ],

Aber wenn Sie Karten in einer Komponente verwenden möchten, die nicht zu diesem Modul gehört, gehen Sie zu diesem Modul und tun Sie Folgendes:

@NgModule({
    declarations: [
        SomeComponentThatHasMapsInItsHtml,
        .....
    ],
    imports: [
        AgmCoreModule,
        ...
    ],

Um hinzuzufügen, warum ich denke, dass dies funktioniert, liegt daran, dass Sie das Ding im Stammverzeichnis Ihrer Anwendung registrieren müssen (damit Google-Zeug mit Ihrem Schlüssel initialisiert wird).

Aber Sie verwenden <seb-maps-smth-smth> in einer Komponente, die zu einem anderen Modul gehört, also müssen Sie das AgmCoreModule als Import hinzufügen, damit es eine exportierte Komponente in diesem Modul finden kann, die den Selektor seb-maps-smth-smth hat.

Hoffe das löst das Problem

Vielen Dank für die Mühe @EddyP23 , aber leider sehe ich den Fehler immer noch ... funktioniert es wirklich auf Ihrer Seite mit [email protected] ? Es ist sehr seltsam.

Das Problem ist nicht der Fehler selbst, sondern verursacht auch eine Reihe völlig zufälliger Fehler auf der Seite ...

Außerdem redest du von <seb-maps-smth-smth> . Ich verwende dieses Tag nicht und sehe es nicht in den Dokumenten. Ich verwende <sebm-google-map>

@escarabin Ja, ich verwende Version 0.15.0.

Mit etw etw meine ich jeden seb-maps-{placeholder} Selektor. Mein HTML sieht so aus:

<sebm-google-map #sebmGoogleMap
        [latitude]="myVar1"
        [longitude]="myVar2"
        (idle)='onIdle()'
        [zoom]='mapZoomLevel'
        [streetViewControl]='false'
        >
            <sebm-google-map-marker #marker
                [latitude]="myVar3"
                [longitude]="myVar4"
                ></sebm-google-map-marker>
    </sebm-google-map>

Welchen Fehler sehen Sie jetzt? Ich glaube, dass dieses Setup funktionieren sollte. Könnten Sie mehr Code teilen?

Ich sehe immer noch den Fehler "Sie haben das Google Maps-API mehrfach auf dieser Seite eingebunden".

Mein HTML sieht so aus:

<sebm-google-map #sebmGoogleMap
                         [latitude]="mapLat"
                         [longitude]="mapLng"
                         [mapDraggable]="false"
                         [zoom]="zoom"
                         [zoomControl]="false"
                         [streetViewControl]="false"
                         (mapClick)="mapClicked($event)">
            <sebm-google-map-marker [latitude]="mapLat"
                                    [longitude]="mapLng">

            </sebm-google-map-marker>
</sebm-google-map>

Hier ist mein untergeordnetes Modul:

import { NgModule } from '@angular/core';
import { jobSearchRouting } from './job-search.routes';
import { SharedModule }   from './../shared/shared.module';
import { AgmCoreModule } from 'angular2-google-maps/core/index';

// Components
import { SearchComponent } from './components/search.component';

@NgModule({
    declarations: [ SearchComponent ],
    imports:      [ jobSearchRouting,
                    AgmCoreModule,
                    SharedModule ]
})

export class JobSearchModule {}

und mein app.module.ts @NgModule :

@NgModule({
    declarations: [ AppComponent,
                    HomeComponent,
                    HeaderComponent,
                    FooterComponent,
                    PostComponent,
                    ClubComponent,
                    CandidateSignUpComponent,
                    PostPreviewComponent,
                    SignInComponent,
                    ProfileSubHeaderComponent,
                    RecruiterPromoComponent,
                    NotificationsComponent ],
    imports:      [ RouterModule,
                    HttpModule,
                    SharedModule,
                    BrowserModule,
                    AgmCoreModule.forRoot({
                        apiKey: appGlobals.googleMapsApiKey
                    }),
                    MetaModule.forRoot(metaConfig),
                    routing ],
    providers:    [ NotificationsService,
                    MetaService ],
    bootstrap:    [ AppComponent ],
})

Hm.. Das ist komisch. Sind Sie sicher, dass Sie keine Skript-Tags haben, die Google Maps irgendwo (z. B. in index.html ) auf die alte Weise importieren? Etwas wie das:

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Ich würde auch alle Verwendungen von AgmCoreModule durchgehen, um zu überprüfen, ob Sie es nicht versehentlich zweimal an einem anderen Ort importieren.

Ich habe auch dieses Problem. Ich habe das AgmCoreModule.forRoot({...}) im app.module für meine Komponenten hinzugefügt und nach mehreren Google-API-Aufrufen gesucht.
Gibt immer noch den gleichen Fehler zurück.

Ich habe auch dieses Problem. Ich habe auch das AgmCoreModule.forRoot({...}) im app.module für meine Komponenten hinzugefügt, und ich habe auch nach mehreren Google-API-Aufrufen gesucht.

Ok, mein Fehler, wenn es jemand anderem hier hilft - versuchen Sie, Ihr altes Skript-Tag zu löschen, anstatt es auszukommentieren. Aus irgendeinem Grund war das Kommentieren in der Vorlage nicht das Entfernen.

@EddyP23 , Was kann ich tun, wenn ich skd autocomplete und agm maps verwende?
Da es in den Index importiert