How to place multiple icons for Google map markers in version 3?

Question

I am trying to create a map similar to this (which uses the v2 API). I want each marker on the map to consist of an image with a frame or background behind like this .

Using icon and shadow MarkerOptions is not like this because shadow markers lag behind other marker icons.

Answer 1

I think you will have to combine the images with the background of the marker. When I built something like this, I used CSS sprites and calculated the vertical offset (vPos) based on the standard height. I just didn't worry about 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 the excellent small library, RichMarker . Its documentation is here .

To make it easier to use, you can even create your own class of markers, for example:

 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 any namespace that you use.

From now on, CSS works, you can put images as you like.

Answer 3

yes, marker shadows are placed in a separate layer - below all markers. You must combine the background and photo into one icon, or create a new class that inherits from MarkerImage .