Google maps hide small cities (locales)
I am using map styler and I am trying to hide the label of all small towns. the problem is they are all listed as locations. so if I disable "featureType": "terrain" disables even big cities.
Please take a look at the location on this Google Maps link, you will see when you zoom out big cities like Brasilia and Goiânia, for example, have a bigger and brighter label. Whereas other smaller cities around have a smaller font size label.
So, by default, Google Maps by default differ from each other by different cities.
how can i create my own style for the lesser cities labels?
I tried "featureType": "locality.sub_locality" but it hides all settlements including big cities.
+1
source to share
1 answer
One option is to hide all locations ("locality.sub_locality") and then add your own shortcuts for the big cities you want to see.
proof of concept scripts using small sample cities from geonames.org
snippet of code:
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"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
+1
source to share