Toggle custom labels on and off in Google Maps V3 - google-maps

Question

Added some labels to my Google Map (v3), ideally I'd like two things:
1) To be able to switch them on and off (as when zoomed out the labels become cluttered)
2) To be able to change the textsize of the label depending up the mapzoom.
I added the labels like so, info being read in from some nested arrays:
for (x = 0; x < areadata.length; x++){//Start Label Loop
labelObjects[x] = new MapLabel({
text: areadata [x][0],
position: new google.maps.LatLng(areadata [x][2], areadata [x][1]),
map: mymap,
fontSize: 16,
align: 'center'
});
labelObjects[x].set('position', new google.maps.LatLng(areadata [x][2], areadata [x][1]));
}
I'm using the maplabel-compiled.js from http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/examples/maplabel.html - with one change however. mapPane.appendChild has been amended to floatPane.appendChild - this brings all labels in front of any Polygons I have on the map.
This works just fine, the problem comes when I try to control the labels, I've tried interacting with the first label in the array like so with no joy:
labelObjects[0].setVisible(false);
labelObjects[0].set('visible', false);
labelObjects[0].set('fontSize', 48);
Anyone had similar issues? Thanks for reading.

Answer 1

be sure that labelObjects is accessible in the scope where try to toggle the mapLabel
there is no method setVisible for a MapLabel
setting a visible-property of a MapLabel will not have any effect. To show/hide the MapLabel set the map-property of the MapLabel to either a google.maps.Map-instance(mymap) or null
var areadata = [
['label#1', 1, 1],
['label#2', 2, 2]
],
labelObjects = [],
mymap;
function init() {
var myLatlng = new google.maps.LatLng(1.5, 1.5),
myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
mymap = new google.maps.Map(document.getElementById('map'), myOptions);
for (x = 0; x < areadata.length; x++) { //Start Label Loop
labelObjects[x] = new MapLabel({
text: areadata[x][0],
position: new google.maps.LatLng(areadata[x][2], areadata[x][1]),
map: mymap,
fontSize: 16,
align: 'center'
});
labelObjects[x].set('position', new google.maps.LatLng(areadata[x][2], areadata[x][1]));
}
mymap.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('toggle'));
}
google.maps.event.addDomListener(window, 'load', init);
body,
html,
#map {
margin: 0;
padding: 0;
height: 100%;
}
#toggle {
padding: 1px 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
border-radius:2px;
background: #fff;
cursor: pointer;
margin:4px;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-map-label#1.0.1/src/maplabel.js"></script>
<div id="map"></div>
<a id="toggle" onclick="labelObjects[0].setMap((labelObjects[0].getMap())?null:mymap)">toggle label#1</a>