Geek Answers Handbook

Place the image on top of the image in the Google Maps API marker

I have this frame that I am currently using as my images with the marker http://i.stack.imgur.com/KOh5X.png . I would like the frames to be filled with the images I'm looking for. My marker code is as follows:

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 for my photos to be placed directly above the frame image?

+1
source share
1 answer

possible approach (using CSS):

Markers

by default will be displayed using <canvas>to make them how to <img>set optimized-marker restriction onfalse

: <img>, URL- , CSS- URL- "" :

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

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

, , .

: , , URL-, :

   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
   }

script, , . http://davidwalsh.name/add-rules-stylesheets ( )

( [latitude,longitude,image-url,marker-title]):

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

+2

More articles:


All Articles