How to control the opacity of Google map markers

Question

I need to make some markers translucent depending on the time. Is there a way to control the opacity of a CSS marker? Or can you reliably recognize the marker DOM element?

I am using the Google Maps API v3.

Answer 1

There is no way using CSS. You can reference the markers in the array and then scroll through the array using the method setIcon()for each marker object to reference the icons with different opacity (assuming you are using PNG with alpha transparency). You will need to call a function to change the icons based on user input or some other event.

Answer 2

marker.setOptions({'opacity': 0.5})

Answer 3

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>

Run codeHide result