Google Maps Style Zoom Control - google-maps

Question

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.

Answer 1

there's a option for that using google's map API and Custom Control setup, here's a fragment of the code I found:
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The ZoomControl adds +/- button for the map
*
*/
function ZoomControl(controlDiv, map) {
// Creating divs & styles for custom zoom control
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
controlWrapper.style.backgroundColor = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px';
controlWrapper.style.height = '64px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the zoomIn
var zoomInButton = document.createElement('div');
zoomInButton.style.width = '32px';
zoomInButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
controlWrapper.appendChild(zoomInButton);
// Set CSS for the zoomOut
var zoomOutButton = document.createElement('div');
zoomOutButton.style.width = '32px';
zoomOutButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
controlWrapper.appendChild(zoomOutButton);
// Setup the click event listener - zoomIn
google.maps.event.addDomListener(zoomInButton, 'click', function() {
map.setZoom(map.getZoom() + 1);
});
// Setup the click event listener - zoomOut
google.maps.event.addDomListener(zoomOutButton, 'click', function() {
map.setZoom(map.getZoom() - 1);
});
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: chicago,
/* Disabling default UI widgets */
disableDefaultUI: true
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and call the ZoomControl() constructor
// passing in this DIV.
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}
initialize();
you can see a working example here:
http://jsfiddle.net/maunovaha/jptLfhc8/

Answer 2

To style the buttons without only using the API, so allowing you to do more things, create the button controls via the API - as described above in #Picard answer - and attach to the div a cssClass property, then style the button as you wish:
var zoomOutButton = document.createElement('div');
zoomOutButton.className = 'zoom-out-btn';
then to style you simply add your rules:
.zoom-out-btn{ /** your rules **/ }
same with zoomInButton:
var zoomInButton = document.createElement('div');
zoomInButton.className = 'zoom-in-btn';
.zoom-in-btn{ /** your rules **/ }

Answer 3

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.