How to control google map markers' opacity
The opacity of markers can be set with marker.setOptions({'opacity': 0.5})
There is no way via CSS. You could reference the markers in an array, and then loop through the array using the setIcon() method on each marker object to reference icons with different opacities (presuming you're using PNGs with alpha transparency). You'll have to call a function to change the icons based on user input or some other event.
You can set the opacity when you create the marker
marker = new google.maps.Marker({opacity:0.5, ...});
You can use marker.setOpacity(0.5);
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
code snippet:
var marker;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 10,
center: {
lat: -33.9,
lng: 151.2
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: {
lat: -33.890542,
lng: 151.274856
},
map: map,
title: "Bondi Beach"
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="inc" type="text" value="0.5" />
<input type="button" id="set" value="set opacity" onclick="marker.setOpacity(parseFloat(document.getElementById('inc').value))" />
<input type="button" id="full" value="full opacity" onclick="marker.setOpacity(1.0);" />
<div id="map_canvas"></div>