You have included the Google Maps JavaScript API multiple times on this page

Hello everyone,

I am trying to build a Google Maps plugin.
Doing that I have encountered this weird and super annoying error message:
“You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.”
The plugin seems to work, but this error appears when I run a custom action.
The flow is as follows:

  • I add markers to the Google Map object and for every marker I add an eventListener “gmp-click”.

  • The above event triggers a Bubble event (When a marker is clicked) and publish the position of the clicked marker as a state. Here is the code I have used:

    marker.addEventListener(“gmp-click”, () => {
    instance.publishState(“curMarkerPosition”, marker.position);
    instance.triggerEvent(“markerClicked”);
    });

If I use just this event, everything works fine. For example, when a marker on the map is clicked, I can open an alert window (so, after the map event “When marker is clicked” I trigger a native Bubble action, i.e. opening an alert window).
Everything is fine and no error is displayed.

  • Then, I added a custom element action called “Pan To”. It essentially uses the Google Maps api function to pan the center of the map to a specific position. The custom action receives as arguments (or parameters - I never remember how they are called) the objects instance (the plugin element itself), properties and context. In the properties object I have set the field “position” that I fill with the “current marker position” state I set in the click event.

    function(instance, properties, context) {
    let map = instance.data.map;

    //Do the operation
      map.panTo(properties.position);
    

    }

Now, whatever action I define inside this element custom action function (for example, even if, instead of the map.panTo() action I set an alert() action), when I make it to be triggered by the “When a marker is clicked” event in the Bubble workflow, as I click on a marker of the map I get the above stated error, i.e.
“You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.”

Notice that the action is anyway performed (i.e. the map center pans to the clicked marker position), but, I suppose as the fact the API have been added again, if, for example, I resize the browser window, all of the markers disappear and I get, for every resizing, the following error as well:

"Uncaught (in promise) ".

I have tried to analyze the issue by using alerts and see which function are called. As a matter of fact, in order to load Google Maps api I use a function that runs just if api are not already loaded (for example, in the page, there could be another plugin element instance or there could be another google map element - that native from bubble or that of another plugin).
The weird thing (to me) is that this function is correctly called just once at the page load.
When I click on the marker and the multiple loaded api error appears, the api loading function is not called at all.
It looks to me as if, when the element custom action is called and it is passed the instance object, that this object causes the api to be added again, but I can’t really figure out how it happens.

Has someone maybe an idea/suggestion on how to manage this thing?
Thank you!

Federico

ok, even if it is not completely clear to me why this happens, I have found by myself the solution to the asked question.
Essentially, in my plugin, I require the Google Maps API key to be inserted in the plugin tab.
I added it anyway in the Settings - General tab of the Bubble editor as well.
Eliminating the key in the Settings - General tab, it solved the problem. If someone, anyway, has an explanation for this, it would be really appreciated!

1 Like

Life saver! Thank you! I was banging my head with this.

1 Like