Forum has been created to help all our customers in properly working our theme. We offer complete help with configuration theme and make default look, just like on our Be|theme demo. We don`t offer theme customization.


Before creating a new discussion, please:
1. Check on forum if discussion hasn`t been created before. Use the forum Search on the right.
2. Read carefully the documentation included to package.
3. If you didn`t find what you need and would like to post a new question click the "Start a New Discussion" button on the right.
4. You can post on forum only after registration (you need purchase code to register) .


NOTE!!! If you are starting a new topic and have got problems with your site and you want us to check what`s wrong please always give url to your site because without that we can`t check what`s wrong. Each case may be different because of your installed plugins, servers or other things.


IMPORTANT!!! Along with your inquiry, please attach the address of the page which concerns the question. This will cause the time to answer on your question will be much shorter. If you do not want to publish your address publicly in the forum, please send a private message. Thanks!

Google Map Markers Not Showing up on MOBILE only

Hello, I have worked with betheme on a few sites. I encountered an issue with custom map markers not appearing on mobile devices.
They appear perfect on desktop though. They also appear perfect when using Firefox 59.0.2 in Responsive Mode, but on an actual
iphone 10 they do not show up.

http://dev.gtllp.com/contact-us/

Comments

  • Please sign in to see answear!
  • edited April 18
    Thanks for checking, but this is not the case for me.

    Firefox 59.0.2 - Map Markers show up on Desktop only
    Safari 11.1 - Map Markers show up on Desktop only
    Chrome 65.0.3325.181- NO map markers at all

    What can I do to address this?

    Not sure if this helps, but here is the code for the customized map:


    [
        {
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#2e1f14"
                }
            ]
        },
        {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#bbbec1"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 45
                },
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#343434"
                },
                {
                    "visibility": "on"
                },
                {
                    "saturation": "0"
                },
                {
                    "lightness": "50"
                }
            ]
        }
    ]

    ------
    The 4 map markers use artwork in the media library and I am placing them in 4 locations (3 of which are shown in the preview window on my 2 browsers). Here are the coordinates for the 4 markers:

    33.902011, -118.1566108; 33.66016, -117.75207; 33.90156, -117.49353; 38.90038, -77.04574

    Can you assist me on getting this to work across browsers AND on mobile?

    http://prntscr.com/j745e2
  • Please sign in to see answear!
  • I did send you a screenshot showing the map markers on desktop above
    so they SHOULD be on mobile. That was my point. I did notice that they do not appear in the Chrome browser though.

    I will follow your instructions but here are screenshots of desktop showing the map markers on desktop:
    Firefox: http://prntscr.com/j7ko7v
    Safari: http://prntscr.com/j7kp7e

  • OK, I deleted the customized code and cleared cache. Then I added back in the customized code and only the main marker. The map showed up on desktop and mobile. Hurray!

    However, when I add in the additional 3 markers, they do not show up. I double checked for proper coordinates using http://itouchmap.com/latlong.html   I tried with and without the icon URL https://dev.gtllp.com/wp-content/uploads/2018/03/Map-Marker.png

    These are the additional map markers I am trying to use:
    33.660184,-117.752135;33.901597,-117.493594;38.900388,-77.045742

    I also tried with Icon URL:
    33.660184,-117.752135,https://dev.gtllp.com/wp-content/uploads/2018/03/Map-Marker.png;33.901597,-117.493594,https://dev.gtllp.com/wp-content/uploads/2018/03/Map-Marker.png;38.900388,-77.045742,https://dev.gtllp.com/wp-content/uploads/2018/03/Map-Marker.png

    Both yielded no change to map (no additional markers show up)

  • I played around a bit more--

    I deleted all customized code and only added in the main marker. It also shows up on
    Firefox / Safari / Chrome

    When I add in the extra markers, they do NOT show up.

    Screen shot attached:  http://prntscr.com/j7noxi

  • (Only the Main marker show up on Desktop and Mobile)

    Additional markers do not show up
  • By the way, I also noticed that the header logo on top left does not show up on Chrome Browser. see screenshot:

    http://prntscr.com/j7nts9
  • Ok, so after hours of playing around, it started working. Please check it out and see if it is working on your end. I just don't understand why it would all of a sudden start working.

    Also, if you can address the header logo in chrome not appearing, I would appreciate
  • Please sign in to see answear!
Sign In or Register to comment.