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 code for the marker looks like this:

var marker = new google.maps.Marker({
    position: results[i].geometry.location,
    map: map,
    name: results[i].name,
    //icon: eachPhotoinArray
    icon: 'http://i.stack.imgur.com/KOh5X.png'
});

Is there a way to get my photos to be placed directly on top of the frame image?

Answer 1

possible approach(using CSS):

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

The problem: There is no implemented way to access the <img> -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 eg 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/