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/
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
We checked and the map on desktop:
http://prntscr.com/j5vd4c
Looks the same as the map on iphoneX
http://prntscr.com/j5ve95
thanks
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 remove the customized code and clear your browser cache.
Also send a screenshot of the additional map markers you entered in the backend.
thanks
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
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 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
Additional markers do not show up
http://prntscr.com/j7nts9
Also, if you can address the header logo in chrome not appearing, I would appreciate
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