Shadows on Google Maps visualRefresh

Google Maps Docs ( https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions ) says:

"Shadows are not displayed if google.maps.visualRefresh is set to true.

Is it possible to overwrite this and get shadows to display when using visualRefresh?

I also found documents that state this ( https://devsite.googleplex.com/maps/documentation/javascript/basics ):

All shadows were removed during visual refresh. Any shadows specified programmatically will be ignored.

It still seems strange to me that they will not allow you to somehow rewrite this, so that shadows and visual rendering should this happen.

+1
source share
2 answers

You can create a marker icon with shadow.

Or create a custom overlay for your markers that includes a shadow (i.e. not a google.maps.Marker object).

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

Now this is more work, but still possible, since this is no longer the default behavior.

+3
source

z? , , , . ( , , , )

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

Source: https://habr.com/ru/post/1619185/


All Articles