Google Maps Style Zoom Control

I am using the Google Maps V3 Javascript API and would like to style the zoom control. Though the Google Documentation has information about moving the Custom Controls it doesn't seem to have any for styling the custom controls. https://developers.google.com/maps/documentation/javascript/controls#ControlModification

What I would like to do is be able to style the existing zoom control.

Is there a way to do style the EXISTING control? I would prefer to do this over creating a new custom control.

Solution

You'll probably need to use JQuery for this as there aren't really any unique classes or IDs for the control. I used a technique similar to here: Styling standard Zoom control in Google Maps v3

Here's my version:

google.maps.event.addListener(map, 'tilesloaded', function() {
    $('#map_canvas').find('img[src="https://maps.gstatic.com/mapfiles/szc4.png"]').parent('.gmnoprint').css('YOUR_STYLE_HERE', 'YOUR_VALUE_HERE');
});

So basically, the above selects the zoom control image, and then steps up one level to get the entire container. You may need to specify a different image than I did, this was for the "Small" version.