Google maps hide smaller cities (localites) - api

Question

I am using map styler and I am trying to hide the label of all small cities. the problem is that they are all listed as localities. so if I turn off the "featureType": "locality" it turns off even big cities.
Please have a look at the location on this google maps link, you will see when you zoom out bigger cities as for example 'Brasilia' and 'Goiania' have a bigger and bolder label. While the other smaller cities around have smaller font size label.
So obviously google maps by default is styling different sizes cities differently.
https://www.google.com.au/maps/place/Faina,+State+of+Goi%C3%A1s,+Brazil/#-15.4463132,-50.4081042,8z/data=!4m2!3m1!1s0x9367dd6707a3d11d:0xd225bdabe7eabd49
how could I create my own style for those smaller cities labels?
I tried "featureType": "locality.sub_locality" but it hides all localities including the big cities.

Answer 1

One option would be to hid all the localities ("locality.sub_locality"), then add your own labels for the big cities that you want visible.
proof of concept fiddle using a small sample of cities from geonames.org
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
styles: [{
"featureType": "administrative.locality",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}]
});
google.maps.event.addListener(map, 'zoom_changed', function() {
for (var i = 0; i < mapLabels.length; i++) {
if (map.getZoom() > 5) {
mapLabels[i].setVisible(true);
} else {
mapLabels[i].setVisible(false);
}
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6);
});
var bounds = new google.maps.LatLngBounds();
var mapLabels = [];
for (var i = 0; i < citiesJSON.geonames.length; i++) {
var marker = new google.maps.Marker({
position: {
lat: citiesJSON.geonames[i].lat,
lng: citiesJSON.geonames[i].lng
},
// map:map,
title: citiesJSON.geonames[i].name
});
bounds.extend(marker.getPosition());
var myOptions = {
content: citiesJSON.geonames[i].name,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "100px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-50, 0),
position: new google.maps.LatLng(citiesJSON.geonames[i].lat,
citiesJSON.geonames[i].lng),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
mapLabels.push(ibLabel);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var citiesJSON = {
"geonames": [{
"lng": -47.92972,
"geonameId": 3469058,
"countrycode": "BR",
"name": "Brasília",
"fclName": "city, village,...",
"toponymName": "Brasília",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Bras%C3%ADlia",
"lat": -15.77972,
"fcl": "P",
"population": 2207718,
"fcode": "PPLC"
}, {
"lng": -49.25388889,
"geonameId": 3462377,
"countrycode": "BR",
"name": "Goiânia",
"fclName": "city, village,...",
"toponymName": "Goiânia",
"fcodeName": "seat of a first-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Goi%C3%A2nia",
"lat": -16.67861111,
"fcl": "P",
"population": 1171195,
"fcode": "PPLA"
}, {
"lng": -47.81027778,
"geonameId": 3451328,
"countrycode": "BR",
"name": "Ribeirão Preto",
"fclName": "city, village,...",
"toponymName": "Ribeirão Preto",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Ribeir%C3%A3o_Preto",
"lat": -21.1775,
"fcl": "P",
"population": 619746,
"fcode": "PPLA2"
}, {
"lng": -48.27722222,
"geonameId": 3445831,
"countrycode": "BR",
"name": "Uberlândia",
"fclName": "city, village,...",
"toponymName": "Uberlândia",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Uberl%C3%A2ndia",
"lat": -18.91861111,
"fcl": "P",
"population": 563536,
"fcode": "PPL"
}, {
"lng": -49.37944444,
"geonameId": 3448639,
"countrycode": "BR",
"name": "São José do Rio Preto",
"fclName": "city, village,...",
"toponymName": "São José do Rio Preto",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/S%C3%A3o_Jos%C3%A9_do_Rio_Preto",
"lat": -20.81972222,
"fcl": "P",
"population": 374699,
"fcode": "PPLA2"
}, {
"lng": -48.95277778,
"geonameId": 3472287,
"countrycode": "BR",
"name": "Anápolis",
"fclName": "city, village,...",
"toponymName": "Anápolis",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/An%C3%A1polis",
"lat": -16.32666667,
"fcl": "P",
"population": 319587,
"fcode": "PPL"
}, {
"lng": -47.40083333,
"geonameId": 3463011,
"countrycode": "BR",
"name": "Franca",
"fclName": "city, village,...",
"toponymName": "Franca",
"fcodeName": "seat of a second-order administrative division",
"wikipedia": "en.wikipedia.org/wiki/Franca",
"lat": -20.53861111,
"fcl": "P",
"population": 305041,
"fcode": "PPLA2"
}, {
"lng": -47.93194444,
"geonameId": 3445839,
"countrycode": "BR",
"name": "Uberaba",
"fclName": "city, village,...",
"toponymName": "Uberaba",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Uberaba",
"lat": -19.74833333,
"fcl": "P",
"population": 260843,
"fcode": "PPL"
}, {
"lng": -47.95027778,
"geonameId": 3458329,
"countrycode": "BR",
"name": "Luziânia",
"fclName": "city, village,...",
"toponymName": "Luziânia",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Luzi%C3%A2nia",
"lat": -16.2525,
"fcl": "P",
"population": 143601,
"fcode": "PPL"
}, {
"lng": -46.51805556,
"geonameId": 3454783,
"countrycode": "BR",
"name": "Patos de Minas",
"fclName": "city, village,...",
"toponymName": "Patos de Minas",
"fcodeName": "populated place",
"wikipedia": "en.wikipedia.org/wiki/Patos_de_Minas",
"lat": -18.57888889,
"fcl": "P",
"population": 126234,
"fcode": "PPL"
}]
};
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox#1.1.14/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>