Hi there! I'm having some trouble styling my Google map. Sometimes the style loads correctly in browsers, and sometimes it doesn't.
Another issue I've noticed is that when I view the page on mobile platforms like Android Chrome, iOS Safari, and Windows Phone IE, the style never seems to load.
I apologize if this post isn't up to par with the standards here on Stack Overflow - it's my first time posting. Any help would be greatly appreciated!
function initialize() {
var mapOptions = {
zoom: 13,
};
map = new google.maps.Map(document.getElementById('mapCanvas'),
mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'This is you'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
}
var styles = [
{
"elementType": "labels.text.fill",
"stylers": [
{ "invert_lightness": true },
{ "gamma": 0.01 },
{ "hue": "#e500ff" }
]
},{
"elementType": "geometry",
"stylers": [
{ "hue": "#00fff7" }
]
},{
"stylers": [
{ "gamma": 0.78 },
{ "visibility": "on" },
{ "invert_lightness": true }
]
}
]
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'This is not where you are, right?';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setOptions({styles: styles});
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is the corresponding HTML:
<link rel="shortcut icon" href="images/favicon.ico">
<link href='css/style.css' rel='stylesheet' />
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src='js/main.js'></script>
<style>
body {
margin:0; padding:0;
}
#mapCanvas {
position:absolute; top:0; bottom:0; width:100%;
z-index: 1;
}
</style>
</head>
<body onload="initialize()">
<div id="mapCanvas"></div>