Google Map Markers Not Showing up on MOBILE only

studiotdesign · April 2018

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/

Bryan · April 2018

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

studiotdesign · 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

Bryan · April 2018

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

studiotdesign · April 2018

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

studiotdesign · April 2018

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)

studiotdesign · April 2018

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

studiotdesign · April 2018

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

Additional markers do not show up

studiotdesign · April 2018

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

studiotdesign · April 2018

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

Bryan · April 2018

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

Google Map Markers Not Showing up on MOBILE only

Comments

This website uses cookies