Map element (Google) showing in mobile, but not on desktop

Support
#1

Why would it be that my map element loads in mobile browsers (or when the desktop browser is emulating a mobile) but not on desktop?

#2

Hey there,

Thanks for writing in! Please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

#3

Thanks for the reply–

My testing has shown that it’s not browser cache or CDN caching, and it’s not a plugin conflict. Any other ideas?

#4

Hey There,

Maybe your column, row or section has applied the “Hide During Breakpoint” options which you can find in the “Customize” tab in the section, row or column settings.

You must check it in your map element as well and it must be deactivated so that it will display in all screen sizes.

Please let us know how it goes.

#5

None of the “hide during breakpoints” options are selected for the map element, nor are any of the “hide based on screen width” options selected for the row or column. Moreover, no matter what the width settings for the map element, it shows on mobile but not on desktop.

Strangely, when I emulate mobile in Chrome’s dev tools and then reload it, the map appears. When I turn off device emulation, the map persists but, when I reload again (having turned off device emulation), the map disappears again.

This doesn’t happen with any other element on the page-- just the map. It happens whether I use the standard Map element in X, or the Classic Google Maps element.

I’ve also deleted the row and attempted to recreate it, but the same thing happens. The map element is visible (I can see the box) but there’s no map content loaded. Again, the map appears in mobile.

#6

Hi there,

In that case, please provide your site’s URL that has this issue. And we’ll check what’s going on :slight_smile:

Thanks!

#7

Currently, the map element is the white area on the left near the bottom.

Thanks for looking into it for me. I’m totally sure it’s my fault, I just can’t figure out how.

#8

Hello There,

Thanks for providing the url of the page in questioned. I can confirmed that there is an issue in your site. Is it possible that we can login to your site so that we can check your settings? Please make sure that you added an API key.

Please let us know how it goes.

#9

Here are the credentials:

#10

Hi there,

Please supply the API in the API Key field.

You should be able to get the map API key here: https://developers.google.com/maps/documentation/javascript/get-api-key

Hope this helps.

#11

Sorry-- I’m confused-- The API key has already been entered. Is it not visible to you?

#12

Hi There,

The API key field is empty on our end, it seems Cornerstone is not saving it. Since your site is under CloudFlare. Would you mind doing the solution provided here and see if that resolves the issue.

Did this issue happen just recently? maybe after an update?

Thanks,

#13

It’s not a recent issue, as far as I can tell. Is it a known version conflict that the map element is broken under certain circumstances?

I’ve added the page rule in Cloudflare and shut off minification. Did you intend for that to resolve the empty API field issue, or the map visibility anomaly? If it’s meant to fix the map visibility, it does not seem to have resolved that issue.

#14

Hi,

I can see your api key now, the field is no longer empty.

The problem is the API Key is invalid, try to generate a new one again.

#15

Okay, try this one. It should work. This is definitely not an issue with my API credentials-- as I said, the maps were displaying on mobile. I must have just given you the wrong one.

#16

Hello There,

After further investigation, I found out that the root cause of this issue is your child theme. There was a template change when we release X 5.x.x version. At the moment there is a malformed elements like a missing closing </div> tag on the page. This has affected the map element and I am sure it will affect other elements too.

To resolve this issue, please relocate your child theme files to it’s respected folders:

/x-child/framework/views/global/_header.php should be moved to /x-child/framework/legacy/cranium/headers/views/global/_header.php

/x-child/framework/views/renew/wp-header.php should be moved to  /x-child/framework/legacy/cranium/headers/views/renew/wp-header.php

You will need to create these folders because it does not exist yet.

#17

I have relocated the files as instructed, but the problem seems to persist. I’ve cleared all my caches and checked from several places. Still showing on mobile, not showing on desktop. Any other ideas?

#19

I’ve reinstalled a new copy of the X child theme freshly downloaded from ThemeCo. Still no good. I’m out of ideas. I’ve literally done everything right as far as I can tell. What next?

#20

Hello There,

We have created a test page in your site. You can check it out in the secure note.
Even in the test page, it is still happening. I copied exactly the same template and tested it out in our local testing servers. The map displays with no issues at all. I am guessing that this issue is only unique to your installation. Do you have any other site where we can test the map and compare it to this one? Or maybe you can set up a staging site so that we will be testing in your staging site. Again we have to compare the outcome of your staging and your current site because none of this issue happens in all our local testing servers. If possible, could we disable other plugins too to make sure that this is not a plugin conflict? You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If the issue still exist, please re install WordPress Core, X theme and Cornerstone. There might be some files that were corrupted. You can review our update guide and see the Manual Update section to re install X.

Please let us know how it goes.

#21

One thing I know for sure is that it’s not a plugin conflict. As none of it displays without Cornerstone activated, I MUST have Cornerstone on to enable the site, but even with ONLY Cornerstone active, the issue persists.

I don’t see any secure note attached to your last post at the time of this writing.

I’ll explore the process of reinstalling the entire platform to fix this issue. I’m going to start by deleting and reinstalling Cornerstone and seeing if that does anything.