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

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('
' +
            properties.NsImage ? '
' : '' + 
            properties.NsFrameImage ? '
' : '' +
        '
');
};

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.