Marker shadows in Google Maps v3

Question

I'm looking for a way to make marker shadows work with the "visual refresh" that's coming to Google Maps, but can't seem to.

I suppose the following is the recommended way to do it: https://developers.google.com/maps/tutorials/customizing/custom-markers

Can anyone see the marker shadows in the examples on that tutorial? I can't.

What are you guys doing to make this work?

Thanks in advance!

Answer 1

One option for adding shadows to post visual refresh Google Maps Javascript API v3 maps:

1. create a Custom Overlay to hold the shadow image attached to the "overlayShadow" pane

2. add one for every marker

   • proof of concept

Add markers with shadows like this:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: getMarkerImage(beach[4]),
    shape: iconShape,
    title: beach[0],
    zIndex: Math.round(myLatLng.lat()*-100000)<<5
});
var shadow = new MarkerShadow(myLatLng, iconShadow, map);
marker.bindTo('map',shadow,'map');

MarkerShadow code (modified from Google's Custom Overlay example):

MarkerShadow.prototype = new google.maps.OverlayView();
/** @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's 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's 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's 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's map property to 'null'.
MarkerShadow.prototype.onRemove = function() {
  if (!this.div_) return;
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

Answer 2

Why not create an extra marker with lower z-index?

createMarkerShadow = function(map, data) {
        var latLng = new google.maps.LatLng(data.latitude, data.longitude);
        var markerShadow = new google.maps.Marker({
            clickable: false,
            position: latLng,
            map: map,
            icon:{
                url: '/frontend/img/icons/google-map-marker-shadow.svg',
                //The size image file.
                size: new google.maps.Size(225, 120),
                //The point on the image to measure the anchor from. 0, 0 is the top left.
                origin: new google.maps.Point(0, 0),
                //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
                anchor: new google.maps.Point(115, 82)
            },
            zIndex: (Math.round(latLng.lat()*-100000)<<5)-1
        });

        return markerShadow;
    };


setMarkerShadows = function (map, locations, bound) {
    for (var i = 0; i < locations.length; i++) {
        var data = locations[i];
        var markerShadow = createMarkerShadow(map, data);

        bound.extend(markerShadow.getPosition());
    }
};

bound = new google.maps.LatLngBounds();