I am working on google map using angular. I have used direction api and created roadways.
My requirement was to remove cities from the map by showing only state name. I achieved that, but now the issue is the cities which are the part of waypoints are also not displaying as shown in the image.
some portions of my code while setting up the google map is given below.
options: google.maps.MapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 6,
styles: [
{
elementType: 'geometry',
stylers: [
{
color: '#f5f5f5',
},
],
},
{
elementType: 'labels.icon',
stylers: [
{
visibility: 'off',
},
],
},
{
elementType: 'labels.text.fill',
stylers: [
{
color: '#616161',
},
],
},
{
elementType: 'labels.text.stroke',
stylers: [
{
color: '#f5f5f5',
},
],
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [
{
color: '#bdbdbd',
},
],
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{
color: '#eeeeee',
},
],
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [
{
color: '#757575',
},
],
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [
{
color: '#e5e5e5',
},
],
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e',
},
],
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
color: '#ffffff',
},
],
},
{
featureType: 'road.arterial',
elementType: 'labels.text.fill',
stylers: [
{
color: '#757575',
},
],
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [
{
color: '#dadada',
},
],
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [
{
color: '#616161',
},
],
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e',
},
],
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [
{
color: '#e5e5e5',
},
],
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [
{
color: '#eeeeee',
},
],
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#c9c9c9',
},
],
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
color: '#9e9e9e',
},
],
},
],};
this.map = new google.maps.Map(document.getElementById('googleMap'), {
...this.options,
center: this.waypoints[0].location,
});
So I want a solution where I can show only the cities which are the part of the road path i.e the waypoints.