api - Google maps hide smaller cities (localites)

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": "Goiania",
    "fclName": "city, village,...",
    "toponymName": "Goiania",
    "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": "Uberlandia",
    "fclName": "city, village,...",
    "toponymName": "Uberlandia",
    "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": "Luziania",
    "fclName": "city, village,...",
    "toponymName": "Luziania",
    "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/[email protected]/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>