Grey Box where Google Map should be

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: box, google, grey, load, map

Author

Posts
October 20, 2016 at 7:19 pm #288685

Andrew Wilkins
Free User

Post count: 10

Hello,

I’ve been wrestling with this for a while.

The page is here http://seattlebookreview.com/local/local-bookstores/

I’ve tried adding a bunch of
#map, div, #gd_home_map, etc etc {
overflow: visible;
}

I’ve tried adding this function call to the document.ready function of the JS as well

google.maps.event.trigger(map_id, ‘resize’); but that hasn’t worked, yet, either.

WordPress 4.5.2 running BeboStore Child Theme theme.

I’ve only been able to display the map pins, and not the map itself. Please advise at your earliest.

Cheers

October 20, 2016 at 9:54 pm #288738

Guust
Moderator

Post count: 29970

You can achieve that when using Google Maps, with the Custom Google Map addon. You will be able to turn off/hide all map elements except the markers.
https://wpgeodirectory.com/downloads/custom-google-maps/

October 21, 2016 at 3:37 pm #289255

Paolo
Site Admin

Post count: 31211

Hi Andrew,

I think Guust misunderstood your question. Please provide admin credentials in a private reply (only moderators can read them) and we will have a look at your settings.

It could be a conflict with another plugin’s script.

Let us know,

Thanks

October 24, 2016 at 6:17 pm #291044

Andrew Wilkins
Free User

Post count: 10

This reply has been marked as private.

October 24, 2016 at 6:50 pm #291057

Andrew Wilkins
Free User

Post count: 10

This reply has been marked as private.

October 25, 2016 at 2:57 pm #291532

Paolo
Site Admin

Post count: 31211

Hi Andrew,

the map appears to be working, where is it that appears as a grey box only?

Let us know,

Thanks

October 25, 2016 at 5:17 pm #291625

Andrew Wilkins
Free User

Post count: 10

Hi Paolo,

It only doesn’t work on this page http://seattlebookreview.com/local/local-bookstores/ using the [homepage_map] shortcode. When you click the full screen icon, the full screen map works just fine. It’s only when the map is sitting there as part of the page that it displays as grey box with pins only.

Thanks Paolo

October 25, 2016 at 6:13 pm #291719

Paolo
Site Admin

Post count: 31211

Ok I see the problem now. There is a JS error:

TypeError: a is null
https://maps.google.com/maps/api/js?&language=en&key=AIzaSyD7t12abpGCdxfQCrTfnrLz1f6ODS0mrAU
Line 86

I asked to the developers to follow up.

Thanks for your patience,

October 26, 2016 at 9:33 am #292040

Stiofan O’Connor
Site Admin

Post count: 22956

Hi Andrew,

It seems to be a JavaScript error but its not throwing a specific error on the page.
If you can provide FTP details i will be able to track it down quicker.

Thanks,

Stiofan

October 31, 2016 at 4:28 pm #295139

Andrew Wilkins
Free User

Post count: 10

This reply has been marked as private.

November 1, 2016 at 12:28 pm #295656
Stiofan O’Connor
Site Admin

Post count: 22956
Hi Andrew,

The problem actually lies in a CSS rule in the theme.
```
.entry-content div {
    max-width: 100%!important;
}
```
That should really be:
```
.entry-content > div {
    max-width: 100%!important;
}
```
I have added a css rule to compensate for this, please check.

Thanks,

Stiofan
November 1, 2016 at 3:49 pm #295949

Andrew Wilkins
Free User

Post count: 10

Hi Stiofan,

That didn’t seem to do the trick. I’ve attached a screenshot.

Looks like we now have the zoom in/out buttons, but the rendering is strange. That, and the map is still grey with no streets/topography yet.

Why did the CSS rule cause an issue?

Thank you,
Andrew

November 1, 2016 at 10:54 pm #296409

Paolo
Site Admin

Post count: 31211

I still see the grey map too on Firefox too. I alerted Stiofan again.

Thanks for your patience,

November 3, 2016 at 10:58 am #297346
Stiofan O’Connor
Site Admin

Post count: 22956
You have something (i assuem the events plugin) trying to add a map on the page but the element id does not exist:
```
window.map = new google.maps.Map(document.getElementById("em_search_wrapper"));
```
Stiofan
November 3, 2016 at 8:59 pm #297632

Andrew Wilkins
Free User

Post count: 10

Hey Stiofan,

Thanks for clarifying. This issue was happening prior to the events plugin being activated. Did you deactivate it and see if the map began to work?

When I deactivated the events plugin, I saw no change in the homepage_map widget.

Please advise,
Andrew
Author

Posts