Google Maps: Border on Markers

I'm trying to display photos as markers on Google Maps. This is no problem by redefining the marker开发者_如何学JAVA as an image, but I want to put some sort of border or shadow to make them stand out better. Something like the Google photos would be best, but I guess this is too complicated, if at all possible. A simple 1px solid border would do fine. One option is to actually change the image, but this is not an option. Also, the images are different sizes so I can not put a black image as the shadow (1px larger than the original).

Here is the idea:

CURRENT:

LOOKING FOR:

EVEN COOLER:

IDEAL WORLD:

Is this possible?

Have a look at the Rich Marker v3 library demo (the actual library) which allows to use custom html as a marker.

Setting a marker html of

<img 
  src="http://www.picturesofengland.com/img/S/1015720.jpg" 
  style="border:2px solid white;
  -moz-box-shadow:0px 0px 10px #000;
  -webkit-box-shadow:0px 0px 10px #000;
  box-shadow:0px 0px 10px #000;" 
/>

and clicking the toggle flat (an option in the library api) would do what you want.. you alter the image src of course ;)

for more libraries look at http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

@Cinetik's comment led me to overcome a conceptual barrier. I, too, was trying to use RichMarkers in my app, and I too was trying to animate them. When I discovered that RichMarker's setAnimation doesn't just work, I too was furious. Then I made that comment above,

"I'd like to have my rich marker and animate it too"

and realized my misconception. I am sharing my answer for posterity:

Google map's Marker has all kinds of crazy features, like out-of-the-box animations. It doesn't allow for HTML/CSS/JS manipulation, though, because it doesn't produce clean HTML markers. If you want that, you need RichMarker. The problem is, you can't have you cake and eat it too. If you opt-in to RichMarker's elegant HTML/CSS/JS integration, you automatically opt-out of some of the nicer features of the plain Marker. You can implement them yourself, if you want, and having that freedom is exactly why you chose RichMarker in the first place, isn't it?

So, here is some code to add a bounce animation to a RichMarker using jQuery and the amazing 'bez' plugin by rdallasgray.

// create a marker using our element
var marker = new RichMarker({
    content: $("myElement").get(0)
});

// now animate that element!
$("#myElement").animate({ left: -100 }, 500, $.bez([0,0,0.6,1]));

I hope that helps someone!

You want to use im (ImageMagick) to automatically create a border for the image.