react-google-maps-api
react-google-maps-api copied to clipboard
How can I add custom pointer icon and change the map style
HI, thanks for valuable work best wish for this team, I need little help at this point How can I add custom pointer icon and change the map style like gray map
I tried to setOptions
in onLoad
, but no style is shown. Does the library support style change? Couldn't find any information about it.
const onLoad = useCallback((map) => {
const options = {
styles: [
{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#263c3f" }],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [{ color: "#6b9a76" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ color: "#38414e" }],
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [{ color: "#212a37" }],
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{ color: "#9ca5b3" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ color: "#746855" }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{ color: "#1f2835" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#f3d19c" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#2f3948" }],
},
{
featureType: "transit.station",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#17263c" }],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [{ color: "#515c6d" }],
},
{
featureType: "water",
elementType: "labels.text.stroke",
stylers: [{ color: "#17263c" }],
},
],
}
map.setOptions(options);
setMap(map)
}, [])
@chungwwei please provide minimal reproduction in codesandbox.io
For the custom style the <GoogleMap />
component has an options
prop which you can utilise.
You can utilise this by doing something like <GoogleMap options={{ styles: GOOGLE_MAP_STYLE }} />
.
For the custom style the
<GoogleMap />
component has anoptions
prop which you can utilise.You can utilise this by doing something like
<GoogleMap options={{ styles: GOOGLE_MAP_STYLE }} />
.
You can go here in this link.https://mapstyle.withgoogle.com/ and choose legacy json formator. then select the theme of your choice and copy the json and then that in styles. Hope this helps.