How do you style or completely remove the Google map road direction arrows ?
Here is my styles array :
styles:[
{
"featureType": "all",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": "-20"
}
]
},
{
"featureType": "all",
"elementType": "labels.text",
"stylers": [
{
"weight": "0.38"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#b2a77f"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#383838"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#383838"
},
{
"lightness": "0"
}
]
},
{
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"lightness": 17
},
{
"color": "#5f5b4b"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
}
]
and I have tried the following :
disableDefaultUI: true,
streetViewControl: false,
scrollwheel: true,
panControl: false,
mapTypeControl: false,
overviewMapControl: false,
zoomControl: false,
draggable: true
Unfortunately the arrows do not disappear
Is it possible to do so ?
Thanks!
Google Maps has now been updated to allow for the removal of the road direction arrows by setting the visibility of the labels.icon
element.
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{"visibility": "off"}
]
}
Reference: issue ticket
I did a request. remove the litte arrows on the road https://code.google.com/p/gmaps-api-issues/issues/detail?id=7884
Seems like there are no way to disable the arrow at all.
I tried to turn off everything in the Google Maps API Styled Map Wizard, however, sadly the arrows are still here...
Since the arrow is transparent and darken its area, one work around is to set the lightless to -100 so everything become black. One draw back on this is the maps become so ugly :p
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With