How can I dismiss this warning "Google Maps already loaded outside @googlemaps/js-api-loader

[artworkjpm]

Thanks for stopping by to let us know something could be better!

---

PLEASE READ

If you have a support contract with Google, please create an issue in the support console. This will ensure a timely response.

Discover additional support services for the Google Maps Platform, including developer communities, technical guidance, and expert support at the Google Maps Platform support resources page.

If your bug or feature request is not related to this particular library, please visit the Google Maps Platform issue trackers.

Check for answers on StackOverflow with the google-maps tag.

---

Please be sure to include as much information as possible:

Environment details

1. Specify the API at the beginning of the title (for example, "Places: ...")
2. OS type and version
3. Library version and other environment information

Steps to reproduce

1. ?

Code example

Using Angular:

import { Component, Input, OnInit } from '@angular/core';
import { Loader } from '@googlemaps/js-api-loader';
import { googleMapsApi } from 'apikeys';

@Component({
  selector: 'app-googlemaps',
  templateUrl: './googlemaps.component.html',
  styleUrls: ['./googlemaps.component.scss'],
})
export class GooglemapsComponent implements OnInit {
  @Input() data: { lat: string; long: string } = { lat: '', long: '' };
  loader = new Loader({
    apiKey: googleMapsApi,
  });
  constructor() {}

  ngOnInit(): void {
    this.loader.load().then(() => {
      new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: {
          lat: parseFloat(this.data.lat),
          lng: parseFloat(this.data.long),
        },
        zoom: 10,
      });
    });
  }
}

example

#### Stack trace
I get this message because I create a map on each open of a dialog, the map appears in the dialog:

<div class="map" id="map"></div>

How can I remove this message from appearing?
**"Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."**

example

Following these steps will guarantee the quickest resolution possible.

Thanks!

[jpoehnelt]

I'm going to assume that the warning is valid and there is some other way the maps js api is being loaded. If not, it would have to be a race condition in this check, but that doesn't seem likely. Do you have an example you can share? Can you check the console network tab to see what initiates the first loading of maps.googleapis.com?

[corymharper]

Hi @jpoehnelt , I wanted to tag on to this issue as I'm seeing this warning as well, but in a React implementation. My use of the loader can be minimized to something like this:

useEffect(() => {
		if (!streetAddressInput) {
			return;
		}

		let listener: google.maps.MapsEventListener | null = null;
		const loader = new Loader({
			apiKey: "",
			version: "weekly",
			libraries: ["places"]
		});

		(async () => {
			await loader.load();

			const autoComplete = new google.maps.places.Autocomplete(streetAddressInput, {
				fields: ['address_components'],
				types: ['address'],
			});

                        // Beneath here I add an event listener but I don't think it's relevant to the warning
		})();

		return () => {
			listener?.remove();
			loader.deleteScript();
		}
	}, [streetAddressInput]);

The warning pops up if I navigate away from the page within the application and navigate back, it does not show up on the initial load of the component. I have confirmed that the script tag is being removed and added as you would expect. I can also confirm that the script is not being loaded anywhere else because I added the loader to the application in the current merge request I am working on, and it doesn't exist outside of the component I am working on.

If any other information would help let me know, I'll try to find time to see if I can create a minimal reproduction for you later.

[jpoehnelt]

closed in #250