CODEWITHSUNDEEP
cssgoogle-maps-api-3google-maps-markersshadow
ygoe
ygoe

Reputation: 20394

Add CSS shadow to a Marker with Google Maps API

With the Google Maps API (version 3) you can add Marker objects on the map with a custom image. I'm using this to place thumbnail images of my photos on an interactive map. I can scale my own photos with a PHP script, so they're available in a suitable size via a URL. But the Maps API doesn't support adding a CSS shadow on the element. In fact it doesn't support any CSS because it only renders its content in canvas elements.

Now I guess I have two options to get shadows under my thumbnail images:

  1. Write a PHP script that can generate such shadow images. They need to be PNG images with alpha transparency. Not sure whether this is supported by PHP. I could either use a template and copy over its corners and edges to a target image of the requested size, or I could compute the gaussian blur myself and generate every single pixel which may take longer.

  2. Or somehow change the usage of the Maps API to get a real DOM element that I can apply any CSS effect on.

Which is the easiest? Could somebody provide a solution for any of them? Right now, both seem equally overcomplex.

Upvotes: 1

Views: 2066

Answers (3)

Chris
Chris

Reputation: 27394

As @geocodezip points out, you should use optimized : false as a markerOption to get Google Maps to render them as HTML rather than using Canvas.

To address LonelyPixels question as to how to style them, you can do so like this:

img[src="/content/maps/spotlight-poi-red.png"] {
    background: red;
}

You can specify different styles for different images, then whenever google maps uses that image for a marker (you can set this image elsewhere) you can alter its style.

Personally I make Google Maps render a transparent png and then use CSS to completely style the markers.

Upvotes: 1

Jaroslav Štreit
Jaroslav Štreit

Reputation: 430

https://developers.google.com/maps/documentation/javascript/markers

Note: Marker shadows were removed in version 3.14 of the Google Maps JavaScript API. Any shadows specified programmatically will be ignored.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

One option would be to use optimized:false markerOption on your markers. The markers wouldn't be rendered in CANVAS, but you would have to decide if the performance is acceptable for your application.

optimized | boolean | Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

Upvotes: 2

Related Questions