Is it possible to use several images as the Google Maps v3 MarkerImage?

Question

I want a map marker composed of three images. Two images will be the same across all markers where one is variable. There doesn't seem to be a way to specify multiple images on the MarkerImage class. The only way that I can think of is to draw all the images to a canvas then outputting it as a png dataURL for the MarkerImage class. That seems like overkill though.

Answer 1

I don't think it is possible with three separate images.

If two of the images are always the same I guess you could combine them into one and store it in the icon property and then use the variable image in the shadow property or vise versa (the icon will always be on top of the shadow). You just need to manipulate the size and position of the MarkerImage objects.

working example: http://jsfiddle.net/mG4uz/1/

var image1 = new google.maps.MarkerImage(
   'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png',
    new google.maps.Size(45, 90), //adjust size of image placeholder  
    new google.maps.Point(0, 0), //origin
     new google.maps.Point(0, 25) //anchor point
  );

var image2 = new google.maps.MarkerImage(
   'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png',
   new google.maps.Size(45, 45),
   new google.maps.Point(0, 0), 
   new google.maps.Point(0, 0) 
  );

var marker = new google.maps.Marker({
   position: centerPosition,
   map: map,
   icon: image1,
   shadow:image2
  });