Using MarkerWithLabel on Google Maps hide the marker

Question

I am currently using the google maps marker with label control. I can dynamically assign a marker to the map, and have a label for that marker.

I have figured out how to hide the label however, I am at a bit of a loss on how to hide the icon and show the label. Anyone with some suggestions on this?

markerWithLabel.setMap(null);

removes the marker and label, not just the marker.

Answer 1

I was able to hide the marker by setting the icon setting to an empty string " ".

var marker = new MarkerWithLabel({
            icon: " ",
            position: location,
            draggable: true,
            raiseOnDrag: true,
            map: map,
            labelContent: z, 
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 0.75},
        });

Answer 2

Very easy, just set a transparent image as the icon. Here I set a 1x1 transparent GIF - pixel_trans.gif - as Icon when the MarkerWithLabel is clicked :

var marker = new MarkerWithLabel({
...
});

google.maps.event.addListener(marker, 'click', function() {
  this.setIcon('pixel_trans.gif');
});

Viola, the marker is hidden when it is clicked, but the label stand. It is not possible to hide the Icon and only show the label in the current version of MarkerWithLabel.

---

Note: You have to pass a valid image before this is going to work, eg an image that exists. Using setIcon with null or an invalid image will be ignored. An 1x1 transparent gif is imho an acceptable solution, since the user will have the experience that the marker is hidden, and will have a h*** of a trouble trying to click on it :)