Best way to display a custom Google maps multiple image marker icon

Question

I have two images, one is like an icon and the other is the icon background, what is the best way to combine these two images and make a google marker v3 icon? They are not svg

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('<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 gorgeousMarker = 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 2

Simplest way: Use an image editor to make a single image and use that as the icon for your custom marker.

If you can't or don't want to do that you can make a custom overlay (reference) that behaves like a marker and use it to overlay the two images in the correct order on the map.