Place an image over an image in google maps API marker

Question

I have this frame that I am currently using as my marker images http://i.stack.imgur.com/KOh5X.png. I would like the frames to be populated with images that I search for. My

Answer 1

possible approach(using CSS):

markers by default will be rendered via , to render them as set the optimized-option of the marker to false

The problem: There is no implemented way to access the -elements directly, but when you know the URL of the marker you may use a CSS-selector based on this URL to "insert" the images via background:

   img[src='http://i.stack.imgur.com/KOh5X.png']{
    background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
   }

Demo: http://jsfiddle.net/doktormolle/o6et77jx/

The problem is clear, you will not be able to load different images into the frame, because the selector is always the same.

Solution: add e.g. a hash to the URL to get a distinct selector:

   img[src='http://i.stack.imgur.com/KOh5X.png#1']{
    background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
   }

   img[src='http://i.stack.imgur.com/KOh5X.png#2']{
    background:url(http://domain.com/path/to/anotherimg.png) no-repeat 4px 4px
   }

These style-rules may be created via script when you want to, see http://davidwalsh.name/add-rules-stylesheets (Safely Applying Rules)

Demo(using an array with the format[latitude,longitude,image-url,marker-title]) :

http://jsfiddle.net/doktormolle/w8z3kg6y/