CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
nehas
nehas

Reputation: 247

Place an image over an image in google maps API marker

I have this frame that I am currently using as my marker images https://i.sstatic.net/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: 'https://i.sstatic.net/KOh5X.png'
});

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

Upvotes: 1

Views: 2475

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

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='https://i.sstatic.net/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='https://i.sstatic.net/KOh5X.png#1']{
    background:url(http://domain.com/path/to/img.png) no-repeat 4px 4px
   }

   img[src='https://i.sstatic.net/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/

Upvotes: 2

Related Questions