How to place multiple icons for Google map markers in v3?

Question

I\'m trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.

Answer 1

I think you'll have to merge the images with the marker backgrounds. When I was building something similar I used CSS sprites and calculated the vertical offset (vPos), based on a standard height. I just didn't bother with the shadows.

     var mImage = new google.maps.MarkerImage("YOURMARKER.png", 
        new google.maps.Size(34, 35), 
        new google.maps.Point(0, vPos),
        new google.maps.Point(10, 34)
    ); 
    //insert marker
    marker = new google.maps.Marker({
        icon: mImage,
        position: new google.maps.LatLng(latitude, longitude),
        map: map
    });

Answer 2

You can use an excellent little library, RichMarker. Its documentation is here.

To make usage easier, you can even create your own custom marker class, something like this:

Ns.Marker = function(properties) {

    RichMarker.call(this, properties);

    this.setContent('<div class="three-images-marker">' +
            properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + 
            properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
        '</div>');
};

Ns.Marker.prototype = Object.create(RichMarker.prototype);


// and use it like this:
var yourFramedMarker = new Ns.Marker({
      position: yourMarkerLatlng,
      map: yourMap,
      NsImage: 'example.com/image.png',
      NsFrameImage: 'example.com/frame.png',
});

'Ns' is whatever namespace you use, if you do.

From here on it's CSS work, you can position the images as you like.

Answer 3

yes, marker shadows are all placed in the separate layer - below all markers. You have to merge the background and photo into one icon image, or create a new class which would inherit from MarkerImage.