[Resolved] Google maps doesn’t load when Google Translate is included on the page

[Author]

Posts

[Csaba Szabo]

I am trying to:
Show a Google map with this shortcode:
```
[wpv-map-render map_id="map-2" map_height="400px"][/wpv-map-render]
```
But the map doesn't render.

Link to a page where the issue can be seen:
hidden link

The issue seems to be coming from how the plugin is trying to access the maps:
```
if ( API_GOOGLE === views_addon_maps_i10n.api_used ) {
if ( typeof google === 'undefined' ) {
self.api = null;
} else {
/** @var {Object} google */
self.api = google.maps;
}
} else {
/** @var {Object} atlas */
self.api = null;
}
```
Here the code only checks for `typeof google === 'undefined'`, but `google` is not undefined because Google Translate is loaded as well. This wouldn't be a big issue, because there is a fallback in the code, but it only checks for `null` like:
```
if (self.api === null)
```
But in the above code it gets to be set to `undefined`:
```
self.api = google.maps
```

So, the solution could be to check for the existence of `google.maps` and not just `typeof google === 'undefined'`.

[Christian Cox]

Hello, I set up a quick test using a Map shortcode with the GTranslate plugin active, but I was unable to replicate the same problem in a very basic test scenario. The map is displayed as expected, and there are no JavaScript errors displayed in the console. The typeof google variable is undefined at the point you mentioned despite having GTranslate active. I'm attaching screenshots showing a breakpoint hit in that conditional, then the map displaying as expected afterwards. So perhaps there is a google object initialization timing inconsistency, or maybe there is another plugin or theme contributing to the conflict? Please try these troubleshooting steps and let me know the result to help rule out additional conflict components:
- Temporarily activate a default theme like Twenty Twenty One, deactivate any custom code snippets in Toolset > Settings > Custom Code, and deactivate all plugins except Types, Views, Maps, and GTranslate. If you need to activate a maintenance mode plugin during testing that is fine.
- Since the Events Calendar plugin is responsible for the page you mentioned, you can drop the same map shortcode in any custom Page or native Post and test it there.
- If the map is displayed now, reactivate your theme, custom code snippets, and other plugins one by one testing each time until the problem is resolved.
- If the map is still not displayed, I'll need to take a closer look.

Let me know what you find out from these steps and we can go from there.

[Csaba Szabo]

Hey,
Thank you for the quick answer!

Unfortunately, if you put a breakpoint on the sample link I sent in my first message you'll see that the `google` object does exist by the time the toolset map is trying to load.

I'm attaching an image to show this.

I understand that our setup might make it hard to properly reproduce the issue, but one thing you could do on your end is to only install Toolset and the other required plugins and just define a global `google` object like this:
```
window.google = {
translate: {}
}
```
Probably this is the easiest way.

Let me know if you need other information.

[Christian Cox]

but one thing you could do on your end is to only install Toolset and the other required plugins and just define a global `google` object like this:
I see...yes you're right, that would reproduce the symptoms you are experiencing, but not the complete problem. It would not be appropriate for me to escalate though, because it does not help our team determine the reason the problem occurs, or why it occurs in your site but not in my similar test setup. I need to be able to replicate the problem in a local test environment so our team can debug further. I could try to replicate the problem in a clone of your site, if that would be acceptable. I can create a clone with the All-in-One WP Migration plugin or the Duplicator plugin if you provide admin login credentials in the private reply fields here. Or you can create a clone using one of those tools, upload to Drive or Dropbox, and provide a download link for me, if you would prefer to handle it that way. Otherwise we need to figure out how I can effectively replicate the complete issue in my local environment so I can escalate it for further investigation.

Let me know how you'd like to proceed here.

[Christian Cox]

Okay thanks, I'm starting the clone process now and will update you shortly.

[Christian Cox]

I've cloned the site and replicated the problem in my local test environment, so I'm escalating this problem to my 2nd tier team for additional debugging. I'll keep you posted here as I receive additional information.

[Christian Cox]

I received some feedback today that a similar conflict was recently reported for a different Google Translate plugin, but I overlooked that report:
https://toolset.com/forums/topic/toolset-maps-conflicts-with-jetpacks-google-translate-widget/

The symptoms are the same as yours, and the developers' debug notes are essentially identical to what you've already reported. The JavaScript google object is defined, and a more precise check for google.maps, instead of just the google object itself, is needed. Our developers plan to release the fix in the next version of Toolset Maps. I will keep you posted here as I receive information about that release schedule.

[Christian Cox]

Please update to the latest versions of all installed Toolset plugins to get the fix for this issue. Let me know if the problem is not completely resolved.

[Csaba Szabo]

It works now. Thank you for your help!