title: Integrating Angular Google Maps in Angular 4: Page reload error
body: <p>I am working with Angular 4 and Angular Google Maps.</p>
  
  <p>I followed the instructions in <a href="https://angular-maps.com/guides/getting-started/" rel="nofollow noreferrer">the getting started page</a>, but everytime I reload the page while I am on the map view, I get the error: <code>You have included the Google Maps API multiple times on this page. This may cause unexpected errors.</code></p>
  
  <p>This is the implementation of my code:</p>
  
  <ul>
  <li>map.component.html</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;agm-map [latitude]="lat" [longitude]="lng"&gt;
      &lt;agm-marker [latitude]="lat" [longitude]="lng"&gt;&lt;/agm-marker&gt;
    &lt;/agm-map&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>map.component.ts</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    import { Component, OnInit } from '@angular/core';
      
      @Component({
          selector: 'app-map',
          templateUrl: './map.component.html',
          styleUrls: ['./map.component.css']
      })
      
      export class MapComponent implements OnInit {
      
          private lat: number = 2.3522;
          private lng: number = 48.8566;
      
          constructor() { }
      
          ngOnInit() {
          }
      
      }</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>app.module.ts</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//...
  import { AgmCoreModule } from '@agm/core';
  //...
  import { MapComponent } from './map/map.component';
  //...
  
  @NgModule({
    declarations: [
    //...
    MapComponent
    ],
    imports: [
    //...
    AgmCoreModule.forRoot({
        apiKey: MY_KEY
    }),
    //...
    ],
    providers: [
    //...
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note that I don't have this error if I navigate to the map view from another view, but everytime I reload the page while I am on the map view, the error is shown in the browser console.</p>