Grey Box where Google Map should be

This topic contains 20 replies, has 4 voices, and was last updated by  Paolo 7 years, 11 months ago.

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

Open Support Ticket

Tagged: , , , ,

  • Author
    Posts
  • #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

    #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/

    #289255

    Paolo
    Site Admin
    Post count: 31206

    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

    #291044

    Andrew Wilkins
    Free User
    Post count: 10
    This reply has been marked as private.
    #291057

    Andrew Wilkins
    Free User
    Post count: 10
    This reply has been marked as private.
    #291532

    Paolo
    Site Admin
    Post count: 31206

    Hi Andrew,

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

    Let us know,

    Thanks

    #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

    #291719

    Paolo
    Site Admin
    Post count: 31206

    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,

    #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

    #295139

    Andrew Wilkins
    Free User
    Post count: 10
    This reply has been marked as private.
    #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

    #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

    #296409

    Paolo
    Site Admin
    Post count: 31206

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

    Thanks for your patience,

    #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

    #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

Viewing 15 posts - 1 through 15 (of 21 total)

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

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount