Google Maps: Border on Markers

Question

I\'m trying to display photos as markers on Google Maps. This is no problem by redefining the marker as an image, but I want to put some sort of border or shadow to make them st

Answer 1

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

Answer 2

@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!

Answer 3

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