Placez une image sur une image dans un marqueur API google maps

J'ai ce cadre que j'utilise actuellement comme images de marque http://i.stack.imgur.com/KOh5X.png . J'aimerais que les images soient peuplées d'images que je recherche. Mon code pour le marqueur ressemble à ceci:

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' });

Existe-t-il un moyen d'obtenir mes photos directement sur l'image du cadre?

Approche possible (en utilisant CSS):

Les marqueurs par défaut seront rendus via <canvas> , pour les rendre comme <img> définir l'option optimized du marqueur sur false

Le problème: il n'y a pas de manière mise en œuvre d'accéder aux éléments <img> directement, mais lorsque vous connaissez l'URL du marqueur, vous pouvez utiliser un sélecteur CSS basé sur cette URL pour "insérer" les images par l'arrière-plan:

  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/

Le problème est clair, vous ne pourrez pas charger d'images différentes dans le cadre car le sélecteur est toujours le même.

Solution: ajoutez par exemple un hachage à l'URL pour obtenir un sélecteur distinct:

  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 }

Ces règles de style peuvent être créées via un script lorsque vous le souhaitez, voir http://davidwalsh.name/add-rules-stylesheets (Application sécurisée des règles)

Demo (en utilisant un tableau avec le format [latitude,longitude,image-url,marker-title] ):

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