0

Google マップにスタイルを追加しようとしています。ただし、ブラウザーでページを開くと、スタイルが読み込まれない場合と読み込まれる場合があります。

これは問題の 1 つですが、次の問題と何らかの関係があるのではないかと推測しています。

モバイル プラットフォーム (android chrome、ios safari、windows phone IE を試した) でページを開くと、スタイルが読み込まれません。

この投稿が正しくない場合や、何らかの形で標準に準拠していない場合は、申し訳ありません. スタックオーバーフローに投稿するのはこれが初めてです。

助けていただければ幸いです！

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);

そして、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>
4

1 に答える 1