How to remove the script from the index.html to use useGoogleGeoApi ?

[TrackFR]

I tried to removed the script of index.html

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=myKey&libraries=places"></script>

to

  public userSettings5: any = {
    geoCountryRestriction: ['fr'],
    geoTypes: ['address'],
    showSearchButton: false,
    showRecentSearch: false,
    useGoogleGeoApi: true
  };

But not work

[tanoy009]

hi, without the google map script mentioned in index.html, the directive won't work with Google API. If u want to remove the script then u have to implement your own API which u can give the link to the directive to use. please refer demo and read the document.

[TrackFR]

Exactly, it's because I use agm at the same time, so with the src script I have a conflict with 2 google API called at the same time.

 AgmCoreModule.forRoot({
  apiKey: 'mykey'
 }),
//ng4-geoautocomplete
 Ng4GeoautocompleteModule.forRoot()

[ishan123456789]

I had the same issue because two scripts were being loaded at the same time which was causing the issue.

[wilgert]

I was able to make it work by not loading the Google Maps API in AgmCoreModule. If you put this in your AppModule, AgmCoreModule does not load Google Maps API:

providers: [
    ...BROWSER_GLOBALS_PROVIDERS, {provide: MapsAPILoader, useClass: NoOpMapsAPILoader}
],

Of course you have to leave the <script> in index.html. This is a suboptimal but easy solution to make the two libraries cooperate.

[TrackFR]

Unfortunately I need the agm core to display a Google map (with markers, ...) on another page of my website, so ..

[wilgert]

Same here, but for me that is still working with this setup.

[TrackFR]

Always the same mistake

app.module.ts

    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyDH1n-WWp1WgfRbK17-J0-BTlkF7i_czMg'
    }),
    //ng4-geoautocomplete
    Ng4GeoautocompleteModule.forRoot(),
    //infinite scroll
    InfiniteScrollModule
  ],

page.component.html

<ng4geo-autocomplete [userSettings]="userSettings6" (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>

<agm-map class="agmstart" [latitude]="46.227638" [longitude]="2.213749" [zoom]="4">
  <agm-marker *ngFor="let user of users" [latitude]="user.lat" [longitude]="user.lng">
    <agm-info-window>
      <strong>{{user.name}}</strong>
      <img src="{{user.imageUrl}}" alt="{{user.name}}" width=50>
      <strong>adresse</strong>
      <span>{{user.address}}</span>
      <span>{{user.zipcode}} - {{user.city}}</span>
      <strong>description</strong>
      <span>{{user.desc}}</span>
      <a [routerLink]="['/cavists/', user.$key]">
        <strong>Voir</strong>
      </a>
    </agm-info-window>
  </agm-marker>
</agm-map>

This code got me api conflict when i call ng4-geoautcomplete and agm-core same time

Console screen error

@wilgert I understand your logic but I can not put the prodiver in the app.module.ts

Maybe i can put

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDH1n-WWp1WgfRbK17-J0-BTlkF7i_czMg&libraries=places"></script>

in

 geoLocDetailServerUrl: 'api',
 geoPredictionServerUrl: 'https://www.XXX.com/api/v4/search-location',
 geoLatLangServiceUrl: 'https://www.XXX.com/api/v4/geocode',

?