How to add custom styling in the AGM
I used to like this
in TS file
markers: any[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
draggable: false
},
{
lat: 51.323858,
lng: 7.255982,
label: 'D',
draggable: false
},
{
lat: 51.293858,
lng: 7.285982,
label: 'E',
draggable: false
},
{
lat: 51.353858,
lng: 7.305982,
label: 'F',
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: 'C',
draggable: true
}
]
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'}]
}
]
And in the template like this
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [styles]="styles">
<agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let m of markers; let i = index"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label">
</agm-marker><!-- multiple markers -->
</agm-marker-cluster>
</agm-map>
but map theming is not working. Can you help me so I can use diffrent styling maps from https://mapstyle.withgoogle.com/
Any reply
The style
input on the Map component accepts an array of objects of type MapTypeStyle
, and it certainly works since I've used it before.
Please make your examples shorter, there's no need for all these styles. It's easier to parse and check for possible errors. Also, a reproduction is required for us to be able to investigate a possible bug in AGM. Hence, I'll be closing this since it's not an issue and/or lacking reproduction.
This worked for me:
styles: [] = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
}
i've added [] =
Most helpful comment
This worked for me:
styles: [] = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
}
i've added [] =