Shadows on Google Maps visualRefresh

Question

In the Google Maps docs (https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions) it says:

"Shadows are not rendered when google.maps.visualRefresh is set to true."

Is it possible to overwrite this and get the shadows to show up while using the visualRefresh?

I have also found the docs stating this (https://devsite.googleplex.com/maps/documentation/javascript/basics):

All shadows have been removed in the visual refresh. Any shadows specified programmatically will be ignored.

It still seems odd to me that they wouldn't allow you to somehow overwrite this to allow shadows AND the visualRefresh, if that's the case.

score 4 · Accepted Answer · edited May 23 '17 at 12:24

4

You can create your marker icon with a shadow.

Or make a custom overlay for your markers which includes a shadow (i.e. not the google.maps.Marker object).

proof of concept, from my answer to the related question: Marker shadows in Google Maps v3

It is now more work, but still possible, as it is no longer the default behavior.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 27 '13 at 16:00

geocodezip

158,664
13
220
245

That worked great, I just used custom overlays to create the shadow. Thanks! – Zach Reed Aug 27 '13 at 16:49
If you add shadows to the marker image, they'll end up being painted over markers with a lower z-index, which looks wrong. – johncip Aug 21 '15 at 16:57

score 0 · Answer 2 · answered Feb 04 '15 at 11:00

Why not create an extra marker with lower z-index? It's less work than creating a custom overlay, and arguably a more correct way to do it. (if you create one marker icon with shadow as part of the icon image as suggested, the shadow is also clickable, and that's not desirable)

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();

Shadows on Google Maps visualRefresh

2 Answers2

Linked