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

  • Hi,
    We checked and the map on desktop:
    http://prntscr.com/j5vd4c
    Looks the same as the map on iphoneX
    http://prntscr.com/j5ve95
    thanks
  • edited April 2018
    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
  • Like we said, there are no map markers even on the desktop so how can they be on mobile.
    Please remove the customized code and clear your browser cache.
    Also send a screenshot of the additional map markers you entered in the backend.
    thanks
  • 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
  • Hey, glad that you made it work. It is now showing properly on our side on desktop and mobile.
    The logo is not showing on any browser, it is probably just cached on your firefox.
    The problem is that the logo image is trying to load from HTTPS where your website is HTTP,
    http://prntscr.com/j7sy9w I changed it and it appears.
    Try using this plugin to change the file paths or just upload the logo again.
    http://muffingroup.com/plugins/mfn-migrate-cb.zip
Sign In or Register to comment.