Changing inclusion of country/state labels at different zoom levels? - google-maps

Question

In Google Maps static API (and the other APIs as far as I can tell), at zoom level 7 the country label for USA disappears and at zoom level 8 the labels for individual states disappear.
I am interested in generating maps at zoom level 8 but retaining the country and state labels. I realise the labels are not entirely appropriate to this zoom level but I would like them to be visible if you happened to view the map at the appropriate location.
Is there any way of acheiving this with the Google Maps API?
I have tried
style=feature:administrative.country|element:labels|visibility:on&stylefeature:administrative.province|element:labels|visibility:on
but this doesn't add the labels I want at zoom level 8. My suspicion is that this simply can't be done, but maybe someone knows a workaround.

Answer 1

You can't use styled maps to change that. But you can add them yourself to the map at the higher zoom levels.
proof of concept fiddle
proof of concept with all 50 states, but probably need to tweak some of the locations
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(35.9, -97.092877),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
document.getElementById('zoom').innerHTML = "zoom="+map.getZoom();
google.maps.event.addListener(map, 'click', function(e) {
console.log(e.latLng.toUrlValue(6));
});
// 35.930648,-97.166119
var myOptions = {
content: "OKLAHOMA",
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "14pt",
width: "50px",
color: "grey"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(36.05, -97.4),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log("zoom=" + map.getZoom());
document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
if (map.getZoom() == 8) {
ibLabel.open(map);
} else {
ibLabel.close();
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 98%;
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="zoom"></div>
<div id="map_canvas"></div>