admin管理员组文章数量:1026989
I found a code snippet on :
[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.
I found a code snippet on http://www.41latitude.com/post/1268734799/google-styled-maps:
[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.
Share Improve this question edited Oct 28, 2010 at 21:39 RedBlueThing 42.5k17 gold badges97 silver badges122 bronze badges asked Oct 26, 2010 at 14:24 Rene TerstegenRene Terstegen 8,04618 gold badges54 silver badges75 bronze badges 2- I really don't see much on the page, it looks like they are using the different basemaps road, satelite, etc. They do manipulate the styling options as already detailed. – Drew Commented Oct 26, 2010 at 14:30
- It's here developers.google.com/maps/documentation/javascript/styling – BigJ Commented Oct 26, 2017 at 23:35
3 Answers
Reset to default 38As @ceejayoz suggested in the other answer, you are trying to use the new Styled Map features of the v3 Maps API. Here's a very basic example of how you could use the above style in a simple map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Dark Water Style Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 550px; height: 300px;"></div>
<script type="text/javascript">
var myStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControlOptions: {
mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
center: new google.maps.LatLng(30, 0),
zoom: 3,
mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
</script>
</body>
</html>
Screenshot:
You may also want to check out the Google Maps APIs Styling Wizard which will allow you to graphically edit styles.
I know this is 5 years old, but I stumbled across this and the accepted solution is much more complex than needed in my opinion. Given the JSON in the original post, this is how you would apply the style to an existing map:
var mapStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
//create map
var map = new google.maps.Map(...); //This assumes you already have a working map
//set style
map.set('styles', mapStyle);
The page you linked to includes a link to the Google Maps API documentation for this feature.
I found a code snippet on :
[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.
I found a code snippet on http://www.41latitude.com/post/1268734799/google-styled-maps:
[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.
Share Improve this question edited Oct 28, 2010 at 21:39 RedBlueThing 42.5k17 gold badges97 silver badges122 bronze badges asked Oct 26, 2010 at 14:24 Rene TerstegenRene Terstegen 8,04618 gold badges54 silver badges75 bronze badges 2- I really don't see much on the page, it looks like they are using the different basemaps road, satelite, etc. They do manipulate the styling options as already detailed. – Drew Commented Oct 26, 2010 at 14:30
- It's here developers.google.com/maps/documentation/javascript/styling – BigJ Commented Oct 26, 2017 at 23:35
3 Answers
Reset to default 38As @ceejayoz suggested in the other answer, you are trying to use the new Styled Map features of the v3 Maps API. Here's a very basic example of how you could use the above style in a simple map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Dark Water Style Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 550px; height: 300px;"></div>
<script type="text/javascript">
var myStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControlOptions: {
mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
center: new google.maps.LatLng(30, 0),
zoom: 3,
mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
</script>
</body>
</html>
Screenshot:
You may also want to check out the Google Maps APIs Styling Wizard which will allow you to graphically edit styles.
I know this is 5 years old, but I stumbled across this and the accepted solution is much more complex than needed in my opinion. Given the JSON in the original post, this is how you would apply the style to an existing map:
var mapStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
//create map
var map = new google.maps.Map(...); //This assumes you already have a working map
//set style
map.set('styles', mapStyle);
The page you linked to includes a link to the Google Maps API documentation for this feature.
本文标签： javascriptGoogle Maps v3 hide elements (roadsroadsignsetc)Stack Overflow
版权声明：本文标题：javascript - Google Maps v3 hide elements (roads, roadsigns, etc) - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1737463631a1474681.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论