Custom Google Maps styling not working on iPad - ios

Question

I'm working on a site that has some custom Google Maps styling on a map on the homepage. You can find the site here: toptourist.com
However, when you view the site on an iPad (or other tablets, probably), the map changes and doesn't have the same styles as it does on the desktop.
I've looked through the files and can't see any reason why this is happening so just wondered if any bright sparks on here can help?
The function that builds the map is quite lengthy so I'm loathed to paste the whole thing here, but here's a snippet:
var mapOptions = {
center: myLatlng,
zoom: 12,
scrollwheel: false,
zoomControl: false,
minZoom: 1,
maxZoom: 15,
panControl: false,
navigationControl: false,
scaleControl: false,
mapTypeControl: false,
streetViewControl: false,
overviewMapControl: false
};
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var styles = [
{
stylers: [
{ hue: "#765910" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions(
{styles: styles}
);

Answer 1

I think your style works across different devices. I paste it on the jsfiddle and it looks fine on android, ios and desktop. Plus, if you tab on the address bad and request for a desktop page, you get what you expected.
Looking at your source code, rather than the Google Maps Style, I think the problem is in your initialize_for_device code. Your site has 2 different div for mobile and desktop, but I think you have only one set of css for map-canvas, but not the map-canvas_device. That could be the problem.