Google Maps API v3 add shadow to marker by clicking

Question

I know that officially google removed marker shadows in the v3 google APIs. With that in mind, I have a project where shadow shadows are required. I would like to put a shadow on the marker when the marker is clicked. Essentially, he adds an event listener to the marker, and when his click adds a shadow to the marker, as a way to show that clicking the marker is the active marker.

I read some pages, for example. marker shadows in google maps v3 that put shadows on all markers, but I would like to borrow from this example and add shadows when the marker is clicked and have the shadow removed when the marker loses focus, that is, when you click on another marker.

My jsfiddle with two markers to play with here, and the code below: jsfiddle here

var marker;
var locations = [["6","43.683","9.58","3002: Location 1",1],["7","45.149","9.44","3003: Location",2]];
function initialize() {
    var mapProp = {
    center: new google.maps.LatLng(43.683, 9.44),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP};

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
        position:new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon:'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            alert(locations[i][3] + " was clicked");
        }
    })(marker, i));

    marker.setMap(map);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

If someone can help in developing a strategy or even a piece of code to put shadows on the marker when it is clicked, I would be very pleased. Please feel free to deploy jsfiddle and add a link to it and post the link here.

Answer 1

Another option is to create a marker shadow object (from my answer to the question you refer to) the first time the marker is clicked, move it to the marker again clicked when it is clicked (add .setPositionmethod to the MarkerShadowclass).

var marker;
var locations = [
  ["6", "43.683", "9.58", "3002: Location 1", 1, true],
  ["7", "45.149", "9.44", "3003: Location", 2, false]
];
var markerShadow;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(43.683, 9.44),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var iconShadow = {
    url: 'http://www.geocodezip.com/mapIcons/marker_shadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    size: new google.maps.Size(37, 34),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(10, 34)
  };


  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
      title: locations[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        if (markerShadow && markerShadow.setPosition) {
          markerShadow.setPosition(this.getPosition());
        } else if (!markerShadow) {
          markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map);
        }
      }
    })(marker, i));

    marker.setMap(map);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

// marker shadow code
MarkerShadow.prototype = new google.maps.OverlayView();
MarkerShadow.prototype.setPosition = function(latlng) {
    this.posn_ = latlng;
    this.draw();
  }
  /** @constructor */

function MarkerShadow(position, options, map) {

    // Initialize all properties.
    this.posn_ = position;
    this.map_ = map;
    if (typeof(options) == "string") {
      this.image = options;
    } else {
      this.options_ = options;
      if (!!options.size) this.size_ = options.size;
      if (!!options.url) this.image_ = options.url;
    }

    // Define a property to hold the image div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay.
    this.setMap(map);
  }
  /**
   * onAdd is called when the map panes are ready and the overlay has been
   * added to the map.
   */
MarkerShadow.prototype.onAdd = function() {
  // if no url, return, nothing to do.
  if (!this.image_) return;
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = this.options_.size.x + 'px';
  img.style.height = this.options_.size.y + 'px';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayShadow.appendChild(div);
};

MarkerShadow.prototype.draw = function() {
  // if no url, return, nothing to do.
  if (!this.image_) return;
  // We use the coordinates of the overlay to peg it to the correct position 
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  var posn = overlayProjection.fromLatLngToDivPixel(this.posn_);

  // Resize the image div to fit the indicated dimensions.
  if (!this.div_) return;
  var div = this.div_;
  if (!!this.options_.anchor) {
    div.style.left = Math.floor(posn.x - this.options_.anchor.x) + 'px';
    div.style.top = Math.floor(posn.y - this.options_.anchor.y) + 'px';
  }
  if (!!this.options_.size) {
    div.style.width = this.size_.x + 'px';
    div.style.height = this.size_.y + 'px';
  }
};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay map property to 'null'.
MarkerShadow.prototype.onRemove = function() {
  if (!this.div_) return;
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

Run codeHide result

violin showing the result